React 源码解读

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c4c50b851882525a67c7aab

文章标签：

#javascript #ViewUI

本文深入剖析React组件的本质，从源码角度解读Component类的构造及其实现机制，包括props、context、refs、updater属性和setState、forceUpdate方法。同时，探讨了组件初始化过程，解析React.createElement如何生成ReactElement对象。

一、React组件
一个简单的react组件如下

/*
 * A simple React component
 */
class Hello extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}
console.log(<Hello />)
复制代码

输出组件<Hello />是一个如下所示的对象

输出 <Hello><div>world</div></Hello>

在实际组件应用中我们可以通过 props.children获取包裹在组件中的元素
不难看出我们平时写的组件，就是一个js的对象的嵌套树结构
<Hello />是继承了 React.Component这个类,那么我们首先来看下 React.js的源码，

这里我们可以看到React export出了Component、PureComponent、Fragment等模块。通过 import {Component, PureComponent} from './ReactBaseClasses'; 知道Component类是通过 ReactBaseClasses.js引入的

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}
Component.prototype.isReactComponent = {};
Component.prototype.setState = function(partialState, callback) {
  // ...
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};
复制代码

Component就是一个拥有props、context、refs、updater属性，setState、forceUpdate方的法构造函数，其中setState接收partialState和callback两个参数。
二、组件的初始化
通过babel解析Hello组件, 得到render方法实际上是调用了React.createElement方法,我们找到ReactElement这个文件，

createElement方法返回一个ReactElement对象，就是我们之前通过console打印出来的结构。

export function createElement(type, config, children) {
  // ...
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}
复制代码

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,
    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,
    // Record the component responsible for creating this element.
    _owner: owner,
  };
  return element;
};
复制代码

因此React组件的实质是通过执行React.createElement创建出来的ReactElement类型的js对象