react组件、props、state以及父子组件传值

1.react组件
组件(Components) 让你可以将用户界面分成独立的，可复用的小部件，并可以对每个部件进行单独的设计。
从定义上来说， 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”)， 并返回 React 元素，用以描述屏幕显示内容。

2.props
props (properties的简称) 是一个组件的 配置选项 。 props是由上到下指定且不可改变的。

一个组件不能改变自身的props, 但要负责设置子组件的 props。

3.state
当组件加载时，state有一个默认值，后来state会不定期地改变（主要是用户行为触发的）。state是每一时间点组件状态的代表-快照。

一个组件在内部管理自己的state，除了设置子组件的state之外，该组件与其子组件的state没有任何联系。你可以认为state是私有的。

如果一个组件需要在某个时间点改变某个属性，那该属性应设为state，否则应设为组件的prop。

共同点：
props和state都是 纯 JS 对象
props和state的改变都会触发render函数来更新界面
props和state都是确定的。 如果你的组件在相同的props和state的组合下产生不同结果，那一定是哪里错了。

4.改变 props 和 state

5.组件是否应该有state?
state 是可选项，不是React强制实现的。因为state增加了组件的复杂度同时降低了组件的可预见性，所以没有state的组件 要略胜一筹。即便在一个交互式应用中，你显然离不开state，你也要避免有太多的有状态化组件（含有state的组件）。

6.组件类型
无状态组件 — 只有 props, 没有 state。 除去render() 函数和所有围绕props的逻辑之外，没有什么要关心的地方。这使他们易于理解且易于测试
有状态组件 — 既有 props 又有 state。也被称作状态管理者 。他们负责客户端-服务器通信(通过XHR, web sockets, 等)，数据处理和给用户行为反馈。

7.哪些组件应该有 State？
大部分组件的工作应该是从 props 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。
尝试把尽可能多的组件无状态化。 这样做能隔离 state，把它放到最合理的地方，也能减少冗余，同时易于解释程序运作过程。
常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过 props 传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。

8.哪些 应该 作为 State？
State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时，想象一下表示它的状态最少需要哪些数据，并只把这些数据存入 this.state。在 render() 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的，因为如果在 state 里添加冗余数据或计算所得数据，需要你经常手动保持数据同步，不能让 React 来帮你处理。

9.哪些不应该作为 State？
this.state 应该仅包括能表示用户界面状态所需的最少数据。因此，它不应该包括：
计算所得数据： 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到 render() 里更容易保证用户界面和数据的一致性。例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串， 直接在 render() 里使用 this.state.listItems.length + ’ list items’ 比把它放到 state 里好的多。
React 组件： 在 render() 里使用当前 props 和 state 来创建它。
基于 props 的重复数据： 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为未来的 props 可能会变化。

父子组件间的数据传递—prop
1、父子组件间的数据传递主要使用prop。
2、子组件接收的prop的数据格式是由prop-types进行检测的，当不符合时，会在console控制台提出警告（可用于开发环境）。
prop的类型：不同的类型实现了父子组件间不同方向的数据传递

普通数据类型：可用于外部世界向子组件内部传递数据。
当当前组件需要使用父组件通过prop传递过来的数据时，必须在构造函数的第一行调用父类（React.Component）构造函数，即super(props)。即this.props的赋值是React.Compnent构造函数的工作之一。

函数数据类型：相当于父组件向子组件传递了一个函数，在子组件内部某一个时刻执行这个函数，就会将子组件的数据传递给父组件中。
（1）步骤一：在父组件中定义函数，约定参数。

（2）步骤二：给指定的子组件设置传递的属性

（3）步骤三：在子组件中，确定父组件传递过来的函数 执行 的位置，及传入的参数。