react通过新的props重新渲染

1、在render直接使用props

这种方式，父组件改变props后，子组件重新渲染，由于直接使用的props，所以我们不需要做什么就可以正常显示最新的props

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

2、将props转换成的state

这种方式，由于我们使用的是state，所以每当父组件每次重新传递props时，我们需要重新处理下，将props转换成自己的state，这里就用到了 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.props.someThings}</div>
    }
}

对于React16.3之后的版本 使用以下函数

static getDerivedStateFromProps(nextProps, prevState) {
// Store prevId in state so we can compare when props change.
return {
    sourceData: nextProps.sourceData || [],
};