当前位置：首页 > React

react如何监听属性的变化

2026-03-11 10:48:44React

监听属性变化的方法

在React中，监听属性（props）变化通常通过生命周期方法或Hooks实现。以下是几种常见的方法：

使用`componentDidUpdate`生命周期方法

在类组件中，可以通过componentDidUpdate来监听props的变化。该方法会在组件更新后被调用，可以比较前后props的差异。

componentDidUpdate(prevProps) {
  if (this.props.someProp !== prevProps.someProp) {
    // 执行某些操作
    console.log('someProp changed:', this.props.someProp);
  }
}

使用`useEffect` Hook

在函数组件中，可以通过useEffect Hook来监听props的变化。将需要监听的props作为依赖项传入useEffect的依赖数组。

import { useEffect } from 'react';

function MyComponent({ someProp }) {
  useEffect(() => {
    // 当someProp变化时执行
    console.log('someProp changed:', someProp);
  }, [someProp]); // 依赖数组中包含someProp
}

使用自定义Hook

可以封装一个自定义Hook来简化props变化的监听逻辑。

import { useEffect, useRef } from 'react';

function usePropChangeCallback(prop, callback) {
  const prevPropRef = useRef();

  useEffect(() => {
    if (prevPropRef.current !== prop) {
      callback(prop, prevPropRef.current);
    }
    prevPropRef.current = prop;
  }, [prop, callback]);
}

function MyComponent({ someProp }) {
  usePropChangeCallback(someProp, (newVal, oldVal) => {
    console.log('someProp changed from', oldVal, 'to', newVal);
  });
}

使用`React.memo`和`arePropsEqual`

对于性能优化，可以通过React.memo和自定义的arePropsEqual函数来监听props变化并决定是否重新渲染。

react如何监听属性的变化

import React from 'react';

const MyComponent = React.memo(
  function MyComponent({ someProp }) {
    return <div>{someProp}</div>;
  },
  (prevProps, nextProps) => {
    // 返回true表示props没有变化，不重新渲染
    // 返回false表示props有变化，重新渲染
    return prevProps.someProp === nextProps.someProp;
  }
);