作者：霜序
校稿：袋鼠云数栈前端团队运营小组
该文章包含如下内容
在 HTML 中，表单元素(<input>/<textarea>/<select>)，通常自己会维护 state，并根据用户的输入进行更新
<form> <label> 名字: <input type="text" name="name" /> </label> <input type="submit" value="提交" /></form>在这个 HTML 中，我们可以在 input 中随意的输入值，如果我们需要获取到当前 input 所输入的内容，应该怎么做呢？
使用非受控组件，不是为每个状态更新编写数据处理函数，而是将表单数据交给 DOM 节点来处理，可以使用 Ref 来获取数据
在非受控组件中，希望能够赋予表单一个初始值，但是不去控制后续的更新。可以采用defaultValue指定一个默认值
class Form extends Component { handleSubmitClick = () => { const name = this._name.value; // do something with `name` } render() { return ( <div> <input type="text" defaultValue="Bob" ref={input => this._name = input} /> <button onClick={this.handleSubmitClick}>Sign up</button> </div> ); }}在 React 中，可变状态(mutable state)通常保存在组件的 state 属性中，并且只能够通过setState 来更新
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: 'shuangxu'}; } render() { return ( <form onSubmit={this.handleSubmit}> <label> 名字: <input type="text" value={this.state.value}/> </label> <input type="submit" value="提交" /> </form> ); }}在上述的代码中，在 Input 设置了 value 属性值，因此显示的值始终为this.state.value，这使得 state 成为了唯一的数据源。
const handleChange = (event) => { this.setState({ value: event.target.value })}<input type="text" value={this.state.value} onChange={this.handleChange}/>如果我们在上面的示例中写入handleChange 方法，那么每次按键都会执行该方法并且更新 React 的 state,因此表单的值将随着用户的输入而改变
React 组件控制着用户输入过程中表单发生的操作并且 state 还是唯一数据源，被 React 以这种方式控制取值的表单输入元素叫做受控组件
Input 组件只接收一个defaultValue默认值，调用 Input 组件的时候，只需要通过 props 传递一个defaultValue 即可
//组件function Input({defaultValue}){ return <input defaultValue={defaultValue} /> }//调用function Demo(){ return <Input defaultValue='shuangxu' />}数值的展示和变更需要由state和setState，组件内部控制 state，并实现自己的 onChange 方法
//组件function Input() { const [value, setValue] = useState('shuangxu') return <input value={value} onChange={e=>setValue(e.target.value)} />;}//调用function Demo() { return <Input />;}请问这时 Input 组件是受控还是非受控？如果我们采用之前的写法更改这个组件以及其调用
//组件function Input({defaultValue}) { const [value, setValue] = useState(defaultValue) return <input value={value} onChange={e=>setValue(e.target.value)} />;}//调用function Demo() { return <Input defaultValue='shuangxu' />;}此时的 Input 组件本身是一个受控组件，它是由唯一的 state 数据驱动的。但是对于 Demo 来说，我们并没有 Input 组件的一个数据变更权利，那么对于 Demo 组件来说，Input 组件就是一个非受控组件。(??以非受控组件的方式去调用受控组件是一种反模式)
如何修改当前的 Input 和 Demo 组件代码，才能够使得 Input 组件本身也是一个受控组件，并且对于 Demo 组件来说它也是受控的讷？
function Input({value, onChange}){ return <input value={value} onChange={onChange}}function Demo(){ const [value, setValue] = useState('shuangxu') return <Input value={value} onChange={e => setValue(e.target.value)} />虽然受控和非受控通常用来指向表单的 inputs，也能用来描述数据频繁更新的组件。
通过上一节受控与非受控组件的边界划分，我们可以简单的分类为：
??什么是派生 state
简单来说，如果一个组件的 state 中的某个数据来自外部，就将该数据称之为派生状态。
大部分使用派生 state 导致的问题，不外乎两个原因：
??getDerivedStateFromProps和componentWillReceiveProps的执行时期
class EmailInput extends React.Component { constructor(props) { super(props); this.state = { email: this.props.email //初始值为props中email }; } componentWillReceiveProps(nextProps) { this.setState({ email: nextProps.email }); //更新时，重新给state赋值 } handleChange = (e) => { this.setState({ email: e.target.value }); }; render() { const { email } = this.state; return <input value={email} onChange={this.handleChange} />; }}点击查看示例
给 Input 设置 props 传来的初始值，在 Input 输入时它会修改 state。但是如果父组件重新渲染时，输入框 Input 的值就会丢失，变成 props 的默认值
即使我们在重置前比较nextProps.email!==this.state.email仍然会导致更新
针对于目前这个小 demo 来说，可以使用shouldComponentUpdate来比较 props 中的 email 是否修改再来决定是否需要重新渲染。但是对于实际应用来说，这种处理方式并不可行，一个组件会接收多个 prop，任何一个 prop 的改变都会导致重新渲染和不正确的状态重置。加上行内函数和对象 prop，创建一个完全可靠的shouldComponentUpdate会变得越来越难。shouldComponentUpdate这个生命周期更多是用于性能优化，而不是处理派生 state。
截止这里，讲清为什么不能直接复制 prop 到 state。思考另一个问题，如果只使用 props 中的 email 属性更新组件讷？
接着上述示例，只使用props.email来更新组件，这样可以防止修改 state 导致的 bug
class EmailInput extends React.Component { constructor(props) { super(props); this.state = { email: this.props.email //初始值为props中email }; } componentWillReceiveProps(nextProps) { if(nextProps.email !== this.props.email){ this.setState({ email: nextProps.email }); //email改变时，重新给state赋值 } } //...}通过这个改造，组件只有在 props.email 改变时才会重新给 state 赋值，那这样改造会有问题吗？
在下列场景中，对拥有两个相同 email 的账号进行切换的时，这个输入框不会重置，因为父组件传来的 prop 值没有任何变化
点击查看示例
这个场景是构建出来的，可能设计奇怪，但是这样子的错误很常见。对于这种反模式来说，有两种方案可以解决这些问题。关键在于，任何数据，都要保证只有一个数据来源，而且避免直接复制它。
从 EmailInput 组件中删除 state，直接使用 props 来获取值，将受控组件的控制权交给父组件。
function EmailInput(props){ return <input onChange={props.onChange} value={props.email}/>}如果想要保存临时的值，需要父组件手动执行保存。
让组件存储临时的 email state，email 的初始值仍然是通过 prop 来接受的，但是更改之后的值就和 prop 没有关系了
function EmailInput(props){ const [email, setEmail] = useState(props.email) return <input value={email} onChange={(e) => setEmail(e.target.value)}/>}在之前的切换账号的示例中，为了在不同页面切换不同的值，可以使用key这个 React 特殊属性。当 key 变化时，React 会创建一个新的组件而不是简单的更新存在的组件(获取更多)。我们经常使用在渲染动态列表时使用 key 值，这里也可以使用。
<EmailInput email={account.email} key={account.id}/>点击查看示例
每次 id 改变的时候，都会重新创建EmailInput，并将其状态重置为最近 email 值。
getDerivedStateFromProps和componentWillReceiveProps 来观察 id 的变化，麻烦但是可行class EmailInput extends Component { state = { email: this.props.email, prevId: this.props.id }; componentWillReceiveProps(nextProps) { const { prevId } = this.state; if (nextProps.id !== prevId) { this.setState({ email: nextProps.email, prevId: nextProps.id }); } } // ...}key值时，也想要重新创建组件。第一种方案就是生成随机值或者递增的值当作key值，另一种就是使用示例方法强制重置内部状态class EmailInput extends Component { state = { email: this.props.email }; resetEmailForNewUser(newEmail) { this.setState({ email: newEmail }); } // ...}在我们的业务开发中，尽量选择受控组件，减少使用派生 state，过量的使用 componentWillReceiveProps 可能导致 props 判断不够完善，倒是重复渲染死循环问题。
在组件库开发中，例如 Ant Design，将受控与非受控的调用方式都开放给用户，让用户自主选择对应的调用方式。比如 Form 组件，我们常使用 getFieldDecorator 和 initialValue 来定义表单项，但是我们根本不关心中间的输入过程，在最后提交的时候通过 getFieldsValue 或者 validateFields 拿到所有的表单值，这就是非受控的调用方式。或者是，我们在只有一个 Input 的时候，我们可以直接绑定 value 和 onChange 事件，这也就是受控的方式调用。
在本文中，首先介绍了非受控组件和受控组件的概念。对于受控组件来说，组件控制用户输入的过程以及 state 是受控组件唯一的数据来源。
接着介绍了组件的调用问题，对于组件调用方而言，组件提供方是否为受控组件。对于调用方而言，组件受控以及非受控的边界划分取决于当前组件对于子组件值的变更是否拥有控制权。
接着介绍了以非受控组件的方式调用受控组件这种反模式用法，以及相关示例。不要直接复制 props 到 state，而是使用受控组件。对于不受控的组件，当你想在 prop 变化时重置 state 的话，可以选择以下几种方式：
key属性，重置内部所有的初始 state最后总结了一下，应当如何选择受控组件还是非受控组件。