React部分原理浅析
写在前面：这是我学习B站黑马React视频 75p~90p 所做的记录。
供自己之后翻阅，因为这部分内容不多，所以就没有记录代码，希望能给你带来一些帮助。后面计划学习并整理Router、Redux和Dva（flag先立起来嘻嘻）
一、setState()的说明
（setState()其实要注意的地方蛮多，之后再详细整理一篇单独的）
1.1 更新数据
- setState()是异步更新数据的
- 注意：使用该语法，后面的setState()不要依赖之前的setState()
- 可以多次调用setState()，但只会触发一次重新渲染
1.2 推荐语法
- 推荐： 使用 setState( (state， props) => {} )
- 参数state，props表示最新的state和props
- 原因：传回调函数会返回此次setState()后的结果，类似数组的reduce()方法（不过此时的实际state还没有更新），相比于传对象的方式，可以拿到最新的状态和props，解决了不能依赖对象获取最新状态和props的问题。
1.3 第二个参数
- 场景：在状态更新（页面完成重新渲染）后立即执行某个操作
- 语法：setState(updater, [ callback ])
- 执行时机：状态更新并且重新渲染后，立即执行
二、JSX语法的转化过程
- JSX只是 createElement() 方法的语法糖
- JSX语法被 @babel/preset-react 插件编译为 createElement() 方法
- React元素：是一个对象，用来描述你希望在屏幕上看到的内容
三、组件更新机制
- setState() 的两个作用：1.修改state。2.更新组件（UI)
- 过程：父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其所有子组件）
四、组件性能优化
4.1 减轻 state
- 减轻state：只存储跟组件渲染相关的数据（比如：count/列表数据/loading 等）
- 注意：不用做渲染的数据不要放在state中，比如定时器id 等
- 对于需要在多个方法中用到的数据，应该放在this中
4.2 避免不必要的重新渲染
- 组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
- 问题：子组件没有任何变化时也会重新渲染
- 如何避免不必要的重新渲染呢？
- 解决方法：使用钩子函数 shouldComponentUpdate( nextProps, nextState )
- 作用：通过返回值决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染
- 触发时机：更新阶段的钩子函数，组件重新渲染前执行（shouldComponentUpdate -> render）
4.3 纯组件
- 说明：纯组件内部的对比是 shallow compare（浅层对比）
- 对于值类型来说：比较两个值是否相同（直接赋值即可，没有坑）
- 对于引用类型来说：只比较对象的引用（地址）是否相同
- 注意：state或props中属性值为引用类型时，应该创建新数据（建议深拷贝），不要直接修改原数据
五、虚拟DOM和Diff算法
（虚拟DOM和Diff算法和Vue是一样的）
- React更新视图的思想：只要state变化就更新渲染视图
- 特点：思路非常清晰
- 问题：组件中只有一个DOM元素需要更新时，也得把整个组件的内容重新渲染到页面中？（不是）
- 理想状态：部分更新，只更新变化的地方
- 问题：React是如何做到部分更新的？（虚拟DOM配合Diff算法）
5.1 虚拟DOM
本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容（UI），这里和React元素的定义是一样的。
5.2 执行过程
- 初次渲染时。React会根据初始state（Model），创建一个虚拟DOM对象（树）
- 根据虚拟DOM生成真正的DOM，渲染到页面
- 当数据变化（setState()），重新根据新的数据，创建新的虚拟DOM对象（树）
- 与上一次得到的虚拟DOM对象，使用Diff算法对比（找不同），得到需要更新的内容
- 最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面。
六、总结
- 工作角度：应用第一，原理第二
- 原理有助于更好地理解React的自身运行机制
- setState()异步更新数据
- 父组件更新导致子组件更新，纯组件提升性能。
- 思路清晰简单为前提，虚拟DOM和Diff保效率
- 虚拟DOM =》 state + JSX
- 虚拟DOM的真正价值从来都不是性能，虚拟DOM让React脱离了浏览器环境的束缚
|