React 受控组件与非受控组件

关于受控组件与非受控组件笔记

受控组件的用途
对于受控组件来说，每一次 state(状态) 变化都会伴有相关联的处理函数。这使得可以直接修改或验证用户的输入。比如，如果我们希望强制 name 的输入都是大写字母，可以这样来写 handleChange 方法：

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()});
}

常用于form表单元素，需要为每一个可更改的数据提供事件处理器，并通过 React 组件管理所有输入状态。另外，必须通过state设定初始值，如input value，简而言之，受控组件由React进行管理和控制渲染，而非受控组件则由浏览器对DOM元素进行管理和渲染，通过ref获取相关的元素，对元素的属性值等进行操作，而不通过state进行管理

非受控组件
状态和事件由浏览器或借助refs进行管理

const MyComponent extends Component {  
    onClick() {  
        const input = this.refs.myInput;  
        const value = input.value;  
        // do something with the value  
    }  
  
    render() {  
        return <input type="text" ref="myInput" />  
    }  
}  

常见问题

首次渲染时，若表单元素如input的value= this.state.name 未被设置, 值将默认赋值为undefined, 当ReactDOM检查一个field是否受控是，它会检查[if value != null]
(https://github.com/facebook/react/blob/751b76e3518883c31b6105736c2b13839863fdef/src/renderers/dom/stack/client/wrappers/ReactDOMInput.js#L28) , 对于 undefined == null 为true, 被判断为非受控表单，故若是受控表单元素未赋初始值，将会产生警告。

延伸阅读

下面两篇文章对详细的受控表单等讲述很清楚，后一篇则通过会话的方式形象生动的描述的两者的区别，有兴趣的可以深入阅读
React.js Forms: Controlled Components
React "controlled" vs "uncontrolled" inputs explanation
其他
)

转载于:https://www.jianshu.com/p/861a7a1090f0