React的受控组件和非受控组件

一、受控组件
表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似.
受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验.
受控组件只有继承React.Component才会有状态.
受控组件必须要在表单上使用onChange事件来绑定对应的事件.

import React, { Component } from 'react'
export default class Shoukong extends Component {
    // 这样的写法也是声明在实例上的对象
    state = {
        username: "ff",
       // 给组件状态设置默认值，在实时修改时进行校验
    }
    // e为原生的事件绑定对象
    handleChange = (e) => {
        // 获取原生对象上的属性
        let name = e.target.name;
        this.setState({
            username: e.target.value
        })
    }
 
    render() {
        return (
            <div>
                <p>{this.state.username}</p>
                用户名：<input
                    type="text"
                    value={this.state.username}
                    onChange={this.handleChange} />
            </div>
        )
    }
}

受控组件更新state的流程
1、 可以通过初始state中设置表单的默认值
2、每当表单的值发生变化时，调用onChange事件处理器
3、事件处理器通过事件对象event拿到改变后的状态，并更新组件的state
4、通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新

二、非受控组件
在虚拟DOM节点上声明一个ref属性，并且将创建好的引用赋值给这个ref属性

react会自动将输入框中输入的值放在实例的ref属性上

import React, { Component } from 'react'
export default class Feishou extends Component{
constructor(){
    super();
    // 在构造函数中创建一个引用
    this.myref=React.createRef();
}
handleSubmit = (e) => {
    // 阻止原生默认事件的触发(刷新)
    e.preventDefault();
    console.log(this.myref.current.value);
}
render() {
    return (
        <form onSubmit={this.handleSubmit}>
            {/* 自动将输入框中输入的值放在实例的myref属性上 */}
           <input
                type="text"
                ref={this.myref}
            />
             <button>提交</button> {/* 手动提交 */}
        </form>
    )
}
}

非受控组件在底层实现时是在其内部维护了自己的状态state，这样表现出用户输入任何值都能反应到元素上。

三、对比受控组件和非受控组件的输入流程：

• 非受控组件： 用户输入A => input 中显示A
• 受控组件： 用户输入A => 触发onChange事件 => handleChange 中设置 state.name = “A” => 渲染input使他的value变成A

正式因为这样，使得 React 的 state 成为唯一数据源。对于受控组件来说，输入的值始终由 React 的 state 驱动。

所以官方强烈推荐使用受控组件，因为它能更好的控制组件的生命流程。

注意：
受控组件的两个要点：
组件的value属性与React中的状态绑定
组件内声明了onChange事件处理value的变化
非受控组件更像是传统的HTML表单元素，数据存储在DOM中，而不是组件内部，获取数据的方式是通过ref引用
 尽可能使用受控组件
受控组件是将状态交由React处理，可以是任何元素，不局限于表单元素
对于有大量表单元素的页面，使用受控组件会使程序变得繁琐难控，此时使用非受控组件更为明智
在受控组件中，数据流是单向的(state是变化来源)，因此在改变state时都应该使用setState，而不要强制赋值
Refs不能用于函数式组件，因为函数式组件没有实例
在函数式组件内部，是可以使用Refs的