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

相关推荐
胡八一24 分钟前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla25 分钟前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡35 分钟前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu1 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c1 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪1 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆1 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻1 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
哟哟耶耶3 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js
张拭心3 小时前
工作九年程序员的三月小结
android·前端