时间戳

首页 > 解决方案 > ReactJS 组件在状态更改时呈现两次

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

问题描述

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

应用程序：

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;

网格：

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每次调用两次。谁能告诉我发生了什么？

标签： reactjs

解决方案

使用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;

推荐阅读