From 6eb568e1fc5c7bc531b8af7afce54d748aa55860 Mon Sep 17 00:00:00 2001 From: darkless456 Date: Thu, 4 Sep 2025 08:45:52 +0000 Subject: [PATCH] chore: update study note to 7f79901cef0ce44ef56fed22e57dd69d1cb7450d --- .../stenography/weekly-fe-perusal/note-p3.md | 46 ++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/docs/learning-note/stenography/weekly-fe-perusal/note-p3.md b/docs/learning-note/stenography/weekly-fe-perusal/note-p3.md index 74092a8..ba47c3f 100644 --- a/docs/learning-note/stenography/weekly-fe-perusal/note-p3.md +++ b/docs/learning-note/stenography/weekly-fe-perusal/note-p3.md @@ -462,6 +462,50 @@ self.addEventListener('fetch', event => { - Caches API 只能在 HTTPS 环境下使用,或者在 localhost 上进行开发。 - 缓存的大小是有限制的,浏览器会根据策略自动清理旧的缓存。 +## 89.精读《如何编译前端项目与组件》 -
last modified at September 3, 2025 18:23
+- 项目构建,使用复杂的构建约束策略,只要最终结果符合浏览器规范就行 +- 组件构建,采用相对简单的办法,确保代码的通用性 + +## 96.精读《useEffect 完全指南》 + +函数组件特性: +- 每次render 都有自己的 state 和 props 快照(capture value) +- 每次render 都有自己的事件处理函数快照 +- 每次render 都有自己的 effect 快照 +- `useRef` 可以绕过快照限制,实现跨 render 共享数据 +- `useEffect` 依赖项变化时,执行 effect 回调。依赖项可以是 state、props 或者其他变量(例如对象的引用) + +## 97.精读《编写有弹性的组件》 + +1. 不要阻塞数据流,不要将接收到的props 本地化 +2. 不要阻塞副作用的数据流 +3. 不要因为性能优化而阻塞数据流(类组件中自定义的 shouldComponentUpdate) +4. 时刻准备渲染 +5. 不要有单例组件 +6. 隔离本地状态 + +```js +// 优化小手段:如果父组件依赖比较多子组件的反向控制,可以使用 useReducer 代替 useState +const AppDispatchContext = React.createContext(null); +const appReducer = (state, action) => { + switch (action.type) { + // ... + } + return newState; +} + +const App = memo(function App(props) { + const [state, dispatch] = useReducer(appReducer, initialState); + return ( + + + + ); +}); + +``` + + +
last modified at September 4, 2025 16:45
\ No newline at end of file