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元件為受控元件