• 文库
  • 字符
  • 转换
  • 加密
  • 网络
  • 更多
    图表
    数学
    坐标
    图片
    文件
  • 文库
    字符
    转换
    加密
    网络
    更多
    图表
    数学
    坐标
    图片
    文件
logo 在线工具大全

从 0 实现 use-context-selector

出处: mp.weixin.qq.com 作者: 曾昱

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

查看原文 39 技术 lddgo 分享于 2023-02-09