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

【问题标题】：ReactJS Component renders twice on state changeReactJS 组件在状态更改时呈现两次
【发布时间】：2020-07-03 14:18:09
【问题描述】：

我有一个正在开发的组件，但为了说明我的问题，我把它做到了最低限度：

应用：

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 每次都会被调用两次。谁能告诉我这是怎么回事？

【问题讨论】：

也许这会有所帮助：stackoverflow.com/questions/60934080/…
耶！是的，谢谢！

标签： reactjs

【解决方案1】：

使用 PureComponent 而不是 Component！ PureComponent 与 Component 完全相同，只是它为您处理 shouldComponentUpdate 方法。当 props 或 state 发生变化时，PureComponent 将对 props 和 state 进行浅比较。另一方面，组件不会将当前的道具和状态与开箱即用的下一个进行比较。因此，当调用 shouldComponentUpdate 时，默认情况下组件会重新渲染。

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

【讨论】：