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

相关推荐
Lj2_jOker4 小时前
QT 给Qimage数据赋值,显示异常,像素对齐的坑
开发语言·前端·qt
csj504 小时前
前端基础之《React(7)—webpack简介-ESLint集成》
前端·react
Jonathan Star4 小时前
CSS margin 折叠现象的实际代码示例
javascript·css·css3
咚咚咚小柒5 小时前
【前端】Webpack相关(长期更新)
前端·javascript·webpack·前端框架·node.js·vue·scss
2501_916008895 小时前
前端工具全景实战指南,从开发到调试的效率闭环
android·前端·小程序·https·uni-app·iphone·webview
诸葛韩信5 小时前
Webpack与Vite的常用配置及主要差异分析
前端·webpack·node.js
IT_陈寒5 小时前
Vite 5震撼发布!10个新特性让你的开发效率飙升200% 🚀
前端·人工智能·后端
一路向前的月光5 小时前
uniapp(5)滚动列表scroll-view
前端·javascript·uni-app
Hilaku5 小时前
就因为package.json里少了个^号,我们公司赔了客户十万块
前端·javascript·npm
晴殇i5 小时前
尤雨溪创立的 VoidZero 完成 1250 万美元 A 轮融资,加速整合前端工具链生态
前端·vue.js