这是使用shouldComponentUpdate生命周期方法的好地方吗？ （ReactJS）

Question

我正在通过尝试制作一个简单的游戏来学习React。在这个游戏中，我有一个容器组件来管理倒数计时器。当玩家开始游戏时，我运行以下功能：

startTimer = () => {
    setInterval(() => {
        this.setState((prevState) => ({
            timeLeft:prevState.timeLeft-1
        }))
    },1000)
};

我的容器组件具有以下渲染方法：

render() {


    return (
        <div className="container">
            <GameStats
                gameStarted={this.state.gameStarted}
                question={this.state.question}
                numOfQuestions={this.state.numOfQuestions}
                correctAnswers={this.state.correctAnswers}
                timeLeft={this.state.timeLeft}
            />
            <Board
                gameStarted={this.state.gameStarted}
                startGame={this.startGame}
                squareClicked={this.squareClickedHandler}
                sqOne={this.state.squareOne}
                sqTwo={this.state.squareTwo}
                sqThree={this.state.squareThree}
                sqFour={this.state.squareFour}
            />
        </div>
    )
}

GameStats组件负责呈现剩余时间，而Board组件不使用它。因此，将Board组件转换为基于类的组件并实现shouldComponentUpdate钩子，使其不会每秒重新渲染是否有意义？

Answer 1

是的，通常应该避免在每次时钟滴答时更新Board组件。最好将Board组件变成PureComponent。

如docs PureComponent中所述，已经实现了shouldComponentUpdate：

  

React.PureComponent与React.Component类似。它们之间的区别在于React.Component并未实现shouldComponentUpdate（），但是React.PureComponent却通过浅层的prop和状态比较来实现它。

确保您已在文档的更下方阅读了浅层比较的警告。