React 子组件监控父组件

本文详细介绍了React组件中的静态方法getDerivedStateFromProps的使用,当props变化时,该方法会被调用来更新state,但不推荐直接访问组件属性。重点讨论了如何根据props更新state的策略,并强调若props变化不影响state,则应返回null。
static getDerivedStateFromProps (nextProps, prevState) {
  return {
    pageNo: 1,
    pageSize: 8
  };
}

父组件传值到子组件props中后,props发生变化会自动调用此方法。

其中,pageNo和 pageSize为子组件state中的属性,但并不需要调用setstate。

getDerivedStateFromProps是一个静态函数,也就是这个函数不能通过this访问到class的属性,也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断,根据新传入的props来映射到state。

需要注意的是,如果props传入的内容不需要影响到你的state,那么就需要返回一个null,这个返回值是必须的,所以尽量将其写到函数的末尾。

 

### 如何在 React监听父组件传递 Props 的变化 为了有效地响应来自父组件的 `props` 更新,在现代版本的 React 应用程序中建议采用两种主要方法之一: #### 使用 `useEffect` 钩子(适用于函数式组件) 对于基于钩子的功能组件来说,可以利用 `useEffect` 来检测特定 prop 是否发生了更改。当指定依赖项列表里的任何一个变量发生变化时,都会触发 effect 函数执行。 ```javascript import React, { useState, useEffect } from 'react'; function ChildComponent({ message }) { const [localMessage, setLocalMessage] = useState(message); useEffect(() => { console.log('Prop changed:', message); setLocalMessage(message); // 当message更新时同步本地状态 }, [message]); // 将message加入依赖数组以便追踪其变更 return ( <div> Received Message: {localMessage} </div> ); } export default ChildComponent; ``` 这种方法不仅简洁明了而且易于维护,同时也遵循了最新的最佳实践指南[^4]。 #### 利用类组件中的生命周期方法 针对传统的类组件,则应优先考虑使用 `componentDidUpdate` 或静态方法 `getDerivedStateFromProps` 而不是已弃用的 `UNSAFE_componentWillReceiveProps` 方法来实现相同功能[^1]。 ##### 实现方式一:覆写 `componentDidUpdate` 每当接收到新的 props 后会调用此方法,允许开发者在此处比较前后两次接收的数据并作出相应调整。 ```javascript class ChildClassComponent extends React.Component { state = { msg1: '' }; componentDidUpdate(prevProps) { if (prevProps.msg !== this.props.msg) { this.setState({ msg1: this.props.msg }); } } render() { return <div>{this.state.msg1}</div>; } } ``` ##### 实现方式二:定义 `getDerivedStateFromProps` 这是一个静态方法,它会在每次渲染之前被调用,包括首次挂载期间。该方法接受两个参数——即将应用的新 props 和当前的状态,并返回一个对象形式的状态更新或 null 表示不需要任何修改。 ```javascript static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.item.width !== prevState.width) { return { width: nextProps.item.width }; } return null; } ``` 这种方式有助于保持逻辑清晰分离,同时避免潜在的竞争条件问题[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值