React原理(react原理及应用场景)
setState()的说明
1、更新数据
setState()是异步更新数据的
注意：使用该语法时，后面的setState()不会依赖于前面的setState()
可以多次调用setState()，只会触发一次重新渲染
this.state = { count:1 } this.setState({ count:this.state.count + 1 }) console.log(this.state.conut) // 1 复制代码2、推荐语法
推荐：使用
setState((staet,props) => {})语法参数
sate：表示最新的state参数
props：表示最新的props
this.setState((state,props) => { return { count:state.count + 1 } }) console.log(this.state.count); // 1 复制代码3、第二个参数
场景：在状态更新（页面完成重新渲染）后立即执行某个操作
语法：
setState(updater[,callback])
this.setState( (state,props) => {}, () => { console.log('这个回调函数会在状态更新后立即执行') } ) 复制代码JSX语法转化过程
JSX仅仅是createElement()方法的语法糖（简化语法）
JSX语法被@babel/preset-react插件白你以为createElement()方法
React元素：是一个对象，用来描述你希望在屏幕上看到的内容
转化过程：JSX语法 -> createElement() -> React元素
组将更新机制
setState()的两个作用：1、修改state 2、更新组件(UI)过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染
当前组件子树(当前组件及其所有子组件)
组件性能优化
1、减轻state
减轻state：只存储跟组件渲染相关的数据（比如：count/列表数据/loading等）注意：不用做渲染的数据不要放在state中，比如定时器id等
对于这种需要在多个方法中用到的数据，应该放在this中
2、避免不必要的重新渲染
组件更新机制：父组件更新会引起子组件也被更新
问题：子组件没有任何变化时也会被重新渲染
解决方式：使用钩子函数
shouldComponentUpdate(nextProps,nextState)作用：通过返回值决定组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染
触发时机：更新阶段的钩子函数，组件重新渲染前执行（
shouldComponentUpdate -> render）
class Hello extends Component { shouldComponentUpdate() { // 更具条件，决定是否重新渲染组件 return 判断条件 } render() { ... } } 复制代码虚拟DOM和Diff算法
React更新视图的思想是：只要state变化就重新渲染视图
虚拟DOM：本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容（UI）
执行过程：
初次渲染时，React会根据初始state（Model），创建一个虚拟DOM对象（树）
根据虚拟DOM生成真正DOM，渲染到页面中
当数据变化后（setState()），重新根据新的数据，创建新的虚拟DOM对象（树）
与上一次得到的虚拟DOM对象，使用Diff算法对比，得到需要更新的内容
最终，React只将变化的内容更新（patch）到DOM中，重新渲染页面
作者：南风i
链接：https://juejin.cn/post/7034492569232867336