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

相关推荐
李昊哲小课4 分钟前
安装 npm/pnpm/yarn 换国内镜像 统一目录管理全局包+缓存
前端·缓存·npm·pnpm·yarn
挖稀泥的工人5 分钟前
AI 打字跟随优化
前端·javascript·vue.js
Ruihong5 分钟前
你的 Vue 3 defineEmits(),VuReact 会编译成什么样的 React?
vue.js·react.js·面试
jiayong236 分钟前
第 11 课:把筛选条件同步到 URL
开发语言·前端·javascript
Mintopia11 分钟前
性能优化的错觉:你优化的,可能根本不是瓶颈
前端
Mintopia11 分钟前
一次讲清"慢"的本质:CPU、IO、网络到底谁在拖后腿
javascript
05Nuyoah12 分钟前
第一阶段:HTML的笔记
前端·笔记·html
DazedMen13 分钟前
前端自定义接口返回,想咋玩就咋玩
前端·vue·接口拦截