状态 ReactJS 和渲染方法答案

【问题标题】：State ReactJS and render method状态 ReactJS 和渲染方法
【发布时间】：2020-06-04 00:16:01
【问题描述】：

我正在学习带有 Clock 类的章节 State and lifecycle in reactJS，但我不明白为什么我可以在 CodePen 中使用此代码时重新呈现不是状态的变量“myFirstNumber, mySecondNumber, myWord”：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
    };
    this.mySecondNumber = 0;
  }

  componentDidMount() {
    this.myFirstNumber = 0;
    this.myWord = "Start";
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );

  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date(),

    });
        this.myFirstNumber += 1;
       this.mySecondNumber += 1;
    if (this.myFirstNumber ===5) {
      this.myWord = "Finish";
    }
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        <h2>myFirstNumber from ComponentDidMount: {this.myFirstNumber}</h2>
        <h2>mySecondNumber from constructor: {this.mySecondNumber}</h2>
        <h2>myWord: {this.myWord}</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

render 方法每秒钟为我的非状态变量渲染所有 DOM？

【问题讨论】：

状态变量与否，它们仍然是变量。

标签： javascript reactjs class state setstate

【解决方案1】：

当你调用 this.setState 函数时，DOM 会被重新渲染。在这里，当 this.state.date 通过 this.setState 更改时，DOM 每秒都会更新一次，显示新值。但是，如果您将日期保留在状态之外，您会看到 DOM 不再重新呈现，如果您想更改“myWord”或“firstNumber”而不更改状态中的任何内容，则结果相同。

【讨论】：

【解决方案2】：

当您运行 tick() 时，setState 部分会触发重新渲染，它将处理所有内容，无论状态与否。

【讨论】：

【解决方案3】：

在componentDidMount() 中，您安排了每秒触发tick() 函数的间隔。在此函数中，您可以通过调用 setState() 并将当前时间作为新的状态值传递来更新组件的状态。此外，您修改了类的一些局部变量。当传递给 setState() 的参数被 JS 引擎处理时，组件会更新其状态，而不是在调用 setState() 之后立即异步发生。

然后render()函数被框架调用。 render() 函数返回的输出反映了 render() 函数内请求的所有变量的当前值。如果您没有在tick() 方法中调用setState()，那么即使您每秒修改myFirstNumber 和其他变量，您也不会看到任何变化。

【讨论】：