状态 ReactJS 和渲染方法

Question

I'm studying chapter State and lifecycle in reactJS with Clock class and I don't understand why I can re-render my variables "myFirstNumber, mySecondNumber, myWord" which are not states when I use this code in 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')
);

The render method render all DOM each seconde for my variables which are not states ?

Answer 1

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

Answer 2

In componentDidMount() you schedule interval which triggers tick() function every second. Inside this function you update component's state by invoking setState() and passing current time as a new state value. Moreover, you modify some local variables of the class. When arguments passed to setState() are processed by JS engine, what happens asynchronously, not immediately after setState() is called, the component updates its state.

Then the render() function is called by the framework. The render() function returns output which reflects the current values of all variables requested inside render() function. If you didn't call setState() inside tick() method then you wouldn't see any changes even though you modify myFirstNumber and other variables after each second.

Answer 3

When you call this.setState function, the DOM gets rerendered. Here the DOM is getting updated every second when this.state.date gets changed through this.setState, showing new values. However, if you keep date outside of state, you can see that the DOM no longer rerenders, same result if you want to change "myWord" or "firstNumber" without changing anything in state.