react如何监听属性的变化
监听属性变化的常用方法
在React中，监听属性（props）变化通常通过生命周期方法或Hooks实现。以下是几种常见方式：
使用useEffect Hook（函数组件）
import React, { useEffect } from 'react';
function MyComponent({ someProp }) {
useEffect(() => {
console.log('someProp changed:', someProp);
// 执行属性变化后的操作
}, [someProp]); // 依赖数组中指定要监听的属性
return <div>{someProp}</div>;
}使用componentDidUpdate（类组件）
class MyComponent extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.someProp !== prevProps.someProp) {
console.log('someProp changed:', this.props.someProp);
// 执行属性变化后的操作
}
}
render() {
return <div>{this.props.someProp}</div>;
}
}使用getDerivedStateFromProps（类组件）
class MyComponent extends React.Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.someProp !== prevState.prevProp) {
return {
prevProp: nextProps.someProp,
// 其他需要更新的状态
};
}
return null;
}
render() {
return <div>{this.props.someProp}</div>;
}
}使用自定义Hook封装逻辑
function usePropChangeTracker(prop, callback) {
const prevPropRef = useRef(prop);
useEffect(() => {
if (prevPropRef.current !== prop) {
callback(prop, prevPropRef.current);
prevPropRef.current = prop;
}
}, [prop, callback]);
}
function MyComponent({ someProp }) {
usePropChangeTracker(someProp, (newVal, oldVal) => {
console.log(`Prop changed from ${oldVal} to ${newVal}`);
});
return <div>{someProp}</div>;
}注意事项
- 避免在监听器中直接修改状态，可能导致无限渲染循环
- 对于复杂对象类型的属性，需要考虑深比较或使用特定比较策略
- 性能敏感场景下，应当谨慎使用属性监听，避免不必要的计算
