react声明周期 getDerivedStateFromProps 的使用详解

前言

日常积累，欢迎指正

正文

错误代码段及错误描述

constructor(props: IProps) {
		super(props)
		this.state = {
			mode: this.props.mode ? this.props.mode : 'middle'
		}
	}

	static getDerivedStateFromProps(nextProps, prevState) {
		let derivedStates
		if (nextProps.mode !== prevState.mode) {
			derivedStates = {
				mode: nextProps.mode
			}
		}
		return derivedStates
	}

	changeMode =() => {
		this.setState({
			mode : 'min'
		})
	}

错误描述:在使用 react 新声明周期做开发时发现我可以通过外部传递的 props.mode 来修改 UI 但是在组件内部执行 this.setState() 方法时却不能达到预期的效果？？

解决办法

需要一个hack来辅助：绑定props到state上

static getDerivedStateFromProps(nextProps, prevState) {
		const { mode } = nextProps
		const {props} = prevState
		if (mode !== props.mode) {
			return {
				mode,
				props : {
					mode
				}
			}
		}
		return null
	}

原因描述

这与新生命周期的特性相关，现在比较忙没有时间做赘述，以后有时间做补充 或者可以直接查看weixin_34007886 的原创文章 - 拥抱react新生命周期–getDerivedStateFromProps