React如何监听数据
监听数据变化的方法
useState + useEffect
通过useState定义状态，使用useEffect监听状态变化。当依赖项数组中的状态更新时，触发副作用函数。
const [data, setData] = useState(initialValue);
useEffect(() => {
console.log('数据变化:', data);
}, [data]); // 依赖项为datauseReducer
适用于复杂状态逻辑。useReducer返回的state变化时，可通过useEffect监听。
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
console.log('state更新:', state);
}, [state]);Context API + useContext
结合Context.Provider的value变化与useContext，实现跨组件监听。
const DataContext = createContext();
const value = { data, setData };
<DataContext.Provider value={value}>
{children}
</DataContext.Provider>;
// 子组件中
const { data } = useContext(DataContext);
useEffect(() => { /* 监听data */ }, [data]);自定义Hook
封装监听逻辑为可复用的Hook。
function useDataListener(data) {
useEffect(() => {
console.log('自定义监听:', data);
}, [data]);
}第三方状态管理库
如Redux、MobX等，提供更精细的监听机制。以Redux为例：
useSelector((state) => state.someData); // 自动响应store变化注意事项
- 避免在
useEffect中直接修改依赖项，否则可能导致无限循环。 - 对于对象或数组等引用类型，需确保状态更新时返回新引用（如使用展开运算符
...或immer库）。
