值发生改变时调用componentWillReceiveProps

最新推荐文章于 2023-12-18 11:11:35 发布

证证乐乐

最新推荐文章于 2023-12-18 11:11:35 发布

阅读量474

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/fhkkkbfgggjk/article/details/102826201

版权

react 专栏收录该内容

22 篇文章

订阅专栏

本文详细探讨了React中组件在接收到新的props时，如何触发componentWillReceiveProps生命周期方法。理解这个方法对于优化性能和管理组件状态至关重要。通过实例，解释了如何在props变化时进行条件检查和状态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	/**
	 * 组件的生命周期分成三个状态：
	 * Mounting：已插入真实 DOM
	 * Updating：正在被重新渲染
	 * Unmounting：已移出真实 DOM
	 * React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
	 *
	 * componentWillMount()
	 * componentDidMount()
	 * componentWillUpdate(object nextProps, object nextState)
	 * componentDidUpdate(object prevProps, object prevState)
	 * componentWillUnmount()
	 *
	 * 此外，React 还提供两种特殊状态的处理函数。
	 * componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
	 * shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
	 *
	 * 注意：在 Updating 中调用setState方法会导致死循环
	 */

/**
	 *  在组件接收到一个新的 prop (更新后)时被调用。
	 *  这个方法在初始化render时不会被调用。
	 * @param newProps
	 */
	componentWillReceiveProps(nextProps) {
	// 当之前的值不等于现在传入的值时
		if (this.props.value != nextProps.value) {
			let { value } = nextProps;
			this.setState({
				year: value,
				newYear: value
			});
		}
	}