React 中的上下文：更好的方法

百变鹏仔 3天前 #JavaScript

文章标签上下文

首先看一下这段代码：

usercontext.js

import { createcontext, usecontext } from "react";const usercontext = createcontext({  user: { name: 'default user', age: 0 },  setuser: () =&gt; {} //we can also pass state here.});export const themeprovider = themecontext.provider;export default function usecont() {  return usecontext(usercontext);}

在 createcontext 中提供默认值

当您使用 react.createcontext() 创建上下文时，我们可以直接提供默认值。仅当组件正在使用上下文而不被提供程序包装时，才会使用这些默认值。但是，需要注意的是，如果您使用 provider，则 provider 中的值将覆盖 createcontext 中设置的任何默认值。

const usercontext = createcontext({  user: { name: 'default user', age: 0 },  setuser: () =&gt; {} //we can also pass state here.});

导出contextprovider

您不是创建自定义 provider 组件，而是直接将 context.provider 导出为 contextprovider：

export const themeprovider = themecontext.provider;

这允许您在应用程序中的任何位置使用 themeprovider。

创建自定义挂钩以更轻松地使用

通过创建 usecont 挂钩，您可以简化上下文的使用。您不必每次都编写 usecontext(usercontext)，而只需使用 usecont():

export default function usecont() {  return usecontext(usercontext);}

现在在任何组件中，您都可以轻松访问上下文。

这种结构的好处：

默认值：您可以设置后备值，以防不使用提供程序。
可重用性： themeprovider 和 usetheme 挂钩使您可以轻松地在应用程序中使用上下文。
干净简单：它保持代码模块化并分离关注点，使提供者和上下文消费变得容易。

执行

app.jsx

import React from 'react';import { UserProvider, useUser } from './UserContext';const App = () =&gt; {const { user, setUser } = useUser(); //direct usage of the hook created without need for usercontext and useContect hook.  return (    <userprovider>//Here we are directly wrapping the children. It can be done even in main.jsx/index.js      <div>      <h1>Name: {user.name}</h1>      <p>Age: {user.age}</p>      <button onclick="{()"> setUser({ name: 'Jane Doe', age: 25 })}&gt;        Update User      </button>    </div>    </userprovider>  );};export default App;

文章推荐

React 中的上下文：更好的方法

在 createcontext 中提供默认值

导出contextprovider

创建自定义挂钩以更轻松地使用

这种结构的好处：

执行

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？