35、React开发：从解决Prop Drilling到应用设计原则

React开发：从解决Prop Drilling到应用设计原则

1. 利用Context API解决Prop Drilling问题

在React开发中，Prop Drilling是一个常见的问题。例如，在一个可搜索列表的场景中， onItemClick 这个属性需要从 SearchableList 组件传递到 List 组件，再传递到 ListItem 组件，而 List 组件本身并不使用这个属性，这就是典型的Prop Drilling。随着组件树的加深和属性的增多，整个结构会变得难以管理。

1.1 Context API的概念

Context API 提供了一种优雅的解决方案。它的核心概念是为共同父组件下的所有子组件创建一个共享容器，子组件可以直接访问共享上下文，无需显式地从父组件传递属性。而且，当上下文中的数据发生变化时，会自动触发组件的重新渲染。

1.2 使用Context API的步骤

• 定义上下文 ：

import { createContext } from "react";
import { Item } from "./types";

type SearchableListContextType = {
  onSearch: (keyword: string) => void;
  onItemClicked