• JSX和Fiber节点是同一个东西么？
  • React Component、React Element是同一个东西么，他们和JSX有什么关系？

带着这些疑问，让我们开始这一节的学习。

相信作为React的使用者，你已经接触过JSX。如果你还不了解他，可以看下。

JSX在编译时会被Babel编译为React.createElement方法。

JSX编译

关注公众号，后台回复712获得在线Demo地址

这也是为什么在每个使用JSX的JS文件中，你必须显式的声明

否则在运行时该模块内就会报未定义变量 React的错误。

注意

在React17中，已经不需要显式导入React了。详见

比如在preact (opens new window)这个类React库中，JSX会被编译为一个名为h的函数调用。

  1. // 编译前
  2. <p>KaSong</p>
  3. // 编译后
  4. h("p", null, "KaSong");

既然JSX会被编译为React.createElement，让我们看看他做了什么：

我们可以看到，React.createElement最终会调用ReactElement方法返回一个包含组件数据的对象，该对象有个参数$$typeof: REACT_ELEMENT_TYPE标记了该对象是个React Element。

所以调用React.createElement返回的对象就是么？

React提供了验证合法React Element的全局API React.isValidElement深入理解JSX - 图6 (opens new window)，我们看下他的实现：

  1.   return (
  2.     typeof object === 'object' &&
  3.     object !== null &&
  4.     object.$$typeof === REACT_ELEMENT_TYPE
  5.   );
  6. }

可以看到，$$typeof === REACT_ELEMENT_TYPE的非null对象就是一个合法的React Element。换言之，在React中，所有JSX在运行时的返回结果（即React.createElement()的返回值）都是React Element。

那么JSX和React Component的关系呢?

在React中，我们常使用ClassComponent与FunctionComponent构建组件。

React Component 分类 Demo

我们可以从Demo控制台打印的对象看出，ClassComponent对应的Element的type字段为AppClass自身。

FunctionComponent对应的Element的type字段为AppFunc自身，如下所示：

  1. {
  2.   $$typeof: Symbol(react.element),
  3.   key: null,
  5.   type: ƒ AppFunc(),
  6.   _owner: null,
  7.   _store: {validated: false},
  8.   _self: null,
  9.   _source: null 
  10. }

值得注意的一点，由于

所以无法通过引用类型区分ClassComponent和FunctionComponent。React通过ClassComponent实例原型上的isReactComponent变量判断是否是ClassComponent。

  1. ClassComponent.prototype.isReactComponent = {};

从上面的内容我们可以发现，JSX是一种描述当前组件内容的数据结构，他不包含组件schedule、reconcile、render所需的相关信息。

比如如下信息就不包括在JSX中：

  • 组件在更新中的优先级
  • 组件的state
  • 组件被打上的用于Renderer的标记

这些内容都包含在Fiber节点中。

所以，在组件mount时，Reconciler根据JSX描述的组件内容生成组件对应的Fiber节点。

在update时，Reconciler将JSX与Fiber节点保存的数据对比，生成组件对应的Fiber节点，并根据对比结果为Fiber节点打上标记。