关于react父组件更新，子组件无更新现象分析

今天在封装一个滑动选择组件遇到个怪事，父组件状态记忆之前的选择，重新进入父组件所在界面那么更新之前选择的状态，但是组件并没有更新到这个状态。多次检查发现子组件没有随父组件的更新而更新。
子组件使用如下：

<Picker
    title={this.state.title}
    data={this.state.datalist}
    cols={1}
    value={this.state.valueArr}
    onChange={(v)=> this.onChange(v)}
    onOk={(v) => this._selectDj(v)}
>

关键点在于 value={this.state.valueArr}，使用的是state值，不是props值，所以子组件没有随父子组件一起更新。

查阅资料：子组件显示父组件传来的props 做更新存在两种方法：

1、子组件直接使用props值

class Child extends Component {
    render() {
        return <div>{this.props.someThings}</div>
    }
}

2、在将 status 通过 componentWillReceiveProps 生命周期方法更新

class Child extends Component {
      constructor(props) {
        super(props);
        this.state = {
          someThings: props.someThings
        };
      }
      componentWillReceiveProps(nextProps) {
        this.setState({someThings: nextProps.someThings});
      }
      render() {
        return <div>{this.state.someThings}</div>
      }
    }

关于react父组件更新，子组件无更新现象分析

推荐阅读更多精彩内容