1. React的渲染流程
- 如果是HTML标签则直接渲染真实DOM
- 如果是JSX，则按以下流程进行
1.将JSX转换成createElement
2.执行createElement创建虚拟DOM, 得到虚拟DOM树
3.根据虚拟DOM树在界面上生成真实DOM
React渲染流程 - 执行render方法
<div> <div><p>我是段落</p></div> <div><span>我是span</span></div> </div>
- 将JSX转换成createElement
React.createElement("div", null, React.createElement("div", null, React.createElement("p", null, "我是段落")), React.createElement("div", null, React.createElement("span", null, "我是span")) );
- 执行createElement创建虚拟DOM, 得到虚拟DOM树
{ targetName: 'div', children:[ { targetName: 'div', children:[ { targetName: 'p' } ] }, { targetName: 'div', children:[ { targetName: 'span' } ] } ] } - 根据虚拟DOM树在界面上生成真实DOM
2.React更新流程
使用diff算法
diff算法比较原则.png
实例.png
1.列表渲染优化
由于diff算法在比较的时候默认情况下只会进行同层同位置的比较
所以在渲染列表时可能会存在性能问题
性能提升问题.png
2.如何让diff算法递归比较同层所有元素?
给列表元素添加独一无二的key,告诉React除了和同层同位置比, 还需要和同层其它位置比
https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm
class Home extends React.Component{ constructor(props){ super(props); this.state = { heroList : ['鲁班', '虞姬', '黄忠'] } } render(){ return ( <div> <ul>{ this.state.heroList.map(name=>{ return <li key={name}>{name}</li> }) }</ul> <button onClick={()=>{this.btnClick()}}>按钮</button> </div> ) } btnClick(){ this.setState({ // heroList: [...this.state.heroList, '阿珂'] heroList: ['阿珂', ...this.state.heroList] }) } }
