React中文文档之State and Lifecycle

state 和 生命周期

到目前为止，我们仅仅学习了一种方式来更新UI。

我们调用 'ReactDOM.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组件。它将建立自己的计时器，并每秒更新自身。

我们可以通过封装来开始，如下：

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组件建立一个计时器，并且每秒更新UI，应该是 Clock 组件的一个实现细节.

理想情况下，我们应该只写一次，Clock组件就会更新自身。

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

为了实现这个，我们需要添加 'state' 到 Clock 组件。

state同props非常相似，但是它是私有的，而且完全被组件自身控制

我们前面提到过，以类方式，定义的组件，有一些额外的特性。

局部state就是类可用的功能之一

将函数式组件，转换成类组件

你可以传唤一个函数式组件，例如 Clock组件，到一个类组件，通过5个步骤：

1.创建一个同名的ES6类，继承 React.Component

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

此时，Clock组件被定义为一个类，而不是函数

这就让我们可以使用 '附加特性'，例如：局部state和生命周期钩子

向类中添加局部state

我们通过3步，将props中的data移动到state：

1.在render()方法中，使用 'this.state.data' 替换 '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>
);
}
}

注意：我们如何传入 'props' 给基础构造器(constructor)

constructor(props) {
super(props);
this.state = {date: new Date()};
}

组件类，应该总是传入 'props' 调用基础构造器

3.从<Clock />元素上，移除 'date' prop

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组件首次渲染为dom时，我们设置了一个计时器(set up a timer)。这在React中，被称作 'mounting'

当移除由clock组件产生的dom时，我们清除mount设置的计时器。这在React中，被称作 'unmouting'

我们可以在组件类中，声明一些特殊的方法，当组件 mount 和 unmount 时，来运行我们设置的代码：

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

}
componentWillUnmount(){

}
render() {
return (
<h1>It is {this.state.date.toLocaleTimeString()}.</h1>
);
}
}

这些方法被称作 '生命周期 钩子'

组件输出已经被渲染为dom后，运行 'componentDitMount()' 钩子。这是个设置计时器的好地方:

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

注意我们是如何在 'this' 对象上，保存 计时器ID的。

this.props由React自身创建，而this.state有特殊的意义，如果你需要存储一些数据，且这些数据并不用于可见输出(the visual output)，你可以手动给组件类添加额外的字段

如果你在 render() 中不使用其他字段，则不应该在 state 中添加这些字段

我们将在 'componentWillunmount' 生命周期钩子中，清除计时器

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

最后，我们将实现 tick() 方法，将会每秒运行一次

tick() 方法，使用 'this.setState()' 来更新组件的私有state

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

正确使用 state

关于setState()，你应该知道3件事：

1.不要直接修改state

例如，下面的代码，将不会重新渲染组件:

this.state.comment = 'Hello';			// 错误

使用 setState() 来代替：

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

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

为了性能考虑，React可以在一次更新中，批量执行 setSate() 调用

因为 this.props 和 this.state 可能被异步更新，在计算接下来的state，你不应该依赖它们的值(可能还未被更新)

例如，下面的更新counter的代码可能失败:

this.setState({
counter: this.state.counter + this.props.increment;		// 错误
});

为了修复上面的错误，使用setState()的第二种形式，接收一个函数(function)，而非一个对象(object)。函数接收上一次的state作为第一个参数，更新应用时的props作为第二个参数:

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

上面，我们使用了一个 '箭头函数'(arrow function)，也可以使用一般的函数：

this.setState(function(prevState, props) {
return {
counter : prevState.counter + props.increment		// 正确
}
});

3.state更新会被合并

当调用 'setState()'时，React会合并 你提供的对象(the object you provide) 到当前的state。

例如：提供的state可能包含几个独立的变量：

constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}

接着，可以使用独立的 setState() 调用来分别更新它们：

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

上面的合并是浅合并，因此，this.setState({comments}) 不会影响到 this.state.posts，但是会完整地替换this.state.comments

数据流向下传递(the data flows down)

父组件和子组件，都不知道某个组件是 'stateful' 还是 'stateless'，而且，它们不关心它们被定义为一个函数还是类。

这就是为什么state经常被称作 局部(local) 或者 包装、封装(encapsulated)。对于除了拥有并设置它的组件之外的任意其他组件，它是不可访问的。

同 props 一样，组件也可以选择，将它的state传递给它的子组件:

<h2>It is {this.state.date.loLocaleTimeString()}.</h2>

对用户自定义组件也是有效的：

<FormattedDate data={this.state.date} />

FormattedDate 组件接收props中的date，但是并不知道它是来自'clock' 的state，props，还是手动输入:

function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

这通常被称为“自上而下”或“单向”的数据流。任何由某些特定组件拥有的state，任何来自该state的数据或UI，仅仅会影响树形结构中，它们的下级组件.

想象一个组件树是一个props瀑布，每个组件的state就像一个附加的水源，在任意点加入到瀑布中，但是也向下流动。

为了显示所有的组件是完全隔离的，我们可以创建一个app组件，渲染3个 clock 组件:

function App() {
return (
<div>
<Clock />
<Clock />
<Clock />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

每个Clock设置它自己的计时器，并且独立的更新。

在React应用中，不论组件是有状态的(stateful)，还是无状态的(stateless)，都被认为是组件的实现细节，可以随着时间而改变。你可以在有状态的组件中使用无状态组件，反过来也一样。