声明 ReactJS 和渲染方法

Question

我正在使用时钟 class 学习第 State and lifecycle in reactJS 章，但我不明白为什么我可以重新渲染我的变量 "myFirstNumber, mySecondNumber, myWord"，当我使用此代码时，这些变量不是状态在 CodePen 中：

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？

Answer 1

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

Answer 2

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

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

Answer 3

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

声明 ReactJS 和渲染方法

State ReactJS and render method

javascript

state

class

setstate

reactjs