React官方文档--State and Lifecycle

state and leftcycle

使用class来定义组件

通过五个步骤来创建一个自动刷新的时钟：

1. 创建一个ES6 class 并且 extends 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>
);
}
}

为一个类添加一个Local State

将date从属性移动到状态需要三个步骤

1. 使用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>
);
}
}

为这个类添加一个构造函数来初始化this.state

类组件在任何时候都应该通过props来调用基本的父类构造函数

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

从Clock元素中移除date属性

为一个类添加生命周期方法

在一个有许多组件的应用中，有一个非常重要的事情， 也就是在一个组件被销毁以后，释放其资源。

我们希望构建一个timer，无论Clock何时第一次被渲染到DOM元素中，这个可以在React中被称为挂载。

我们也希望在DOM移除这个Clock元素的时候，清除掉这个timer，叫做卸载。

可以在组件的class中声明一些特殊的方法，在这些方法里面运行组件挂载和卸载时的代码。

这些方法叫做”lifecycle hooks”，声明周期的hook函数。

componentDidMount()

hook函数会在组件输出并且已经被挂载之后运行，可以在这里构建这个timer

componentWillUnmount()

hook函数会在组件被卸载之前执行，这里会销毁timer并且释放资源

正确使用state

有几个在使用setState()方法的时候需要注意的地方

不要直接修改state

下面的例子并不会重新渲染组件:

this.state.comment = "Hello";
//will not re-render a component
this.setState({
comment: "Hello"
});
//will re-render a component

state可能会异步地更新

在同一时刻，可能会有几个React组件在一起更新，所以不应该依赖前一次this.props的装或者是前一次this.state的状态来更新或者计算下一次的状态。

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

如果需要使用上次的状态来计算下一次渲染所需要的内容，这里可以使用setState()函数并且给其内部传递一个函数作为参数，这个函数的第一个参数是之前的state，第二个参数是props在更新即将被提交之前的值。

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

合并state更新

当你调用了

setState()

方法的时候，React合并你提供给当前state的对象。

比如：state现在包含了不止一个独立的变量。

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

你可以更新这些state在独立的

setState()

方法中

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

上面的函数可以在第一个调用之后更新posts属性的状态，但是并不会修改其他属性的状态，来保持state的完整性。

The Data FLows Down

父组件或者子组件都不知道一个特定组件是有状态还是无状态的，所以他们不在乎某个组件到底是类定义的组件还是函数定义的组件。，这也是为什么state经常被局部调用，对于任何组件来说，除非这个state属于自己，或者由自己建立，否则都是不能访问的。

一个组件可能会选择传递一个state作为props来给其子组件使用。

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

也可以供用户自定义组件使用

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

FormattedDate

组件会接收到这个

date

属性作为其的props，但并不知道这个prop来自于何处。

function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>
//使用父组件传递的date属性，但是也仅限于使用
}

这种方法一般叫做自顶向下或者是单向的数据流。任何state疆场属于一些特定的组件，数据或者UI只能够通过这个state来影响DOM树中位于这个组件下方的其他组件。

比如下面这个组件：

function App() {
return (
<div>
<Clock />
<Clock />
<Clock />
</div>
);
}

这个组件中的三个

Clock

组件是相互隔离的，进行独立的更新以及渲染操作。