React 中 useContext 的用法与性能问题详解

这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。




import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
 
const ThemedButton = () => {
  const theme = useContext(ThemeContext);
  return <button style={{ backgroundColor: theme.background }}>Hello</button>;
};

这段代码展示了如何在React函数组件中使用useContext Hook来获取上下文(context)对象，并基于该上下文渲染按钮。这是在React 16.8及以上版本中实现的一种新的上下文API，它使得组件能够在组件树中多层级深度进行上下文共享而无需通过props手动传递。这种方法简化了组件之间的数据共享，并提高了代码的可维护性。

React 中 useContext 的用法与性能问题详解

评论已关闭

推荐阅读