Question

这是一个简单的演示。

//data demo 
{
   filterOption:{id:'xxx',name:'yyy'},
   list:[{id:'xxx',name:'yyy',msg:'zzz'},...]
}

// Component demo
class Root extends React.Component {
    shouldComponentUpdate(newProps){
       console.log(newProps) // work
    }
    render(){
      let { filterOption, list } = this.props;
      return <View>
               <Filter filterOption={filterOption} />
               <List list={list} />
            <View>
   }
}
class Filter extends React.Component{
   shouldComponentUpdate(newProps){
       console.log(newProps) // not work
    }
   render(){ // <NativeFilter> is a native Component. 
      return <NativeFilter />
   }
}

问题：

过滤器中的shouldComponentUpdate方法不起作用。有人可以帮帮我吗？当props.list发生变化时，我想阻止过滤器重新渲染

Answer 1

你必须根据condtion返回一个布尔值是否需要刷新

shouldComponentUpdate(nextProps, nextState){
   return nextState.count != this.state.count;
}

Answer 2

shouldComponentUpdate仅在道具/州变更时调用。由于您的代码不会更改Filter组件中或上方的状态/道具，因此无需调用shouldComponentUpdate（不会调用初始安装渲染）。

Answer 3

shouldComponentUpdate触发道具/状态变化。

参考DOC： shouldComponentUpdate

实施示例：

 shouldComponentUpdate(nextProps: Object, nextState: Object) {
    return (
      !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state)
    );
  }

shouldComponentUpdate在react-native中不起作用

3 个答案: