useContext – React 中文文档

2024-07-09 14:17| 来源: 网络整理| 查看: 265

在传递对象和函数时优化重新渲染

你可以通过 context 传递任何值，包括对象和函数。

function MyApp() { const [currentUser, setCurrentUser] = useState(null); function login(response) { storeCredentials(response.credentials); setCurrentUser(response.user); } return ( );}

此处，context value 是一个具有两个属性的 JavaScript 对象，其中一个是函数。每当 MyApp 出现重新渲染（例如，路由更新）时，这里将会是一个不同的对象指向不同的函数，因此 React 还必须重新渲染树中调用 useContext(AuthContext) 的所有组件。

在较小的应用程序中，这不是问题。但是，如果基础数据如 currentUser 没有更改，则不需要重新渲染它们。为了帮助 React 利用这一点，你可以使用 useCallback 包装 login 函数，并将对象创建包装到 useMemo 中。这是一个性能优化的例子：

import { useCallback, useMemo } from 'react';function MyApp() { const [currentUser, setCurrentUser] = useState(null); const login = useCallback((response) => { storeCredentials(response.credentials); setCurrentUser(response.user); }, []); const contextValue = useMemo(() => ({ currentUser, login }), [currentUser, login]); return ( );}

根据以上改变，即使 MyApp 需要重新渲染，调用 useContext(AuthContext) 的组件也不需要重新渲染，除非 currentUser 发生了变化。

阅读更多关于 useMemo 和 useCallback 的内容。

疑难解答我的组件获取不到 provider 传递的值

这里有几种常见的情况会引起这个问题：

你在调用 useContext() 的同一组件（或下层）渲染。把向调用 useContext() 组件之上和之外移动。你可能忘记了使用包装组件，或者你可能将组件放在树的不同部分。使用 React DevTools 检查组件树的层级是否正确。你的工具可能会遇到一些构建问题，导致你在传值组件中的所看到的 SomeContext 和读值组件中所看到的 SomeContext 是两个不同的对象。例如，如果使用符号链接，就会发生这种情况。你可以通过将它们赋值给全局对象如 window.SomeContext1 和 window.SomeContext2 来验证这种情况。然后在控制台检查 window.SomeContext1 === window.SomeContext2 是否相等。如果它们是不相等的，就在构建工具层面修复这个问题。尽管设置了不一样的默认值，但是我总是从 context 中得到 undefined

你可能在组件树中有一个没有设置 value 的 provider：

// 🚩 不起作用：没有 value 作为 prop

如果你忘记了指定 value，它会像这样传值 value={undefined}。

你可能还错误地使用了一个不同的 prop 名：

// 🚩 不起作用：prop 应该是“value”

在这两种情况下，你都应该在控制台中看到 React 发出的警告。要解决这些问题，使用 value 作为 prop：

// ✅ 传递 value 作为 prop

注意，只有在上层根本没有匹配的 provider 时才使用 createContext(defaultValue)调用的默认值。如果存在组件在父树的某个位置，调用 useContext(SomeContext) 的组件将会接收到 undefined 作为 context 的值。

【本文地址】

公司简介

联系我们