React 子组件怎么同步父级的props

Question

想要初始化的时候同步 一个 props 到自己内部，这个状态交给自己管理，然后父级更新的时候也同步props到组件内部，React中怎么实现？

比如一个input组件，父级传过来value进来，这时候给input组件内部管理，用户怎么输入都不会影响父级的value。当点击确定的时候，再把这个状态告诉父级。

Answer 1

`
class Input extends Component{

    constructor(props){
        super(props);
        this.state={
            value:''
        }
        this.changeHandle=this.changeHandle.bind(this);
        this.submit=this.submit.bind(this);
    }
    changeHandle(e){
        this.setState({value:e.target.value});
    }
    submit(e){
        this.props.save(this.state.value);
    }
    render(){
        return(
            <div>
                <input value={this.state.value} onChange={this.changeHandle}/>
                <button onClick={this.submit}>submit</button>
            </div>
        )
    }
    static getDerivedStateFromProps(nextProps,preState){
        if(preState.value){
            return null;
        }
        return{
            value:nextProps.initValue
        }
    }
}
class App extends Component{
    constructor(props){
        super(props);
        this.state={
            value:'init'
        }
        this.changeHandle=this.changeHandle.bind(this);
    }
    changeHandle(value){
        this.setState({value});
    }
    render(){
        return(
            <div>
                <div>父:{this.state.value}</div>
                <Input initValue={this.state.value} save={this.changeHandle}/>
            </div>
        )
    }
}

`
这样试试

Answer 2

简单点，

1. 父组件props 同步到 子组件，然后子组件内部做状态管理，这个你应该回了，就是把props上的值 赋值给 子组件的state
2. 当父组件props方式变化的时候，需要重置 子组件的，这个时候做法比较粗暴的就是，直接重新渲染子组件，
   重新渲染子组件的最简单的做法，就是修改 子组件的 key就好了
3. 子组件值变化了，同步给到父组件，通过props 传递个 更新的方法到子组件就好了

需要注意的问题：
2和3 如果都是通过观察值的变化触发执行，就是个死循环。所以需要想办法把 2和3分开执行