react subcomponent 如何修改 props？

Question

当一个子组件需要改修父组件传来的props时候（想了一下的确有这种场景），
可以在初始化的时候赋值给自己的 state

constructor (props) {
    this.state = {
        foo: props.foo
    }
}

然后在组件内部操作 state, 但是如果遇到父组件更新 props, 那么子组件的 constructor 是不会再调用的，那么就要这么写

componentWillReceiveProps (nextProps) {
    this.setState({ foo: nextProps.foo })
}

这样写是不是有点麻烦，还是我没有理解其中的真谛。

Answer 1

1. props 是只读的
2. 你可以在 render 里进行转换
3. 你这样用是不对的，按照你这样，经过 props 转换的 state 既可以由子组件改变，也会被父组件的 props 改变，不符合 react 的设计原则。

Answer 2

子组件通过父组件传下来的方法修改父组件自身的 state 。

Answer 3

因为 foo 是由父组件传过来的，可以直接使用 props.foo。如果需要修改 foo 的值，建议将修改 foo 的方法放到父组件，这样能避免 子组件和 父组件同时修改 foo的值引起冲突。通过传的方法修改传过来的值，降低父组件和子组件的耦合性，也符合 React 数据自顶向下流动这个规范