react类组件性能优化-避免不必要的重新渲染
setState() 的两个作用： 1. 修改 state 2. 更新组件（UI）
过程：父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其所有子组件）
组件性能优化
减少不必要的更新(执行render函数)
减轻state
-
只存储跟组件渲染相关的数据
-
不用做渲染的数据不要放在 state 中，比如定时器 id等
-
对于这种需要在多个方法中用到的数据，应该直接放在 this 中
-
this.xxx = 'bbb'
-
this.xxx
-
class Hello extends Component {state = {timerId: null}componentDidMount() {// timerId存储到this中，而不是state中this.timerId = setInterval(() => {}, 2000)}componentWillUnmount() {clearInterval(this.timerId)}render() { … }
}
同理：vue中不要把和渲染无关的数据放到data中
shouldComponentUpdate
父组件的数据变化了，setState()会引起所有后代子组件也被更新，这种思路很清晰，但有缺点：
子组件没有任何变化时也会重新渲染 （接收到的props没有发生任何的改变）。如何避免不必要的重新渲染呢？
此时就需要使用shouldComponentUpdate来进行优化
作用：
通过返回值决定该组件是否重新渲染，返回 true 表示重新渲染，false 表示不重新渲染
触发时机：
render之前
参数：它有两个形参
-
第一个参数：当前即将要使用的props
-
第二个参数：当前即将要使用的state
class Hello extends Component {shouldComponentUpdate() {// 根据条件，决定是否重新渲染组件return false}render() {…}
}PureComponent
纯组件-浅层对比：
React .PureComponent 与 React .Component 功能相似， 对于引用类型来说：只比较对象的引用（地址）是否相同
例如：
const obj = { number: 0 }
const newObj = obj
newObj.number = 2
console.log(newObj === obj) // tru所以PureComponent内部比较：
最新的state.obj === 上一次的state.obj ，如果为true，就不重新渲染组件
注意：
不要直接修改源数据，错误做法：
state = { obj: { number: 0 } }
// 错误做法
state.obj.number = 2
setState({ obj: state.obj })区别：
PureComponent 内部自动实现了 shouldComponentUpdate 钩子，不需要手动比较
原理：
纯组件内部自动通过对比前后两次 props 和 state 的值，来决定是否重新渲染组件
// class Hello extends React.Component { // 普通组件
class Hello extends React.PureComponent { // 纯组件render() {return (纯组件)}
}注意：
只有在性能优化的时候可能会用到纯组件，不要所有的组件都使用纯组件，因为纯组件需要消耗性能进行对比
结论
并不是所有的子组件都一定要随着祖先组件的更新而更新
shouldComponentUpdate用来自定义更新逻辑
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！