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

1. 为这个类添加一个构造函数来初始化this.state
   类组件在任何时候都应该通过props来调用基本的父类构造函数

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

1. 从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组件是相互隔离的，进行独立的更新以及渲染操作。