一.什么是jsx
jsx是语法糖 它是js和html的组合使用
为什么用jsx语法？
高效定义模版，通过babel编译后使用 不会带来性能问题
二.jsx语法转化为js语法
jsx语法通过babel转化为js语法 内部调用了React.createElement()方法
html标签
自定义组件
React.Fragment组件
React.createElement(标签,属性props对象,子节点1,子节点2.....)
1.参数：标签名,属性对象,子节点 返回值：虚拟dom对象
2.标签：1.字符串 2.组件（自定义组件：函数组件/class组件，react原生组件：React.Fragment等）
一般组件首字母大写 如果bable转化时 发现当前标签的首字母为大写 则表示当前的标签是一个函数名称 否则当前标签为一个字符串
3.属性props对象：写在标签上的属性集合 一般为对象
4.子节点：表示子节点的集合 一般从React.createElement的第三个参数开始，如果对于当前标签的子节点为字符串则参数值直接为字符串
如果当前节点的子节点不是字符串 则会生成新的React.createElement
如：<ul><li>我是li的子节点</li></ul> 1.ul而言 子节点：li 2.li而言 子节点我是li的子节点
虚拟dom：
调用createElement函数 返回ReactElement：该标签名放到type上 该标签的属性和该标签的子节点放到与该标签同级的props上
三.React.createElement(type,config[...children])源码分析
作用：根据指定的第一个参数 创建一个react元素
源码解析：//type：节点名称(函数/字符串) config：节点名称属性（对象） children：节点名称的子节点（字符串/新的React.createElement
function createElement(type, config, children) {
var propName; //提取保留名称 var props = {}; var key = null; var ref = null; var self = null; var source = null; //标签的属性不为空时 说明标签有属性值 特殊处理：把key和ref赋值给单独的变量 if (config != null) { //有合理的ref if (hasValidRef(config)) { ref = config.ref; } //有合理的key if (hasValidKey(config)) { key = '' + config.key; } self = config.__self === undefined ? null : config.__self; source = config.__source === undefined ? null : config.__source; //config中剩余属性,且不是原生属性(RESERVED_PROPS对象的属性)，则添加到新props对象中 for (propName in config) { if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) { props[propName] = config[propName]; //config去除key/ref 其他属性的放到props对象中 } } } // Children can be more than one argument, and those are transferred onto // the newly allocated props object. //子元素数量（第三个参数以及之后参数都是子元素 兄弟节点） var childrenLength = arguments.length - 2; if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); //声明一个数组 //依次将children push到数组中 for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 2]; } { //冻结array 返回原来的childArray且不能被修改 防止有人修改库的核心对象 冻结对象大大提高性能 if (Object.freeze) { Object.freeze(childArray); } } props.children = childArray; //父组件内部通过this.props.children获取子组件的值 } //为子组件设置默认值 一般针对的是组件
//class com extends React.component 则com.defaultProps获取当前组件自己的静态方法
if (type && type.defaultProps) { //如果当前组件中有默认的defaultProps则把当前组件的默认内容 定义到defaultProps中 var defaultProps = type.defaultProps; for (propName in defaultProps) { if (props[propName] === undefined) { //如果父组件中对应的值为undefinde 则把默认值赋值赋值给props当作props的属性 props[propName] = defaultProps[propName]; } } } { //一旦ref或者key存在 if (key || ref) { //如果type是组件的话 var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type; if (key) { defineKeyPropWarningGetter(props, displayName); } if (ref) { defineRefPropWarningGetter(props, displayName); } } } //props：1.config的属性值 2.children的属性（字符串/数组）3.default的属性值 return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props); }
部分代码解析：
(1) Object.prototype.hasOwnProperty()
//判断某一个属性是否在实例对象本身上,而不是在原型上 返回值：布尔值
let obj = { a: 1 };
obj.hasOwnProperty("a") //true
obj.hasOwnProperty("toString")//false
(2) Object.getOwnPropertyDescriptor(obj, props)
Object.getOwnPropertyDescriptors(obj)
let obj = {
foo: 123,
get bar() { return '123' }
};
//返回对象指定某一个属性的描述对象
Object.getOwnPropertyDescriptor(obj, 'bar')
//返回对象所有属性的描述对象
Object.getOwnPropertyDescriptors(obj)
返回值
2.hasValidKey
作用：是否设置了key属性
function hasValidKey(config) {
{
if (hasOwnProperty.call(config, 'key')) {
var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
if (getter && getter.isReactWarning) {
return false;
}
}
}
return config.key !== undefined;
}
四，ReactElement源码分析
作用：返回一个虚拟dom对象
源码：
var ReactElement = function (type, key, ref, self, source, owner, props) {
var element = {
//因为react最终渲染dom时候，确保是react.createElement类型 需要判断$$typeof===REACT_ELEMENT_TYPE
$$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
};
{
// The validation flag is currently mutative. We put it on
// an external backing store so that we can freeze the whole object.
// This can be replaced with a WeakMap once they are implemented in
// commonly used development environments.
//WeakMap
element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
// the validation flag non-enumerable (where possible, which should
// include every environment we run tests in), so the test framework
// ignores it.
Object.defineProperty(element._store, 'validated', {
configurable: false,
enumerable: false,
writable: true,
value: false
}); // self and source are DEV only properties.
Object.defineProperty(element, '_self', {
configurable: false,
enumerable: false,
writable: false,
value: self
}); // Two elements created in two different places should be considered
// equal for testing purposes and therefore we hide it from enumeration.
Object.defineProperty(element, '_source', {
configurable: false,
enumerable: false,
writable: false,
value: source
});
if (Object.freeze) {
//代码性能优化：将element的一些属性配置为不可配置 提高性能
Object.freeze(element.props);
Object.freeze(element);
}
}
return element;//返回虚拟dom对象
};
节点名称