React 18 Hooks与组件通信全解析，Postman 学习笔记 IV：Workflow、Newman 与 Mock Server 实战技巧。

React 18 学习笔记五Hooks 与组件通信总结常用的 React Hooks 函数useState用于在函数组件中添加局部状态。接受一个初始状态值返回当前状态和更新状态的函数。const [count, setCount] useState(0);useEffect处理副作用操作如数据获取、订阅或手动 DOM 操作。可以指定依赖项数组控制执行时机。useEffect(() { document.title Count: ${count}; }, [count]);useContext简化组件间共享状态避免逐层传递 props。需配合createContext使用。const value useContext(MyContext);useReducer适用于复杂状态逻辑类似于 Redux 的 reducer 模式。const [state, dispatch] useReducer(reducer, initialState);useCallback缓存函数避免子组件不必要的重渲染。const memoizedCallback useCallback(() doSomething(a, b), [a, b]);useMemo缓存计算结果优化性能。const memoizedValue useMemo(() computeExpensiveValue(a, b), [a, b]);useRef创建可变引用对象常用于访问 DOM 或保存可变值。const inputRef useRef(null);常用的 React-Redux Hooks 函数useSelector从 Redux store 中提取状态数据。const count useSelector(state state.counter.value);useDispatch获取 dispatch 函数用于触发 Redux action。const dispatch useDispatch(); dispatch(increment());useStore直接访问 Redux store 实例不常用。const store useStore();React 中的组件通信方式父组件向子组件通信通过 props 传递数据或函数。function Parent() { const data Hello; return Child message{data} /; }子组件向父组件通信通过父组件传递的回调函数。function Parent() { const handleChildEvent (data) console.log(data); return Child onEvent{handleChildEvent} /; }兄弟组件通信通过共同的父组件提升状态或使用 Context API、Redux 等状态管理工具。跨层级组件通信使用 Context API 或全局状态管理库如 Redux、MobX。const MyContext createContext(); function App() { return ( MyContext.Provider value{{ data: Shared }} ComponentA / /MyContext.Provider ); }事件总线Event Bus通过自定义事件发布订阅模式实现通信较少使用。const eventEmitter new EventEmitter(); eventEmitter.emit(event, data); eventEmitter.on(event, callback);总结React Hooks 提供了更简洁的状态管理和副作用处理方式而 React-Redux Hooks 进一步简化了 Redux 的使用。组件通信需根据场景选择合适的方式简单场景用 props 和回调复杂场景可引入 Context 或状态管理库。https://github.com/Jamieeffie/as8_47h1https://github.com/Jamieeffie/as8_47h1/blob/main/README.mdhttps://raw.githubusercontent.com/Jamieeffie/as8_47h1/main/README.mdhttps://github.com/Sallyarner/89r_cs29https://github.com/Sallyarner/89r_cs29/blob/main/README.md