React 中 受控组件和非受控组件区别

React 中 受控组件和非受控组件区别

广义的来说：

react 组件的数据渲染是否被调用者传递的 props 完全控制，控制则为受控组件，否则为非受控组件

非受控组件：

非受控组件将真实数据存在 DOM 节点中，所以在使用非受控组件时，有时候反而更容易同时集成React 和 非 React 代码，如果不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量，否则，就使用受控组件

非受控方式能简化代码，比较适用于就在本组件的数据处理，如果要关联到要把数据传出去的话，其中不会再次调用 setState 函数，也就不会将更新的值传过去，有缺陷

受控组件：

代码示例：

非受控组件：

import React, {Component} from 'react';

// 这一节主要是说 使用ref 的方式来获取表单中的值，是采用的非受控方式
// 感觉 DOM操作和 react 操作糅合在了一起

class UnControl extends Component {
  myusername=React.createRef();
;  render() {
    return (
        <div>
          <h1>登录页</h1>
          {/*需求：让 input 框有默认值*/}
          <input type="text" ref={this.myusername} defaultValue="哈哈哈哈"/>

          <button onClick={()=>{
            console.log(this.myusername.current.value)
          }}>登录</button>

          <button onClick={()=>{
            this.myusername.current.value=""
          }}>重置</button>

        </div>
    );
  }
}

export default UnControl;

受控组件：

import React, {Component} from 'react';

// 受控组件就是把 输入框的值用一个状态 username 来保存起来

class ControlComponent extends Component {

  state = {
    username: '哈哈哈'
  }

  render() {
    return (
        <div>
          <h1>登录页</h1>
          {/*需求：让 input 框有默认值*/}
          {/*value 是受控的，onChange 和 onInput 是一样的效果*/}
          <input type="text" value={this.state.username} onChange={(evt) => {
            // console.log(evt.target.value);
            this.setState({
              username: evt.target.value
            })
          }}/>

          <button onClick={() => {
            console.log(this.state.username)
          }}>登录
          </button>

          <button onClick={() => {
            this.setState({
              username: ''
            })
          }}>重置
          </button>


          {/*最关键的在这： 受控组件传值的时候，值是响应式的，能够将最新的值传给子组件*/}
          {/*<Child myvalue={this.state.username}></Child>*/}


        </div>
    );
  }
}

export default ControlComponent;