背景：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受控（非受控）组件的定义
获得启发：

1. props.value总是有比内部state.value更高的优先级。
2. 组件中所有的变化都应该同步到内部的state.value，并通过执行props.onChange来触发更新。
3. 当组件接受新的props的时候，将props.value反映给state.value。
4. 在优先值发生变化后更新组件。

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