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

相关推荐
独立开阀者_FwtCoder2 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
snakeshe10103 分钟前
优化 Mini React:实现组件级别的精准更新
前端
前端小盆友3 分钟前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
京东云开发者9 分钟前
行云前端重构之路:从单体应用到 Monorepo 的血泪史
前端
whale fall11 分钟前
npm install安装不成功(node:32388)怎么解决?
前端·npm·node.js
疯狂动物城在逃flash20 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
前端小巷子26 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生26 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
JohnYan26 分钟前
Bun技术评估 - 07 S3
javascript·后端·bun
Mintopia27 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js