关于javascript:重新认识受控和非受控组件

作者：霜序

校稿：袋鼠云数栈前端团队经营小组

该文章蕴含如下内容

• 受控与非受控组件

  • 非受控组件
  • 受控组件
• 受控和非受控组件边界
• 反模式
• 解决方案

前言

在 HTML 中，表单元素(<input>/<textarea>/<select>)，通常本人会保护 state，并依据用户的输出进行更新

<form>
  <label>
    名字:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="提交" />
</form>

在这个 HTML 中，咱们能够在 input 中随便的输出值，如果咱们须要获取到以后 input 所输出的内容，应该怎么做呢？

受控与非受控组件

非受控组件(uncontrolled component)

应用非受控组件，不是为每个状态更新编写数据处理函数，而是将表单数据交给 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>
    );
  }
}

受控组件(controlled component)

在 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，也能用来形容数据频繁更新的组件。
通过上一节受控与非受控组件的边界划分，咱们能够简略的分类为：

• 如果应用 props 传入数据，有对应的数据处理办法，组件对于父级来说认为是可控的
• 数据只是保留在组件外部的 state 中，组件对于父级来说是非受控的

⁉️什么是派生 state

简略来说，如果一个组件的 state 中的某个数据来自内部，就将该数据称之为派生状态。

大部分应用派生 state 导致的问题，不外乎两个起因：

• 间接复制 props 到 state

• 如果 props 和 state 不统一就更新 state

  间接复制 prop 到 state

  ⁉️getDerivedStateFromProps和 componentWillReceiveProps 的执行期间

• 在父级从新渲染时，不论 props 是否有变动，这两个生命周期都会执行

• 所以在两个办法外面间接复制 props 到 state 是不平安的，会导致 state 没有正确渲染

  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 变动后批改 state

接着上述示例，只应用 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}/>
}

如果想要保留长期的值，须要父组件手动执行保留。

有 key 的非受控组件

让组件存储长期的 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 值。

可选计划

1. 应用 key 属性来做，会使组件整个组件的 state 都重置。能够在 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
     });
   }
     }
     // ...
   }

2. 应用实例办法重置非受控组件
   刚刚两种形式，均是再有惟一标识值的状况下。如果在没有适合的 key 值时，也想要从新创立组件。第一种计划就是生成随机值或者递增的值当作 key 值，另一种就是应用示例办法强制重置外部状态
   父组件应用 ref 调用这个办法，点击查看示例

   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
• 选项一：仅更改某些字段，察看非凡属性的变动(具备唯一性的属性)
• 选项二：应用 ref 调用实例办法

最初总结了一下，该当如何抉择受控组件还是非受控组件。

参考链接

• React 官网——受控组件
• React 官网——非受控组件
• controlled vs. uncontrolled form inputs
• Transitioning from uncontrolled inputs to controlled
• 重新认识受控非受控组件
• 你可能不须要应用派生 state