关于react.js: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标签等。