React的JSX
JSX
作为描述组件内容的数据结构,为JS赋予了更多视觉表现力。在React
中我们大量使用他。在深入源码之前,有些疑问我们需要先解决:
JSX
和Fiber节点
是同一个东西么?React Component
、React Element
是同一个东西么,他们和JSX
有什么关系?
带着这些疑问,让我们开始这一节的学习。
JSX简介
相信作为React
的使用者,你已经接触过JSX
。如果你还不了解他,可以看下官网对其的描述。
JSX
在编译时会被Babel
编译为React.createElement
方法。
::: details JSX编译
:::
这也是为什么在每个使用JSX
的JS文件中,你必须显式的声明
import React from 'react';
否则在运行时该模块内就会报未定义变量 React
的错误。
::: warning 注意
在React17中,已经不需要显式导入React了。详见介绍全新的 JSX 转换 :::
JSX
并不是只能被编译为React.createElement
方法,你可以通过@babel/plugin-transform-react-jsx插件显式告诉Babel
编译时需要将JSX
编译为什么函数的调用(默认为React.createElement
)。
比如在preact这个类React
库中,JSX
会被编译为一个名为h
的函数调用。
// 编译前
<p>KaSong</p>
// 编译后
h("p", null, "KaSong");
React.createElement
既然JSX
会被编译为React.createElement
,让我们看看他做了什么:
export function createElement(type, config, children) {
let propName;
const props = {};
let key = null;
let ref = null;
let self = null;
let source = null;
if (config != null) {
// 将 config 处理后赋值给 props
// ...省略
}
const childrenLength = arguments.length - 2;
// 处理 children,会被赋值给props.children
// ...省略
// 处理 defaultProps
// ...省略
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
}
const ReactElement = function(type, key, ref, self, source, owner, props) {
const element = {
// 标记这是个 React Element
$$typeof: REACT_ELEMENT_TYPE,
type: type,
key: key,
ref: ref,
props: props,
_owner: owner,
};
return element;
};
我们可以看到,React.createElement
最终会调用ReactElement
方法返回一个包含组件数据的对象,该对象有个参数$$typeof: REACT_ELEMENT_TYPE
标记了该对象是个React Element
。
所以调用React.createElement
返回的对象就是React Element
么?
React
提供了验证合法React Element
的全局API React.isValidElement,我们看下他的实现:
export function isValidElement(object) {
return (
typeof object === 'object' &&
object !== null &&
object.$$typeof === REACT_ELEMENT_TYPE
);
}
可以看到,$$typeof === REACT_ELEMENT_TYPE
的非null
对象就是一个合法的React Element
。换言之,在React
中,所有JSX
在运行时的返回结果(即React.createElement()
的返回值)都是React Element
。
那么JSX
和React Component
的关系呢?
React Component
在React
中,我们常使用ClassComponent
与FunctionComponent
构建组件。
class AppClass extends React.Component {
render() {
return <p>KaSong</p>
}
}
console.log('这是ClassComponent:', AppClass);
console.log('这是Element:', <AppClass/>);
function AppFunc() {
return <p>KaSong</p>;
}
console.log('这是FunctionComponent:', AppFunc);
console.log('这是Element:', <AppFunc/>);
::: details React Component 分类 demo
:::
我们可以从demo控制台打印的对象看出,ClassComponent
对应的Element
的type
字段为AppClass
自身。
FunctionComponent
对应的Element
的type
字段为AppFunc
自身,如下所示:
{
$$typeof: Symbol(react.element),
key: null,
props: {},
ref: null,
type: ƒ AppFunc(),
_owner: null,
_store: {validated: false},
_self: null,
_source: null
}
值得注意的一点,由于
AppClass instanceof Function === true;
AppFunc instanceof Function === true;
所以无法通过引用类型区分ClassComponent
和FunctionComponent
。React
通过ClassComponent
实例原型上的isReactComponent
变量判断是否是ClassComponent
。
ClassComponent.prototype.isReactComponent = {};
JSX与Fiber节点
从上面的内容我们可以发现,JSX
是一种描述当前组件内容的数据结构,他不包含组件schedule、reconcile、render所需的相关信息。
比如如下信息就不包括在JSX
中:
- 组件在更新中的
优先级
- 组件的
state
- 组件被打上的用于Renderer的
标记
这些内容都包含在Fiber节点
中。
所以,在组件mount
时,Reconciler
根据JSX
描述的组件内容生成组件对应的Fiber节点
。
在update
时,Reconciler
将JSX
与Fiber节点
保存的数据对比,生成组件对应的Fiber节点
,并根据对比结果为Fiber节点
打上标记
。
参考资料
如何干掉知乎的全部DIV – 通过这篇文章在运行时修改
React.createElement
达到消除页面所有div
元素的效果React官网Blog,关于React Component, Element, Instance, Reconciliation的简介