关于react -shouldComponentUpdate钩子函数，避免不必要的渲染引起的页面报错

最新推荐文章于 2024-08-07 09:56:34 发布

暖暖小时光

最新推荐文章于 2024-08-07 09:56:34 发布

阅读量1.9k

点赞数

分类专栏： react 文章标签： react shouldComponentUpdate

本文链接：https://blog.csdn.net/sinat_39648402/article/details/90511394

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

父组件中的写法为


    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.document !== this.state.document) {
            return true
        }
        return false
    }

参数nextSatate 指的是父组件中所定义的所有state的值，因为我这里传给子组件的值是state中的document，所以这里就用来判断document的值有没有变化。如果两个值不同，就继续渲染，相同则停止渲染。

子组件中写法为

shouldComponentUpdate(nextProps, nextState) {
        console.log(nextState);
        if (nextProps.fileList !== this.props.document) {
            return true
        }
        return false
    }

同样的，nextState指的是子组件中定义的所有state，这里我用fileList来接收父组件传过来的document的值，然后进行值的比较，如果值不相同，就继续渲染，相同则不渲染。