前端框架React - State 和 生命周期

1.Introduction of state

the fact that the  Clock  sets up a timer and updates the UI every second should be an implementation detail of the  Clock .

事实上组件的功能和更新UI的代码应该是组件自己的具体实现细节。

ReactDOM.render(
  ,
  document.getElementById('root')
);

为了实现上述的代码，我们需要为组件增加state。

State is similar to props, but it is private and fully controlled by the component.

State和props很相似，但是state是私有的，完全由组件控制。

We mentioned before that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.

state是一个只在class定义的组件里面才有的新特性。

2.将function转换成Class

1. Create an ES6 class with the same name that extends React.Component.

2. Add a single empty method to it called render().

3. 每一个Class类型的组件都要有一个render（）方法。

4. Move the body of the function into the render() method.

5. Replace props with this.props in the render() body.

6. 在render()方法中，props要用this.props来代替

7. Delete the remaining empty function declaration.

class Clock extends React.Component {
  render() {
    return (
      

        
Hello, world!
        
It is {this.props.date.toLocaleTimeString()}.
      
    );
  }
}

3.给Class添加local state

我们将用下面的三步来完成date从props到state的过程：

1.在render()方法中，用this.state.date来代替this.props.date

class Clock extends React.Component {
  render() {
    return (
      

        
Hello, world!
        
It is {this.state.date.toLocaleTimeString()}.
      
    );
  }
}

2.添加一个class的构造函数来初始化this.state，并且我们把props传进了基础的构造函数。

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

  render() {
    return (
      

        
Hello, world!
        
It is {this.state.date.toLocaleTimeString()}.
      
    );
  }
}

3.Remove the date prop from the  element

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

  render() {
    return (
      

        
Hello, world!
        
It is {this.state.date.toLocaleTimeString()}.
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

4.添加生命周期方法到Class中

We want to  set up a timer  whenever the  Clock  is rendered to the DOM for the first time. This is called "mounting" in React.

我们希望给Class安装一个计时器，可以知道Class什么时候第一渲染到DOM里面。这在React叫做mounting

We also want to clear that timer whenever the DOM produced by the Clock is removed. This is called "unmounting" in React.

我们也希望当这个Class的node被remove的时候能清除这个计时器。这叫做unmounting。

这些方法叫做生命周期钩子。

componentDidMount() { } 这个钩子在组件输出被渲染到DOM之后run。这里set计时器很好。
componentWillUnmount() { }

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

注意我们将timerID保存在this里面。

While this.props is set up by React itself and this.state has a special meaning, you are free to add additional fields to the class manually if you need to store something that is not used for the visual output.

尽管this.props由React自己设置，this.state有特殊的意义。我们可以添加其他的filed到class，只要我们需要存储的东西不会用在视觉输出里面。

上面的翻译简直不是人话。意思是

If you don't use something in render(), it shouldn't be in the state.

如果我们需要保存的东西不会被用在render()方法中，也就是不会用在视觉输出中，那么这些东西就不应该被保存在state里面。

Finally, we will implement the tick() method that runs every second.

It will use this.setState() to schedule updates to the component local state:

最后我们用this.setState()方法来更新组件本地的state。

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 (
      

        
Hello, world!
        
It is {this.state.date.toLocaleTimeString()}.
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

调用流程：

1.When  is passed to ReactDOM.render(), React calls the constructor of the Clockcomponent. Since Clock needs to display the current time, it initializes this.state with an object including the current time. We will later update this state.

2. React then calls the Clock component's render() method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the Clock's render output.

3.When the Clock output is inserted in the DOM, React calls the componentDidMount() lifecycle hook. Inside it, the Clock component asks the browser to set up a timer to call tick() once a second.

4.Every second the browser calls the tick() method. Inside it, the Clock component schedules a UI update by calling setState() with an object containing the current time. Thanks to the setState() call, React knows the state has changed, and calls render() method again to learn what should be on the screen. This time, this.state.date in the render() method will be different, and so the render output will include the updated time. React updates the DOM accordingly.

5.If the Clock component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle hook so the timer is stopped.

5.正确的使用State

1.不要直接改变state

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

我们要改变state，用setState这个方法

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

The only place where you can assign  this.state  is the constructor.

你唯一可以给this.state分配值的地方是构造函数。

2.state的更新可能是异步的

react可能在一次更新中批处理多个setState方法。

Because  this.props  and  this.state  may be updated asynchronously, you should not rely on their values for calculating the next state.

因为更新可能是异步的，所以不要依赖他们的值来计算下一个state

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

To fix it, use a second form of  setState()  that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:

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

3.state的更新会被合并

When you call setState(), React merges the object you provide into the current state.

react会合并你向state里面提供的对象。

Then you can update them independently with separate setState() calls:

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

The merging is shallow, so this.setState({comments}) leaves this.state.posts intact, but completely replaces this.state.comments.

合并会不管this.state.posts，只会更新this.state.comments

6.The data flow down

Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.

 parent和child控件都不会知道一个控件是stateful还是stateless。

This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.

除了这个控件本身，其他控件是不能access 这个控件的state的。

A component may choose to pass its state down as props to its child components

一个控件可以选择将它的state作为props传递给它的子控件。

It is {this.state.date.toLocaleTimeString()}.

This also works for user-defined components

这同样适用于自定义组件。

The  FormattedDate  component would receive the  date  in its props and wouldn't know whether it came from the  Clock 's state, from the  Clock 's props, or was typed by hand:

这个组件会在它的props里面获得date，不会知道这个date来自Clock组件的state，来自Clock组件的props还是手动输入的。

function FormattedDate(props) {
  return 
It is {props.date.toLocaleTimeString()}.
;
}

This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.

任何state都是被具体的state所拥有的。任何来自于那个state的数据或者UI只能影响低于这个state自己控件的控件。

一个完整的例子：

function FormattedDate(props) {
  return 
It is {props.date.toLocaleTimeString()}.
;
}

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 (
      

        
Hello, world!
        
      
    );
  }
}

function App() {
  return (
    

      
      
      
    
  );
}

ReactDOM.render(, document.getElementById('root'));