React在前端界一直很流行，而且学起来也不是很难，只需要学会JSX、理解
State
和
Props
，然后就可以愉快的玩耍了，但想要成为React的专家你还需要对React有一些更深入的理解，希望本文对你有用。
这是Choerodon的一个前端页面
在复杂的前端项目中一个页面可能包含上百个状态，对React框架理解得更精细一些对前端优化很重要。曾经这个页面点击一条记录展示详情会卡顿数秒，而这仅仅是前端渲染造成的。
为了能够解决这些问题，开发者需要了解React组件从定义到在页面上呈现（然后更新）的整个过程。
React在编写组件时使用混合
HTML
和
JavaScript
的一种语法（称为JSX）。但是，浏览器对JSX及其语法一无所知，浏览器只能理解纯
JavaScript
，因此必须将JSX转换为
HTML
。这是一个div的JSX代码，它有一个类和一些内容：
divclassName=cn文本/div
在React中将这段jsx变成普通的js之后它就是一个带有许多参数的函数调用：
React.createElement(div,{className:cn},文本);
它的第一个参数是一个字符串，对应html中的标签名，第二个参数是它的所有属性所构成的对象，当然，它也有可能是个空对象，剩下的参数都是这个元素下的子元素，这里的文本也会被当作一个子元素，所以第三个参数是
“文本”
。
到这里你应该就能想象这个元素下有更多
children
的时候会发生什么。
divclassName=cn文本1br/文本2/div
React.createElement(div,{className:cn},文本1,//1stchildReact.createElement(br),//2ndchild文本1//3rdchild)
目前的函数有五个参数：元素的类型，全部属性的对象和三个子元素。由于一个
child
也是React已知的
HTML
标签，因此它也将被解释成函数调用。
到目前为止，本文已经介绍了两种类型的
child
参数，一种是
string
纯文本，一种是调用其他的
React.createElement
函数。其实，其他值也可以作为参数，比如：
基本类型false，null，undefined和true数组React组件使用数组是因为可以将子组件分组并作为一个参数传递：
React.createElement(div,{className:cn},[Content1!,React.createElement(br),Content2!])
当然，React的强大功能不是来自
HTML
规范中描述的标签，而是来自用户创建的组件，例如：
functionTable({rows}){return(table{rows.map(row=(trkey={row.id}td{row.title}/td/tr))}/table);}
组件允许开发者将模板分解为可重用的块。在上面的“纯函数”组件的示例中，组件接受一个包含表行数据的对象数组，并返回
React.createElement
对table元素及其行作为子元素的单个调用。
每当开发者将组件放入JSX布局中时它看上去是这样的：
Tablerows={rows}/
但从浏览器角度，它看到的是这样的：
React.createElement(Table,{rows:rows});
请注意，这次的第一个参数不是以
string
描述的HTML元素，而是组件的引用（即函数名）。第二个参数是传入该组件的
props
对象。
将组件放在页面上
现在，浏览器已经将所有JSX组件转换为纯
JavaScript
，现在浏览器获得了一堆函数调用，其参数是其他函数调用，还有其他函数调用......如何将它们转换为构成网页的DOM元素？
为此，开发者需要使用
ReactDOM
库及其
render
方法：
functionTable({rows}){/*...*/}//组件定义//渲染一个组件ReactDOM.render(React.createElement(Table,{rows:rows}),//创建一个