React State 和 生命周期

将函数转换为类

通过5个步骤将函数组件Clock转换为类：

（1）创建一个名称扩展为React.Component的ES6类。

（2）创建一个叫做render()的空方法。

（3）将函数体移动到render()方法中。

（4）在render()方法中，使用this.props替换props。

（5）删除剩余的空函数声明。

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

为一个类添加局部状态

state与props类似, 但是state是私有的, 并且完全受控于当前组件.

我们会通过3个步骤将date从属性移动到状态中：

（1）在render()方法中使用this.state.date代替换this.props.date

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

（2）添加一个类构造函数来初始化状态this.state

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>
    );
  }
}

（3）从<Clock />元素移除date属性：

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

将生命周期方法添加到类中

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。

尽管this.props和this.state是React本身设置的, 且都拥有特殊的含义, 但是其实你可以向class中随意添加不参与数据流的额外字段.

我样可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码：

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')
);

不要直接修改state, 而是应该使用setState(), 构造函数是唯一可以给this.state赋值的地方.

数据自项向下流动

父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。

这就是为什么状态通常被称为局部或封装。除了拥有并设置它的组件外，其它组件不可访问。

 

最后欢迎大家访问我的个人网站：1024s​​​​​​​