首先看一下这段代码:usercontext.jsimport { createcontext, usecontext } from "react";const usercontext = createcontext({ user: { name: 'default user', age: 0 }, setuser: () => {} //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: () => {} //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.jsximport React from 'react';import { UserProvider, useUser } from './UserContext';const App = () => {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 })}> Update User </button> </div> </userprovider> );};export default App;登录后复制 以上就是React 中的上下文:更好的方法的详细内容,更多请关注我的其它相关文章!
标签:createcontext,更好,const,usercontext,React,user,provider,上下文 From: https://www.cnblogs.com/aow054/p/18424086