Architecture
Virtual DOM
Virtual DOM
如果将一个函数任意地将其放在 useEffect Deps List 中
- 区分 Smart Component (know the state) 和 Dump Component (stateless)
- Returns a memoized callback.
Renderer
React Element 实际上是纯对象,
Features
useDeferredValue
Context provide a Dependency Injection style method,
- Create custom XXXContextProvider:
Concepts
Workflow
Asynchronous
Reconciler:
Dispatcher
Interval
Error Boundary
React Fiber
State
React Hooks allow you to use state and other React features in functional components.
- Reuse stateful logic between components
Constructor
- XLIFF:
ComponentDidMount
Media Query
- Returns a memoized value.
Redux middleware were designed to enable writing side effects logic:
Higher Order Components
Mental Model
- Normal React performance tips: React.memo, useMemo, useCallback etc.
Server State
Core Concepts
Performance
- Use useState whenever manage a JS primitive (e.g. string, boolean, integer).
- Core - 核心概念、Store 创建与配置、State 管理(持久化、归一化)
ref:
Refs 用于返回对元素的引用.
Reconciler construct Fiber tree:
Script Loading
URL Params
Nested
Work loop in scheduler focus on Task Scheduling,
Give React a chunk of code that it runs exclusively on the server,
useOptimistic
- Read rendered props/state.
SetState
Pub-Sub
Naming Conventions
Shared
- Events delegation:
Mindset
React
Micro Frontends
Action
Props
Update and Update Queue:
useImperativeHandle