react 初探：类组件、状态和生命周期

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27603235/article/details/79321375

react 除了提供函数式组件外，还提供了类组件，类组件提供了状态属性，下面一起吧之前的函数组件转换成类组件。

/*
  类组件定义
*/
class Clock extends React.Component{
    render(){
      return (
        <div>
            <h1>Hello,World</h1>
            <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }
}

替换 render() 方法中的 this.props.date 为 this.state.date

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

添加类构造函数

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

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

经过修改之后的最终代码如下：

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

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

这样，当调用Clock组件时，能够实现页面上的具体时刻。但是这样做还是有些问题，无法做到每秒钟都更新组件，这里不能像上一章节，直接采用setInterval(tick, 1000);的方式来进行每秒钟更新，需要使用类组件提供的生命周期函数才可以。

类的生命周期

componentDidMount() 钩子在组件输出被渲染到 DOM 之后运行。我们将计时器的设置放在生命周期函数内。

 componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

当Clock组件DOM被清除时需要将计时器也销毁，需要在结束生命周期函数中将该计时器销毁。

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

最后，贴出整个流程的完整代码：

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

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

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

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

可以做到美妙都刷新DOM。