React 第五章 state & 组件生命周期

本章我们主要讲解 组件之state使用，以及组建的生命周期，在本章我们将使用class进行组件编写。

1，组件的状态state

在之前我们讲过一个页面时间的例子，之前我们使用的属性props进行定时页面更新渲染。但是作为一个时钟，根据面向对象思想，其更新时间应该由自身内部控制，而不是从外界传入。所以作为一个组件器必不可少的需要有自己内部状态数据功能。所以出现了组件内部state状态机制。有时我们也将React的组件称为状态机。

我们对之前的时钟示例进行第一步改造，改造为显示内部数据：我们在state中添加一个date字段

import React from 'react';
import ReactDOM from 'react-dom';

//State & 生命周期
class Clock extends React.Component{
	
	constructor(props){
		super(props);
		this.state={
				date:new Date()
		};
	}
	render(){
		return (
			<div>Time now is {this.state.date.toLocaleTimeString()}</div>
		);
	}
}

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

此时页面将会看到一个时间，但是时间是不动的，我们需要实现定时定时的去更新state中的date。

2，组件的生命周期函数 componentDidMount（挂载）、componentWillUnmount（卸载）。

componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行。

componentWillUnmount()在组件被Dom移除时会进行调用。

所以我们对上面的时钟例子进行改造，在组件被渲染到页面后，在添加定时更新state ,所以在componentDidMount方法中添加定时更新代码。 通过设置更新state中date属性，因为state在页面中进行了使用，所以React会及时的更新最新状态到页面上。好比一个人状态变好了，立马脸上就表现出活力。state的变化会及时更新到页面UI中（下面会讲不更新的情况）。

import React from 'react';
import ReactDOM from 'react-dom';

//State & 生命周期
class Clock extends React.Component{
	constructor(props){
		super(props);
		this.state={
				date:new Date()
		};
		console.log("执行constructor构造函数。。");
	}
	componentDidMount() {
		console.log("组件被挂载了");
		this.timerId = setInterval(()=>this.timeRun(),1000);
	}
	componentWillUnmount() {
		console.log("组价被卸载了。。。。");
	}
	timeRun(){
		this.setState({
			date:new Date()
		});
	}
	render(){
		console.log("执行render渲染函数。。");
		return (
			<div>Time now is {this.state.date.toLocaleTimeString()}</div>
		);
	}
}

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

组件内部方法执行我们可以根据打印信息看到，手续执行构造函数，然后执行渲染方法，在执行挂载函数。。。

3，关于state必须知道的

3.1 state 只能在构造函数中进行直接赋值，其他地方赋值无效，其他地方只能通过this.setState({})来更新state中的值。构造函数是唯一可以直接给state复制的地方。

3.2 state的更新可能不会及时更新页面，因为state的更新可能为异步的，比如你在设置state中的某属性值时，新值为有旧的值参与运算获取，则不能及时更新页面UI,如：

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

要解决这个问题我们在this.setState()中不使用对象，使用函数代替。第一个参数为更新前的state，第二个参数可以为要使用的props参数。上面代码调整为则可以实时的更新页面UI：

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

3.3 state在更新时可以只更新其中一个，或者多个。其中没有体现的属性将不会进行更新。

3.4 在React组件中 state是属于组件内部的数据，其他组件不能进行直接访问修改。由于我们知道传递参数到一个组件中使用的是组件属性props。所以在React中数据的传递只能为有上层级的组件传递到子组件中。子组件通过其构造函数props对象获取到到传入的值。故也称为React数据传递为单向数据传递。