React 状态和生命周期

以下内容原文来自：https://facebook.github.io/react/docs/state-and-lifecycle.html

 

Start:

State and Lifecycle

01，想一下之前的 ticking clock 例子；到目前为止，我们只学习了跟新UI界面的一种方法-->

-----> 我们调用React.render() 方法去改变渲染出来的界面；

------>

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(//渲染
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

在这节文章，我们将会学习如何创建/封装一个可复用的Clock组件，它可以设定自己的时间，而且可以每秒钟自己更新时间

我们暂时将clock封装成这个样子：

--->

function Clock(props) {//组件
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

但是这样写忽略了一个关键需求：设置时间和每秒钟更新时间，应该是Clock组件本身来实现的细节

理想中，我们希望写的像下面的代码，同时可以实现Clock组件自己更新时间；

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

为了能够实现这个，我们需要在Clock组件中添加 state 状态；

state 和 props 类似，但是它是私有的，完全被组件所控制；

我们之前提到过，定义为Class 的组件有一些附加的特性 --> local state 只能用于 class;

Converting a Function to a Class /将function定义的组件转换为class定义

1.用es6 class name extends React.Component

2.添加 redder 方法

3.将原先function 中的函数体 放到 render 方法中

4. 用this.props 替换props 

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

Adding Local State to a Class/添加状态

1. 用this.state.date替换this.props.data

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) {//构造函数  注意这里传了 props **##Class components should always call the base constructor with 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. 将date prop 从Clock组件中删除

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

到此为止 代码如下

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组件自己跟新

Adding Lifecycle Methods to a Class/添加生命周期方法

在拥有很多组件的应用中，当组件销毁时，释放组件所占的资源很重要；

每当clock 组件第一次渲染时，我们就设置一个计时器 ，----> mounting 

每当clock 组件移除时，我们就清空计时器 -----> unmounting

--->声明生命周期函数方法

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

  componentDidMount() {//已经渲染到dom
         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')
);   

-->关系<--

1.<Clock/>组件传递到 ReactDom.render() 后，React 调取Constructor,组件需要显示当前时间->

this.state将会被更新

2.React 调用 组件的render()方法，将组件跟新到Dom;

3.组件更新到Dom后，React 调用componentDidMount()钩子-->组件通知浏览器设置timer

4.每次调用tick()方法，组件会调setState()方法，React知道state改变以后重新调用render()方法

5. 假如组件从Dom中移除，React 调用componentWillUnmoint()  停止timer

Using State Correctly/正确使用State

1.不要直接修改state

// Wrong
this.state.comment = 'Hello';

// Instead, use setState(): Correct
this.setState({comment: 'Hello'});

2.state 的更新可能是异步的，不能依赖它们的值，正确的做法是

setState()接收一个函数，函数接收previous state 作为参数

// Wrong  this code may fail to update the counter:
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));