携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
setState()的说明
更新数据
- setState更新数据是异步的
- 因此后面的setState（）不要依赖于前面的setState()结果
- 可以调用多次setState()但是只会渲染一次
setState()的说明
推荐语法
this.setState((state,props)=>{
return(
count:state.count+1
)
})
console.log('count',this.state.count)
上面使用的是回调函数形式的setState语法 ，建议以后使用该语法，它同样是异步更新数据， 但若是多次调用，则可以叠加数据。
- 参数state表示最新的state
- 参数props表示最新的props
- 异步
第二个参数
- 第二个参数会在状态更新且渲染完成后立即执行
this.setState((state,props)=>{
},()=>{})
JSX语法的转化过程
- JSX语法是createElement()的语法糖（简化方法）
- JSX语法被@bable/preset-react插件编译为了createElement()方法
- react元素是一个对象，用来描述屏幕上希望看到的内容
组件更新机制·
通过setState（）修改state，更新组件时，若是父组件重新渲染，则子组件也会重新渲染（当前组件及其子组件）
也就是说当根组件状态更新，则整个组件树状态都会更新
组件性能优化
减轻state
只存储和组件渲染有关的数据
-
不用做渲染的数据不需要放在state中
-
对于需要在多个组件中使用但与渲染无关的数据，可以放在this中
避免不必要的重新渲染
在组件更新机制中，父组件的更新会引起子组件的更新,但若是子组件不会产生变化也依旧发生变化就会在性能上有不好的影响
那如何才能避免不必要的重新渲染呢？
答：使用钩子函数shouldComponentUpdate(nextProps,nextState)
通过该函数的返回值决定组件是否要重新渲染，返回true则代表需要重新渲染，false则意味着不需要重新渲染
注：该钩子函数在组件渲染前执行
纯组件
方法：将类组件做修改，React.Component与React.PureComponent功能相似
PureComponent内部刻意自动实现钩子函数shouldComponent的功能，不需要再进行手动比较
原理：纯组件通过分别对比前后两次的props与state的值
比较方式 shallow compare浅层对比
注：当state或props中为引用类型时，应该创建新数据，不能直接修改原数据
