React.gg

前端AK君
18 阅读2分钟

React.gg: A visual exploration of core React concepts

QQ_1761535653915.png

The history of the Web

  • DOM 手动处理数据和展示很繁琐
  • Backbone.js 提出MVC Model-View-Controller
  • Angular.js 提出Model和View双向绑定，不易调试和维护，且有性能问题
  • React 创造出一个最小化副作用的抽象 V=F(S) View=Function(State)

The React Way

  • v=fn(s) 设计理念：视图是状态函数
  • f(g(s)) 具体实现：视图是组件函数
  • Concerns web三件套（HTML+CSS+JS）
  • Components 编写：统一一个在组件文件内（「关注点分离」原则）
  • JSX 为了统一编写而创造

Passing Props

  • Props：组件传参和函数传参类似
  • Children：默认插槽

Managing State

  • State：组件内管理状态
  • Lifting State：多个组件共用状态时，建议进行状态提升到父级，然后通过props下发
  • Updating State：如何更新状态呢？—— 将父级的事件处理函数通过props下发到子组件，通过子组件内调用来更新状态
  • Q：React如何更新状态？

Rendering

  • The Process：（如何渲染？）先拿到当前组件的所有状态/传参/事件/UI描述，然后生成快照，最后进行渲染
  • Re-rendering：（重新渲染时机？）只有当状态变化时才会渲染，（重新渲染过程？）重新生成组件快照，然后重新渲染
  • Re-rendering Children：（渲染的奇怪设定？）当前重新渲染某个组件时，都会渲染它的所有子组件；
    • 1、React渲染效率很高；
    • 2、React 的纯函数只会渲染有变化的组件，虽然往往不是所有组件都是纯函数组件；
    • 3、可以使用useMemo来跳出这个设定

Managing Effect

  • Rules：

    • #0：组件渲染不涉及任何副作用
    • #1：事件触发副作用，放到事件处理函数里（事件处理函数和 Effect 在渲染过程中不会运行）
    • #2：外部系统副作用，放到useEffect里
    • #3：副作用需在浏览器渲染前执行的，放到useLayoutEffect里
    • #4：副作用注册了外部store的，放到 useSyncExternalStore 里

  • useEffect：（使用场景）将副作用从渲染流中移除，并在组件渲染后延迟执行

  • useLayoutEffect：（使用场景）副作用需要在浏览器渲染前执行

Non-visual Values

  • useRef：（使用场景）不涉及渲染的变量，变更时不会渲染；ref.current 适合存储 timerId、Dom节点

Teleporting Data

  • useContext：广播数据（使用场景：组件层级复杂props传递不易维护时）

Concurrent Rendering

React v17

  • 没有优先级调度能力，只能按顺序执行，容易阻塞

React v18

  • useDeferredValue 延迟渲染
  • startTransition 标识低优渲染，如需大量CPU计算的任务，空闲时渲染，优先高优
  • useTransition 监控当前 transition 的状态是否 isPending

React v19

  • useTransition 支持对异步函数如接口请求批处理（新称谓Actions） ，仅渲染一次，减少重复渲染导致页面抖动

Server Components

  • Template Generator
  • Suspense
  • useClient
  • Slot Pattern：服务端渲染静态部分，
avatar
文章
阅读
粉丝