react受控组件和非受控组件

发布日期: 2021-12-08

更新日期: 2021-12-08

文章字数: 970

阅读时长: 3 分

阅读次数:

一、受控组件

在 HTML 中，表单元素的标签

<input>、<textarea>、<select>等的值改变通常是根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新，以这种由 React 控制的输入表单元素而改变其值的方式，称为受控组件。

比如，给表单元素 input 绑定一个 onChange 事件，当 input 状态发生变化时就会触发 onChange 事件，从而更新组件的 state。

下面就举一个 input 输入框的例子来进一步了解下：

import React, { Component, Fragment } from "react";

export default class Demohooks extends Component {
  state = {
    ChangeValue: "",
  };
  onChangeInput = (e) => {
    this.setState({
      ChangeValue: e.target.value,
    });
  };
  render() {
    return (
      <Fragment>
        <h1>受控组件</h1>
        用户名：
        <input value={this.state.ChangeValue} onChange={this.onChangeInput} />
      </Fragment>
    );
  }
}

每当输入框的输入内容发生变化时，都会被写入到组件的 state 中，这种组件在 React 中被理解为受控组件。
受控组件的值，始终是由 React 的 state 驱动的。
这种组件的数据是由 React 组件进行管理的，所以在大多数情况下，官方推荐使用受控组件。

接下来让我们去了解下受控组件更新 state 的简要流程：

ChangeValue 开始是空字符串’’，当键入 1，并 handleNameChange 获取 1 和调用 setState。然后，该输入被重新呈现为具有的值 1。
当键入 2，handleNameChange 获取 12 并设置该状态的值。现在再次重新渲染输入 value=”12”。
这也意味着表单组件可以立即响应输入更改;

可见效果：

当注释 this.setState({ChangeValue: e.target.value}); 这行代码，文本框再次输入时，页面不会重新渲染，所产生效果即是文本框输入不了值，即文本框值的改变受到 setState()方法的控制，在未执行时，不重新渲染组件。

二、非受控组件

在官网的简述为：要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref 来从 DOM 节点中获取表单数据。
因为非受控组件将真实数据储存在 DOM 节点中，所以在使用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量。否则，你应该使用受控组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_非受控组件</title>
</head>
<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">


        //创建组件
        class Login extends React.Component{
            handleSubmit = (event)=>{
                event.preventDefault() //阻止表单提交
                const {username,password} = this
                alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
            }
            render(){
                return(
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input ref={c => this.username = c} type="text" name="username"/>
                        密码：<input ref={c => this.password = c} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        //渲染组件
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>
</body>
</html>