前言
近年前端技术层出不穷，Facebook 推出的 React 也是程序员间讨论最多的 Javascript 框架之一。借这个机会开始学习 React，并把笔记作为 React 基础教程系列（参考 React 官网）。
因为属于入门，不太适合对 React 有经验的同学，但希望到此的同学多少都有所收获。
为了更好的阅读体验，可以在文章底下的“了解更多”中查看原文。
“状态提升”概要
会有这样的场景需要：
多个组件模块共享同一组数据，并且这些子组件的数据有一定关联（如，官网举例的摄氏度和华氏度的例子）。由于 React 的数据通常交由 state 来动态更新，那么官方建议将此类数据往上移至到父组件控制。
这样所有的子组件的控制方都为同一个。这就叫
状态提升（Lifting State Up）。例子说明
仿照官网 Demo，我弄了：斤和公斤的换算，最后判断 input 输入是否超重的例子。
页面 HTML 效果：
功能说明：
超重 tip 栏单位为斤，当超过 100 斤时，提示超重；
子组件分两个相同的 input 框，当对其中一个 input 输入时，会联动另一个输入框；
输入框的数据，会直接影响到 tip 提示栏；
代码说明：
父组件元素结构如下
包含 2 个子组件：OverWeight、WeightInput
组件 OverWeight
根据 props.weight 来显示提示信息。
组件 WeightInput
根据 props.weight 回填给 input 元素的 value，这样 input 就能显式数据值。
当 input 输入数据时，触发事件方法：handleChange，handleChange 内部调用从父组件中定义的
onWeightChangeFromParent 方法。注意，此时该方法的入参是：输入值及单位类别（斤还是公斤）
这样 WeightInput 和 OverWeight 中的数据都不由自己 state 来控制，统一由父组件的 props 传入。
父组件 Calculator
这是个综合组件，功能会略显复杂。
首先通过构造器 constructor 定义该组件的 state 数据对象，及设置事件绑定：
对 OverWeight 组件设置入参属性 weight：
注意，这个属性是个方法计算结果。当组件更新后，将重新调用 render 方法，并触发该方法：
这里会根据当前 unit 单位来对 weight 进行换算。
之后对 WeightInput 组件的属性设置会很重要。
首先定义 onWeightChangeFromParent 属性，其值是 handleWeight 方法：
当子组件 WeightInput 触发 onChange 后，会调用该属性方法，传入 weight 和 unit。
最后，handleWeight 会接收到这两个参数，并通过 setState 更新数据。
然后是多个 WeightInput 数据联动的实现，通过 updateWeight 方法：
在 JSX 模板上，分别定义固定的传参（这里分别传入斤和公斤的单位标识）。判断当前输入组件是否和 state.unit 一致，不同的话就在另一个 input 框对 weight 单位换算，相同则原样返回。
综上，就能看到前文中所示的页面效果。
总结
如官网所说，将子组件的 state 状态数据提取到公共组件，通过父组件的数据流，设置 props 往下传递到子组件，将有利于问题的追溯，也对数据有个顶级统一的管理控制。
同时，子组件将专注自身核心的功能实现，不在额外多做状态数据的管理。更符合程序设计中的单一职责原则。
閱讀更多 前端雨爸 的文章
