React.js 官网资料摘记：State & 生命周期

state & 生命周期

这个不是这一章的重点，但是下面的函数中有用到，所以先在这里提一下：

函数定义组件

比如下面这样形式的组件：

class Clock extends React.Component {    render(){        return (            <h1>{this.props.title}</h1>        );    }}

可以简写成下面这样的函数形式

function Clock(props){    return (        <h1>{props.title}</h1>    );}ReactDOM.render(    <Clocl title='函数定义组件' />,    document.getElementById("root"));

看上一篇中关于时钟组件的例子，这里我们不再外部设置定时任务，之后调用函数来重新渲染这样的方式，我们把上述全部功能封装进Clock组件中。

为一个类添加局部状态

class Clock extends React.Component{    constructor(props){        super(props);        this.state={            date:new Date()        };    }    render(){        return (            <div>                <h1>定时器显示：</h1>                <h2>{this.state.date.toLocaleTimeString()}</h2>            </div>        );    }}ReactDOM.render(    <Clocl />,    document.getElementById('root'));

还没有写完，上面只是把基本结构搭建出来了，并把实现显示从传入参数this.props.date.toLoaclTimeString()的方式变成了this.state.date.toLocaleTimeString()，该组件现在并不需要外部传递参数，组件本身就会显示时间，至于更新，看下面：

将生命周期方法添加到类中

这里先介绍两个函数：

• componentDidMount
• componentWillMount

关于这两个函数的简单介绍看这里，为了实现定时任务，我们设置在组件被渲染到DOM后的函数：componentDidMount中设置定时任务：

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

这里timeID只是个随便设置的参数，重点是我们要设置该组件内部的tick()函数每隔一秒运行一次。下面展示tick()函数：

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

这里顺带再展示一下释放掉该定时任务：

componentWillMount(){    clearInterval(this.timeID);}

下面说一下上面代码的运行顺序：

• constructor()运行，将组件私有属性state中的date设置成new Date()，这里可以说是初始化。
• componentDidMount()运行，设置定时运行tick()函数
• 在tick()函数中使用唯一能更新sate的函数setState更新state
• 在输出中输出state中的date，就能把全部的时钟功能封装到一个组件内部了。
• 最后在该组件被释放掉时，删除掉定时任务，不再占用系统资源

正确地使用状态

不要直接更新状态

下面对state直接赋值的方式是不会更新组件输出的：

this.state.date=new Date();

而是要使用函数setState：

this.setState({date:new Date()})

状态更新可能是异步的

• 当你多次调用setState()时，React会把多次调用构建成一次调用，所以当你设置了setState()可能不是立刻生效的
• 并且由于this.props和this.state不是同步更新的，所以你最好不要靠这两者的值决定下一步的代码。

要想state的值与prop的值同步更新，可以使用下面的形式：

形式１：

this.setState((state,props)=>({    PropsName:state.firstName+" "+props.lastName}));

形式２：

this.setState(function(state,props){    return {        PropsName:state.firstName+" "+props.lastName    };});

状态更新合并

当你在constructor中初始化state时可能设置了多个值：

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

当你下面单独更新其中一部分时：

this.setState({posts:'单独设置post的值'});this.setState({comments:"这里单独设置comments"});

　并不会影响另一个的设置，每个属性都是独立的！

数据自顶向下流动

比如我返回这么一个组件，这里用组件的简写形式：

function Clock(props){    return (        <h1>{props.date.toLocaleString()}</h1>    );}ReactDOM.render(    <Clock date={new Date} />,    document.getElementById("root"));

在Clock中，他并不需要关心props.date的来源，只要知道该组件是父级组件传递进来的一个参数即可。