React中的数据流动是单向的，自上而下流动，即由父组件传递给子组件。
React中最重要的两个概念就是state和props。state顾名思义表示状态。它代表组件内部的状态，这些状态只在组件内部改变，它相当于函数的内部参数。而props相当于由函数外部传入的参数，它的数据传递过程就是在顶级组件初始化pros,然后自上而下便利整个组件树，重新渲染所有相关的子组件。
1. state
1.1.什么是state
在 React 没有结合 Flux 或 Redux 框架前，它自身也同样可以管理组件的内部状态。在 React 中，把这类状态统一称为state。
1.2.如何更新state
在React中更新state的方法是this.state()方法，当组件的内部状态改变时，this.state()就会更新state的值，重新渲染组件。
我们可以做一个简易的计数器组件举例：
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
count: 0,
};
}
handleClick(e) {
e.preventDefault();
this.setState({
count: this.state.count + 1,
});
}
render() {
return (
<div>
<p>{this.state.count}</p>
<a href="#" onClick={this.handleClick}>更新</a>
</div>
);
}
}
上述例子就是一个很简单的使用this.setState()的例子，每次点击更新时让state中的count值加1。
需要注意的有两点：
- this.setState()方法是异步的，同一个生命周期中的所有this.state()会合并执行
- 只有在constructor()可以对state进行初始化，即this.state=值，在其他地方改变state的值都需要使用this.setState()方法。
1.3.state有几种内部状态
state有两种内部状态：
- activeIndex ：当前选中对象的索引
activeIndex作为state,有两种视角：- activeIndex在组件内部更新，这种来源于组件内部初始化的defaultActiveIndex prop(智能组件)
- activeIndex在组件外部更新，这种来源于组件外部传入的activeIndex prop(木偶组件)
- prevIndex：前一次选中对象的索引
2. props
2.1. 什么是props
React的单向数据流，主要的流动管道就是 props。
需要注意的是props本身是不可变的。如果试图改变props的值时会报出类型错误的警告。组件的props一定来源于组件的默认属性或从父组件传递过来的属性。
2.2. 如何传递props
props的传递方式就是由父组件向子组件传递。
在父组件中定义一个属性，比如<Container name="内容"/>,子组件通过this.props.name获取从父组件传递来的值。当传递的props是一个对象时，可以通过ES6的扩展操作符传入整个props对象。如
<container {...props}/>
2.3. props的基本概念
- defaultProps
定义默认的props,当父组件没有传值给props,子组件可以使用默认的defaultProps。 - propTypes
propTypes 用于规范 props 的类型与必需的状态。当传入的props与规定的propsTypes不匹配时就会报出警告。
3. 总结
在阅读了React数据流之后，我个人对于state和props的比较做了一个简单的总结：
- props是组件外的属性，它由组件外的父组件传递得到；state是组件内的属性，它的更新都在组件内进行，不影响其他组件。
- props是不可修改的，只能通过传递它的父组件修改;state是可以修改的，它是反映组件状态的状态集合。
- this.props和this.state都是异步更新的，因此不能依赖当前的props或state值去计算下一个状态或属性。
