• ARTICLE
  • STRING
  • CONVERTER
  • ENCRYPT
  • NETWORK
  • MORE
    CHART
    MATH
    COORDINATE
    IMAGE
    FILE
  • ARTICLE
    STRING
    CONVERTER
    ENCRYPT
    NETWORK
    MORE
    CHART
    MATH
    COORDINATE
    IMAGE
    FILE
logo Online Tools

从 0 实现 use-context-selector

Source : mp.weixin.qq.com Author : 曾昱

在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)进行传递的,但此种用法对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI 主题),这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props。 当 Context Provider 接收的 value 发生变化的时候,React 会向下深度优先遍历组件树,找到消费了该 Context 的组件并标志为需要更新,在组件更新的 render 阶段,这些消费了该 Context 的组件就会重新渲染,读取到最新的 Context 值。 我们通常传递给 Context Provider 的 value 是一个对象,对象里包含多个字段,然而这种常见的场景却可能导致多次不必要的重复渲染。以下述代码为例:

View 14 Technology lddgo Shared on 2023-02-09