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 函数会被调用,然后可以进行相应的处理。

相关推荐
SuperEugene9 分钟前
Vue3 + Element Plus 全局 Message、Notification 封装与规范|Vue生态精选
前端·javascript·vue.js
掘金安东尼10 分钟前
活动落地页效率翻倍:RollCode 这次更新有点猛
前端·低代码·面试
北冥有鱼其名为坤11 分钟前
诡异!vite+vue3 项目图片无法显示,我怀疑人生…
前端
FE_winter13 分钟前
OpenClaw Skills 进阶实战:前端开发者的 AI 技能库搭建指南
前端·后端·程序员
wordbaby29 分钟前
小白也能看懂:小程序 Canvas 给图片添加水印的终极指南
前端·canvas
Mapmost30 分钟前
“汛”速响应:流域洪水仿真分析,如何实现淹没过程的精准推演?
前端
梁大虎32 分钟前
Electrobun 开发必看:CEF 依赖下载失败?手动解压一招搞定!
前端·javascript·后端
青青家的小灰灰43 分钟前
拒绝 Prop Drilling 与隐式耦合:Vue 组件通讯的全景指南与最佳实践
前端·javascript·vue.js
代码老中医43 分钟前
我赌5年后,90%的CRUD页面都是AI生成的
前端
bluceli44 分钟前
前端监控与错误追踪实战指南:构建稳定应用的终极方案
前端·监控