React 中 useContext 的用法与性能问题详解
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手动传递。这种方法简化了组件之间的数据共享，并提高了代码的可维护性。
评论已关闭