React受控组件和非受控组件

受控组件：

import React, { Component } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleTextareaChange = this.handleTextareaChange.bind(this);
        this.state = {
            inputValue: '',
            textareaValue: '',
        };
    }
    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value,
        });
    }
    handleTextareaChange(e) {
        this.setState({
            textareaValue: e.target.value,
        });
    }
    render() {
        const { inputValue, textareaValue } = this.state;
        return (
            <div>
                <p>单行输入框： <input type="text" value={inputValue} onChange={this.handleInputChange} /></p>
                <p>多行输入框： <textarea value={textareaValue} onChange={this.handleTextareaChange} /></p>
            </div>
        );
    }
}

• 每当表单的状态发生变化时，都会被写入到组件的 state 中，这种组件在React 中被称为受控组件（controlled component）。
• 在受控组件中，组件渲染出的状态与它的 value或 checked prop 相对应。 React 通过这种方式消除了组件的局部状态，使得应用的整个状态更加可控。
• React 官方同样推荐使用受控表单组件。总结下 React 受控组件更新 state 的流程：
  (1) 可以通过在初始 state 中设置表单的默认值。(this.state={})
  (2) 每当表单的值发生变化时，调用 onChange 事件处理器。
  (3) 事件处理器通过合成事件对象 e 拿到改变后的状态，并更新应用的 state。this.setState({});
  (4) setState 触发视图的重新渲染，完成表单组件值的更新。
• 在 React 中，数据是单向流动的。表单的数据源于组件的 state，并通过 props 传入，这也称为单向数据绑定。然后，我们又通过 onChange 事件处理器将新的表单数据写回到组件的 state，完成了双向数据绑定。

非受控组件

• 在 React 中，非受控组件是一种反模式，它的值不受组件自身的 state 或 props 控制。通常，需要通过为其添加 ref prop 来访问渲染后的底层 DOM 元素。