react源码学习-基类篇

Posted 2022-03-07 lin-fighting

基础篇

createElememnt

jsx会被babel编译成React.createElement

最终返回一个虚拟dom，$$typeof用来标识是一个react元素。

Component

Component是React的基类，来看怎么实现的。

如图，简单的几句代码而已，因为主要的实现在不同的平台自己实现，Component只是作为一个基础的类。

这里需要注意有一个每个Component实例上有一个updater，不同的平台实现有不同的实现。

类组件通过在prototype上标明isReactComponent表明是一个类组件。

每个Component的实例具有setState方法和forceUpdate方法，他们具体由每个平台自己实现，这里只是调用。调用setState就会调用updater上的enqueueSetState方法。

如reactdom的

PureComponent

往下看，还可以看到PureComponent的实现

使用的就是js的继承的方式,继承了Component，并且在prototype上还标注了isPureReactComponent属性。这个属性会在reactdom更新的时候判断，比如：在检查类组件是否需要重新渲染的时候

会调用checkShouldComponentUpdate的时候，先判断了如果类实例有shouldComponentUpdate方法，就执行，然后如果没有shouldComponent，就会判断当前实例是否有isPureReactComponent属性，有则做一层浅比较，来判断是否需要更新组件。这就是PureComponent比Com ponent多做的一件事情。

优先判断是否实现了shouldComponent方法，没有的话再判断是否PureComponent的。

一些api的实现

createContext

Provider是一个有特殊标识的vdom，解析的时候可以通过_context将值存放到context.currentValue上，而Consumer也是一个特殊的虚拟dom,可以通过context.currentValue将值作为参数传入。createContext可以理解成一个全局的状态库，但是他不具有响应式。得通过一些api去实现组件的更新才能重新获取最新的值。

createRef

就是一个具有current的对象。

forwardRef

也是返回一个具有特殊标识的虚拟dom，然后保存render函数，在执行的时候会将ref作为第二个参数传入。

hooks

具体的hooks由react-dom实现。

memo

返回一个特殊标识的vdom，可以传入比较函数compare，他会将其保存起来，在该组件更新的时候执行compare，传入新老的props，依此判断是否更新。