0%

react通过新的props重新渲染

1、在render直接使用props

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

1
2
3
4
5
class Child extends Component {
render() {
return <div>{this.props.someThings}</div>
}
}

2、将props转换成的state

这种方式,由于我们使用的是state,所以每当父组件每次重新传递props时,我们需要重新处理下,将props转换成自己的state,这里就用到了 componentWillReceiveProps(已废弃)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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之后的版本 使用以下函数

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

欢迎关注我的其它发布渠道