React `controlled` 及 `uncontrolled` 组件
2019-06-09 12:37
1976 查看
通过 props来设置其 value值的组件便是一种 controlled组件。典型的 form 表单中,像
这些,都可通过 props来设置初始值,同时通过监听其身上的 onChanges事件来将最新的值回传到 React 中。这样,组件的值便始终与 React 中的状态是同步的。 class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.input = React.createRef(); } handleSubmit(event) { alert('A name was submitted: ' + this.input.current.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" ref={this.input} /> </label> <input type="submit" value="Submit" /> </form> ); } } 如上, controlled类型的组件需要在组件中有对应的 state来保存相应的值。同时需要为组件编写值更新后的监听逻辑。 对应的 uncontrolled类型,便方便得多,它其实就是普通的 HTML 标签。 对于 uncontrolled类型的组件,通过 ref 来获取它身上的 value值。 class Form extends Component { handleSubmitClick = () => { const name = this._name.value; // do something with `name` } render() { return ( <div> <input type="text" ref={input => this._name = input} /> <button onClick={this.handleSubmitClick}>Sign up</button> </div> ); } } 可以看出, uncontorlled类型的组件,其值是存储在 DOM 节点上的,在需要的时候,比如表单提交时,再通过 ref 获取到相应的 DOM 节点取出它的值。 对比之下, controlled类型的组件是时实地将最新的值推送(push)到 React 中,而 uncontrolled类型的组件是在需要的时候去拉取(pull)它身上的值。 对比与取舍虽然 ref在官方文档中是不推荐的,也不代表说 uncontrolled类型的组件就不能使用;虽然 controlled类型的组件这种,数据走 state 更新和维护的方式,更加 React 一点,也不是说在编写表单时就需要全部使用 controlled类型的组件。两者在不同情况下可以自由取舍,完全看需要。 controlled类型的组件虽然写起来会比较麻烦,其值与 React state 始终同步,所以有一些优点,
所以如果需要上述这些东西,可以考虑 controlled类型来编写组件,而 uncontrolled类型代码上写起来很简洁点,少了 state 及事件绑定,可用在功能简单,或者 React 快速上手,快速实现功能的场景。 相关资源 |
相关文章推荐
- React文档(五)组件和属性
- React-组件
- React组件生命周期详解
- 从零开始 React Native(6) 计时器案例(模块化_组件封装)有图有demo
- React源码分析2 — 组件和对象的创建(createClass,createElement)
- react 无状态组件与纯组件(pureComponent)
- React通过父组件传递类名给子组件的方法
- React Native导航组件react-navigation(TabNavigator+StackNavigator实现界面间跳转,Tab切换)
- React 组件基本使用(3) ---父子组件之间的通信
- React 创建组件的 3种方式
- react的组件和jsx语法
- react 父子组件之间的通信和函数调用
- React组件生命周期过程说明
- React Native 简单的组件
- React native Model组件的使用
- ReactNative ViewPageAndroid组件详解
- 创建React组件的几种方式的对比
- React 组件Component,元素Element和实例Instance的区别
- React Native 中 TextInput 组件和中文输入冲突
- Job-react 基础知识回顾之组件内部state