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)，都被认为是组件的实现细节，可以随着时间而改变。你可以在有状态的组件中使用无状态组件，反过来也一样。