该视频仅会员有权观看
立即开通课程「React.js 前端应用开发实践」权限。
- 在 class 组件中使用 context 需要用到 context 的 consumer 组件。
- 在函数组件中可以使用 useContext 这个 hook 来访问 context。
- 实例中有一个名为 tsx 的函数组件文件，在文件顶部导入了 useContext 和需要的 context (例如 app context)。
- 使用 useContext hook 将需要的 context 传递给组件函数，以获取 context 提供的数据。
- 示例中从 context 提取出了状态 cem，并在组件中以 cem 显示。
- 可以通过点击页面的图标来切换 cem 的值，界面上的显示会相应更新。
- cem 的值可用于改变组件的 className，实现不同的主题样式（如 light 或 dark）。
- 所选主题样式会影响组件内的按钮样式。
- 进行浏览器测试可以看到，点击切换主题会改变 app hook 组件内按钮的样式。
上一节
用 Context 给 React 组件传递数据
下一节
useReducer：管理函数式组件的复杂状态
