Controlled Component

Controlled Component,顾名思义,受控制的组件。我们先说说它的反面,什么是不受控制的组件。

以 input 标签为例,你在页面的任意位置,或者组件的任意位置放置一个 <input type="text" /> 标签,仅此而已,那么用户就可以在这个 input 标签中输入任何内容,也能立即看到他输入的任何内容

这样无拘无束的 input 标签就是一个不受控制的组件: Uncontrolled Component

而在 React 组件开发中,更常见的场景是,组件的状态是由传递给它的变量里的数据决定了,这是一种单向绑定,比如:

class Demo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value:''
        }
    }
    render() {
        return <input type="text" value={this.state.value} >
    }
}

在 Demo 这个组件中, input 标签值是由 state 里(当然也可以是 props)的 value 变量决定,如果 value 值不发生改变,那么 input 的值也永远不会发生改变,用户的任何输入都是无效的。

那么如何才能使得 value 状态发生改变呢,通过事件更改 state 的状态:

<input type="text" onChange={(e) => {this.setState({ value: e.target.value})}} >

可见 input 操纵 state.value 最终又作用于 input 形成了一个闭环,这也是最基本的单向数据流

而此时的 input 标签则可以算是 Controlled Component

综上,区分一个组件是 controlled 还是 uncontrolled 类型,是通过它的值是是否由组件自己决定来判断的

但问题是在实际的工作中,我们是应该使用 controlled 类型还是 uncontrolled 类型组件?

Controlled or Uncontrolled ?

接下来我们把 controlled component 简称为 CC, uncontrolled component 简称为 UC

我们以最常见的表单场景为例,假设你此时需要提交表单,而表单中有一个 UC,那么你只能通过 ref 的方式获取这个 uc 的值。

通过 ref 的方式是指给这个 UC 添加一个 ref 属性,

<input type="\text" ref="target" />

那么在接下来的代码中通过这个属性值即可完成对这个组件 DOM 的引用,那么在提交时也就能获取到这个 UC 的值:

onSubmit = () => { const value = this.refs.target.value  }

而如果表单的里的组件是 CC,那么立即可以通过 state 访问此时的组件值

onSubmit = () => {const value = this.state.value}

感性上来说,CC 的方式更短平快

理性上看,CC 相比 UC 有以下优势

  • 数据与表现分离
  • 能够格式化用户的输入(比如当输入信息是信用卡号或者日期时,能友好的添加空格)
  • 能够立即对用户输入进行校验(随时禁止用户输入)
  • 数据能够和其他组件共享

UC 同样也能完成上述的工作,只是说如果使用 CC 的话实现起来会更便捷,也更契合。同时 Facebook 官方也是推荐使用 CC 的方式来实现组件

参考资料

results matching ""

    No results matching ""