背景：React基础认知
React遵守严格的“单向数据流”，使用了props, state来区分组件的属性和状态。同Vue.js的双向数据绑定相比，子组件的props用来定义外部（父组件或更高层级的组件）传进来的属性, 一旦定义，子组件内部无法直接改变props的值。而state维持组件内部的状态更新和变化, 组件渲染出来后响应用户的一些操作,更新组件的一些状态。
在表单提交的场景中，Vue.js中通常使用v-model指令实现model层和view层的数据同步更新，但在React中需要使用使用props和state实现类似的功能。
非受控组件（Uncontrolled Component）
顾名思义, 非受控组件即组件的状态改变不受控制。最简单的例子就是在<input />中，React 可以为其指定初始值，但不再控制后续更新。可以指定一个 defaultValue 属性而不是 value。
class Demo1 extends Component {
constructor(props) {
super(props)
}
render() {
return (
<input
defaultValue="Bob"
type="text"
ref={(input) => this.input = input}
/>
)
}
}
1.一个没有value属性的<input>就是一个非受控组件。通过渲染的元素，任意的用户输入都会被立即反映出来。
2.一个非受控的组件自己维护自己的state。
如何修改input元素的值呢，就像之前简单的js操作:input.value = xxx或者使用React的ref相关操作方法，悲剧的是无法从外面来修改value值，因为它是不受控的。
受控组件（Controlled Component）
如果我们在React中直接使用value给input赋值，虽然在初始化的时候可以看到vaule显示在input里，但是无法改变值
class Demo2 extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<input
value="Bob"
type="text"
/>
)
}
}
export default Demo2
这是需要我们维护state手动的更改组件的状态以保证输入和显示一致。
class Demo3 extends React.Component {
constructor(props) {
super(props)
this.state = {
value: 'hello world'
}
}
handleChange = (event) => {
this.setState({
value: event.target.value
})
}
render() {
return (
<input
value={this.state.value}
type="text"
onChange={this.handleChange}
/>
)
}
}
export default Demo3
那么问题又来了！！！！我们通过state和input的onChange，保证输入和试图保持一致，但是如果我们想通过外部的props影响当前的value值变化，这段代码就显得有点力不从心了。
混合组件
根据React受控（非受控）组件的定义
获得启发：
- props.value总是有比内部state.value更高的优先级。
- 组件中所有的变化都应该同步到内部的state.value，并通过执行props.onChange来触发更新。
- 当组件接受新的props的时候，将props.value反映给state.value。
- 在优先值发生变化后更新组件。
1.props.value总是有比内部state.value更高的优先级
当props.value被设置以后，我们应该总是拿props.value来渲染而不是state.value，因此我们可以定义一个displayValue的getter属性，并在render中使用：
get displayValue() {
const propKey = 'defaultValue'
const internalKey = 'value'
// 当props变化时，同步更新state
return this.props[key] !== undefined ?
this.props[key] : this.state[internalKey];
}
render() {
return <b>{this. displayValue}</b>
}
2.组件中所有的变化都应该同步到内部的state.value，并通过执行props.onChange来触发更新
handleChange(newVal) {
if (newVal === this.state.value) return;
this.setState({
value: newVal, // 更新组件的state
}, () => {
// 触发父级组件的change方法
this.props.onChange && this.props.onChange(newVal);
});
}
3.当组件接受新的props的时候，将props.value反映给state.value
为了能修改内部的value以及在handleChange中执行正确的操作，将props.value和state.value进行同步是非常重要的：
componentWillReceiveProps(nextProps) {
const controlledValue = nextProps.defaultValue;
if (controlledValue !== undefined &&
controlledValue !== this.state.value
) {
this.setState({
value: controlledValue,
});
}
}
4.在优先值发生变化后更新组件
我们的原则是：一个受控的组件在内部state.value发生变化的时候不应该触发重新渲染，只有在props.value发生变化的时候才触发修改。
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.defaultValue !== undefined) {
// controlled, use `props.defaultValue`
return nextProps.defaultValue !== this.props.defaultValue;
}
// uncontrolled, use `state.value`
return nextState.value !== this.state.value;
}
核心思路
同时维护props.value和state.value的值。props.value在展示上拥有更高的优先级，state.value代表着组件真正的值。
示例代码：https://github.com/zhiyuanMain/ReactForJianshu/tree/master/src/controlled
