【原创】react-源码解析 - Component&Ref（3）

Posted 2023-03-23

参考技术A  看到这个api想必大家再熟悉不过了，平常我们在react开发过程中写的组件都是继承自这个Component组件，比如我们在声明ClassComponent的时候extends的就是React.Component,在看源码只是我个人觉得写个class应该实现了很多复杂的功能比如说setState和render方法等，但是看了源码之后颠覆了我之前的认知： Component

在源码中Component方法只是简单的对props和context进行了赋值操作，这两个传入的参数我们都很熟悉，最后这个updater参数我们我们接触到。通过源码我们看到在Component的原型上声明了setState方法：

该函数内部只是判断了传入参数的合法性最后调用了Component中updater方法上的enqueueSetState。然后方法结束，这里去查了一下资料，这个方法具体的实现是在react-dom中完成的。为什么要这样做呢，因为在react中只是简单的提供了这个方法的入口，具体的调用需要看你在哪个平台下使用，比如在react-dom中和在react-native中的调用肯定是不同的。在原型上也声明了:

// forceUpdate-强制更新组件State方法

看到这里我们发现只是调用了updater 的enqueueForceUpdate方法，个人认为跟字面意思一样，对state的进行了强制更新操作。PureComponent的用法我们不必再去赘述，该方法实际就是对Component方法进行了继承，但是多加了一个属性：

// 在原型上添加一个额外的isPureReactComponent属性/，标识是一个pureComponent

isPureReactComponent用来说明是一个PureComponent。最后将这两个方法导出，到这里我们有关Componet的源码已经完结了，我们看到在react中其实没有太多复杂的操作，只是对传入参数的赋值，已经留下了一些函数入口。像更新渲染等操作实际都放在了react-dom中去完成。

        在开发中我们通常会有这样的需求，有时候我们需要获取某个Dom节点或者拿到classComponent类型的子组件的实例，进而操作这个子组件。比如说我们需要通过在父级组件中调用到子组件中的方法，从而更新子组件，这里的更新就不仅仅局限于更新props，通常我们跟新props也不需要获得子组件的实例。 这里通过ref这个属性会让我们很容易操作子组件。

一般在现有版本中有三种使用ref的方法：

（1）string 类型ref ref="string" == 不推荐，下个大版本会废弃

（2）function类型 ref = ele => (this.childRef = ele )

（3）React.createRef()

大致用法类似于这个样子，需要注意的是我们在使用ref时候，如果目标组件是一个function类型的Component一般来说这个时候拿到的ref肯定是undefined，因为functionComponent是没有实例的，后面我们会介绍一个叫做forward-ref的属性，这个属性可以让我们取到函数类型组件上去使用ref。接下来我们去看看createRef方法的源码： createRef

        这里的源码很简单只是创建了一个refObject在上面声明了一个为null的currenrt属性。然后将这个对象返回。其实这个源码看到这里也看不出ref到底是怎么挂载在组件的this上面的。这里应该是在react更新的过程中实现的，react中只有更新到结束一个完整的流程，至于到底是怎么挂载的ref我们接着往下读。

了解更多： react-source-code