React 性能优化

一：父组件刷新，而不波及子组件。 我们知道 React 在组件刷新判定的时候，如果触发刷新，那么它会深度遍历所有子组件，查找所有更新的节点，依据新的jsx数据和旧的 fiber ，生成新的workInProgress，进而进行页面渲染。 所以父组件刷新的话，子组件必然会跟着刷新，但是假如这次的刷新，和我们子组件没有关系呢？怎么减少这种波及呢？ 如下面这样：

export default function Father1 (){
    let [name,setName] = React.useState('');

    return (
        <div>
            <button onClick={()=>setName("获取到的数据")}>点击获取数据</button>
            {name}
            <Children/>
        </div>
    )
}

function Children(){
    return (
        <div>
            这里是子组件
        </div>
    )
}

可以看到我们的子组件被波及了，解决办法有很多，总体来说分为两种。

子组件自己判断是否需要更新 ,典型的就是 PureComponent，shouldComponentUpdate，memo 父组件对子组件做个缓冲判断

第一种：使用 PureComponent 使用 PureComponent 的原理就是它会对state 和props进行浅比较，如果发现并不相同就会更新。

export default function Father1 (){
    let [name,setName] = React.useState('');
    return (
        <div>
            <button onClick={()=>setName("父组件的数据")}>点击刷新父组件</button>
            {name}
          
            <Children1/>
        </div>
    )
}

class Children extends React.PureComponent{
    render() {
        return (
            <div>这里是子组件</div>
        )
    }
}

第二种：shouldComponentUpdate class 组件中 使用 shouldComponentUpdate 是主要的优化方式，它不仅仅可以判断来自父组件的nextprops，还可以根据nextState和最新的nextContext来决定是否更新。

class Children2 extends React. PureComponent{
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        //判断只有偶数的时候，子组件才会更新
        if(nextProps !== this.props && nextProps.count  % 2 === 0){
            return true;
        }else{
            return false;
        }
    }
    render() {
        return (
            <div>
                只有父组件传入的值等于 2的时候才会更新
                {this.props.count}
            </div>
        )
    }
}

它的用法也是非常简单，就是如果需要更新就返回true，不需要更新就返回false.