React Context:跨层级组件共享状态参数、状态

前言

通常情况下,我们通过props将参数从父组件传递给子组件,达到组件间状态参数共享的目的。但是面对嵌套了多层组件的情况,继续使用props一层一层的传递参数是非常冗余和繁琐的。

对于这种包含多层组件的传参,React提供了 Context 能力来支持父组件向它包含的无论嵌套层级有多深的子组件传递状态参数,让状态共享变的简单。

使用步骤

一、创建 Context

通过 createContext创建Context对象,并且将其从定义Context的文件中导出,这样其他组件才能使用这个 Context;

createContext函数有一个必填参数,这个参数是 context 对象初始化的默认值,这个参数可以传入任何类型的值。

javascript 复制代码
// context.ts

import { createContext } from 'react';

export const RootContext = createContext({name:'levenx'});

二、注册 Context Provider

在需要共享状态的最高层级的父组件外层包裹 context provider,这样它包含的所有子组件都可以使用 context 中的状态

javascript 复制代码
import { RootContext } from './context.js';
import { useState } from 'react'

export default function Root({ level, children }) {
 
	const [userInfo, setUserInfo] = useState({name:'levenx'});

  return (
      <RootContext.Provider value={userInfo}>
					<section className="section">
		        {children}
				 </section>
      </RootContext.Provider> 
  );
}

在Root组件上包裹 Context Provider后,Root组件中的所有子组件都能够通过 RootContext获取userInfo信息。

三、消费 Context 状态

在子组件中引入已经注册好的 context 并且通过 useContext hook来消费共享的状态参数;

javascript 复制代码
import { useContext } from 'react'
import { RootContext } from './context.js'

export default function Heading({ children }) {
  const userInfo = useContext(RootContext);
  // ...

   return <div>{userInfo.name}</div>
}

useContext是React内置的Hook,使用它可以从Context 中读取状态,当 Context状态发生变化时,useContext读取的状态也会随之变化。

使用场景

💡 并不是所有场景都适合使用 context,很多时候项目中很容易过度使用它。

context 相较于props从代码阅读角度而言,并不是那么清晰明了,通过props传递的参数,在传递时能够清晰知道传递了什么,context的话,需要从多个文件中梳理逻辑。

应用主题

比如应用支持用户自定义显示主题,对于应用中所有的子组件都需要动态支持变化,这种非业务性的状态就可以通过 Context 进行管理。

全局状态管理

随着应用业务的增长与迭代,最终全局共用的状态会越来越多,通过props处理就更加复杂了。这个时候就可以通过 reducercontext配合使用来管理复杂的状态。

总结

React Context 为了我们提供了一种组件间状态共享的手段,合理使用会高效提升代码运行效率和维护成本。后续会继续分享在生产项目中使用案例。

相关推荐
.生产的驴27 分钟前
SpringBoot 接口国际化i18n 多语言返回 中英文切换 全球化 语言切换
java·开发语言·spring boot·后端·前端框架
吃瓜群众i39 分钟前
理解Javascript闭包
前端·javascript
安大桃子42 分钟前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede1 小时前
多行文本省略号显示,更多按钮展开全部
前端
就是我1 小时前
React 应用性能优化实战
前端·react.js·性能优化
G扇子1 小时前
深入解析XSS攻击:从原理到防御的全方位指南
前端·安全
Blucas1 小时前
《深入 PageSpy》二:入门指南
javascript·前端框架
snakeshe10101 小时前
入解析React性能优化策略:eagerState的工作原理
前端
六边形6661 小时前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
kovli1 小时前
红宝书第十八讲:详解JavaScript的async/await与错误处理
前端·javascript