Javascript 当父组件重新加载时，如何阻止子组件重新渲染

我有以下关于倒计时npm库的代码

import React, { Component } from 'react'
import { Panel, Button } from 'rsuite';
import Countdown from 'react-countdown-now';
export default class GamePlay extends Component {
    constructor(){
        super();
        this.state={
            select: false
        }
        this.onSelect = this.onSelect.bind(this);
    }
    onSelect(e){
        this.setState({ select: e.target.name });
    }
    render() {
        return (
            <div>
                <div className="col-6 offset-3">
                    <Panel className="text-center bg-white" header={<h3>Question</h3>} bordered>
                        <div className="d-flex align-items-center">
                            Time left: 
                            <Countdown date={Date.now() + 30000} />
                        </div>
                    </Panel>
                </div>
                <div className="mt-5">
                    <div className="d-flex align-items-center">
                        <div className="col-6">
                            <Button name="A" appearance={`${this.state.select === 'A' ? 'primary': 'default'}`} block onClick={this.onSelect} bordered>A</Button>
                            <Button name="C" appearance={`${this.state.select === 'C' ? 'primary' : 'default'}`} block onClick={this.onSelect} bordered>C</Button>
                        </div>
                        <div className="col-6">
                            <Button name="B" appearance={`${this.state.select === 'B' ? 'primary' : 'default'}`} block onClick={this.onSelect} bordered>B</Button>
                            <Button name="D" appearance={`${this.state.select === 'D' ? 'primary' : 'default'}`} block onClick={this.onSelect} bordered>D</Button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

当我点击一个按钮选择一个答案时，它会导致游戏性组件重新渲染，因此倒计时会重新开始

当我点击答案时，如何阻止它重新启动？非常感谢您的帮助。

您可以在render函数之外定义date属性值，以便在重新渲染父对象时不会更改

以下是一个例子：

constructor(){
  ....
  this.date = Date.now() + 30000;
}

render(){
  ....
  <Countdown date={this.date} />
  ....
}

可以在渲染函数外部定义日期属性值，以便在重新渲染父对象时不会更改该值

以下是一个例子：

constructor(){
  ....
  this.date = Date.now() + 30000;
}

render(){
  ....
  <Countdown date={this.date} />
  ....
}

---

应该从渲染函数中删除所有状态逻辑。渲染的唯一目的是将组件状态转换为HTML，它不应该做任何超出此范围的事情。将初始化值之类的东西放入componentDidMount。您应该从呈现函数中删除所有状态逻辑。渲染的唯一目的是将组件状态转换为HTML，它不应该做任何超出此范围的事情。将初始化值之类的东西放入componentDidMount。