react中 受控组件和 非受控组件 浅析

一 受控组件

顾名思义，受控 也就是能够被控制，简而言之也就是 该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入。

二 非受控组件

顾名思义，非受控，也就是内部的视图变化，state变化 不依赖于外部的props的传入。

三 举列

class Input extends React.Component<any, any> {
    state = {
       value:''
    };
    constructor(props:any) {
        super(props);
    }
    onChange(event: { target: { value: any; }; }){
        this.setState({
            value:event.target.value
        })
    }
    add(){
        if(!this.state.value) return;
        this.props.getValue({value:this.state.value,completed:false});
        this.setState({
            value:''
        })
    }
    render(){
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.onChange.bind(this)}/>
                <button onClick={this.add.bind(this)}>添加</button>
            </div>
        )
    }
}

Input组件 视图和state变化逻辑只依赖于自身内部的实现，所以Input组件为 非受控组件

input 组件 视图依赖于传入的 state，所以input组件为受控组件