react如何监听props变化

监听 props 变化的常用方法

在 React 中，可以通过以下方式监听 props 的变化：

使用 useEffect 钩子

import { useEffect } from 'react';

function MyComponent({ someProp }) {
  useEffect(() => {
    console.log('someProp changed:', someProp);
    // 执行 props 变化后的逻辑
  }, [someProp]); // 依赖数组中指定要监听的 props
}

类组件中使用 componentDidUpdate

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.someProp !== prevProps.someProp) {
      console.log('someProp changed:', this.props.someProp);
      // 执行 props 变化后的逻辑
    }
  }
}

使用自定义比较逻辑

useEffect(() => {
  // 当 props 满足特定条件时触发
  if (someProp > 10) {
    console.log('someProp is greater than 10');
  }
}, [someProp]);

性能优化建议

避免在每次渲染时都执行副作用，确保依赖数组中只包含必要的 props。对于复杂对象的比较，可能需要使用深比较或特定字段的比较。

注意事项

直接修改 props 会导致警告，React 遵循单向数据流原则。如果需要基于 props 派生状态，考虑使用 useState 或 useMemo。