6. 状态提升 & 受控组件和非受控组件

状态提升

状态提升其实很简单，就是同一个数据，有很多组件要使用，所以就把这个数据放到这些组件共同的父组件中进行管理，然后再将父组件中管理的数据通过props传递给子组件

import React,{Component} from 'react'

class Child1 extends Component {
    render(){
        return (
        <div>{this.props.name}</div>
        )
    }
}

class Child2 extends Component {
    render(){
        return (
        <div>{this.props.name}</div>
        )
    }
}

export default class up extends Component{
    state={
        name:"React"
    }

    render(){
        return (
            <>
                <Child1 name={this.state.name}></Child1>
                <Child2 name={this.state.name}></Child2>
            </>
        )
    }
}

受控组件和非受控组件

受控组件

受控组件，顾名思义就是被控制，受控制的组件，如果一个组件的状态是被state完全控制，并且只能使用setState方法进行更新的话，这个组件就是一个受控组件。

在HTML中，像是input、textarea、select这类表单元素，他们本身会维护自身的状态，并且根据用户的输入进行更新，但是将他们变成受控组件后，如果不使用setState方法，用户是无法输入的。

受控组件的实现原理很简单：通过state初始化表单的默认值，每当表单的值发生变化，调用onChange事件处理，事件处理器通过合成事件对象e拿到改变后的状态，并更新应用的state，setState触发视图的重新渲染，完成表单组件的值的更新。

// 将用户输入转变为大写
<input
    type="text"
    value={this.state.value}
    onChange={(e) => {
        this.setState({
            value: e.target.value.toUpperCase(),
        });
    }}
/>

非受控组件

非受控组件也就是不瘦react控制的组件，比如不做受控处理的input标签等。