Question

我有正在处理的组件，但尽量不使用它来举例说明我的问题：

应用程序：

class App extends React.Component{
  render(){
    return(      
      <div className="App"><div style={{width:"500px", height:"300px",margin:"0 auto",marginTop:"100px"}}><PhnGrid/></div></div>
    )
  }
}
export default App;

PhnGrid：

class PhnGrid extends React.Component{
    dataset=[{phonetype:"",phonenumber:""}]
    state = {rowcount:1}
    render(){      
        console.log(this.state)
        return(<h1>HELLO</h1>);
    }
}
export default PhnGrid;

安装PhnGrid组件时（或状态改变时），每次render被调用两次。谁能告诉我发生了什么事？

Answer 1

使用 PureComponent 代替 Component ！ PureComponent与Component完全相同，除了它为您处理shouldComponentUpdate方法。当道具或状态发生变化时，PureComponent将对道具和状态进行浅表比较。另一方面，组件不会立即比较当前的道具和状态。因此，每当应调用componentUpdate时，组件将默认重新渲染。

class PhnGrid extends React.PureComponent {
    dataset=[{phonetype:"",phonenumber:""}]
    state = {rowcount:1}
    render(){      
        console.log(this.state)
        return(<h1>HELLO</h1>);
    }
}
export default PhnGrid;

ReactJS组件在状态更改时呈现两次

1 个答案: