pureComponent

最新推荐文章于 2025-02-12 15:50:49 发布

养基赚钱

最新推荐文章于 2025-02-12 15:50:49 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq1498982270/article/details/98969133

react 专栏收录该内容

19 篇文章

订阅专栏

本文探讨React中PureComponent的使用，如何通过浅比较优化性能，同时揭示其可能导致的子组件更新问题。通过实例讲解正确的state更新方法，确保子组件正确响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pureComponent

通过对比props的改变，自动调用shouldComponent

优点： 减少render优化性能

缺点： props对比是浅比较，可能导致子组件该渲染的时候没有渲染

shouldComponent的bug

class Father extends React.PureComponent{
    handleClick = (list) => {
        const  { data } = this.state;
        data.push(list)
        this.setState({
            data
        })
  }

    render(){
        return(
            <ChildComponent data={data}>
        )
    }
}

按道理，handleClick更新了data，子组件应该更新
但是由于pureComponet原因，data并没有改变指向，所以子组件不会更新
子组件执行：
static getDerivedStateFromProps(nexrprops){}
shouldComponent(){return false}


改写
class Father extendsReact.PureComponent{
    handleClick = (list) => {
        const  { data } = this.state;
        this.setState({
            data：[...data,1] // 这样会触发ChildComponent的render
        })
  }
    render(){
        return(
            <ChildComponent data={data}>
        )
    }
}