react父组件props变化的时候子组件怎么监听?

在 React 中,子组件可以通过 componentDidUpdate 钩子函数来监听父组件的 props 变化。这个钩子函数会在组件更新之后调用,可以通过比较前后的 props 值来判断是否发生了变化。

以下是一个示例代码,展示了父组件 props 变化时子组件的监听:

javascript 复制代码
import React, { Component } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  }

  render() {
    const { value } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>Increase</button>
        <ChildComponent value={value} />
      </div>
    );
  }
}

class ChildComponent extends Component {
  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      console.log('Prop value has changed');
    }
  }

  render() {
    const { value } = this.props;

    return (
      <div>
        <p>Value: {value}</p>
      </div>
    );
  }
}

export default ParentComponent;

在上面的示例中,当父组件的 value 值发生变化时,子组件的 componentDidUpdate 函数会被调用,然后可以进行相应的处理。

相关推荐
一条上岸小咸鱼5 分钟前
Kotlin 基本数据类型(五):Array
android·前端·kotlin
zzywxc7877 分钟前
详细探讨AI在金融、医疗、教育和制造业四大领域的具体落地案例,并通过代码、流程图、Prompt示例和图表等方式展示这些应用的实际效果。
开发语言·javascript·人工智能·深度学习·金融·prompt·流程图
大明888 分钟前
用 mouseover/mouseout 事件代理模拟 mouseenter/mouseleave
前端·javascript
小杨梅君9 分钟前
vue3+vite中使用自定义element-plus主题配置
前端·element
一个专注api接口开发的小白14 分钟前
Python + 淘宝 API 开发:自动化采集商品数据的完整流程
前端·数据挖掘·api
林太白14 分钟前
Nuxt.js搭建一个官网如何简单
前端·javascript·后端
晴空雨15 分钟前
一个符号让 indexOf 判断更优雅!JavaScript 位运算的隐藏技巧
前端·javascript
摸着石头过河的石头15 分钟前
前端调试全攻略:从PC到移动端的一站式实战指南
前端·debug
小猪猪屁17 分钟前
🚀 用 Nuxt3 打造公司官网:一场从 0 到 1 的实战冒险
前端
前端snow29 分钟前
前端无接口实现Table导出Excel的两种方案(附完整代码)
javascript·vue.js·react.js