个人网站备案需要盖章吗,做网站用什么颜色好,视频拍摄要求,网络营销企业网站前言
通常情况下#xff0c;我们通过props将参数从父组件传递给子组件#xff0c;达到组件间状态参数共享的目的。但是面对嵌套了多层组件的情况#xff0c;继续使用props一层一层的传递参数是非常冗余和繁琐的。
对于这种包含多层组件的传参#xff0c;React提供了 Cont…前言
通常情况下我们通过props将参数从父组件传递给子组件达到组件间状态参数共享的目的。但是面对嵌套了多层组件的情况继续使用props一层一层的传递参数是非常冗余和繁琐的。
对于这种包含多层组件的传参React提供了 Context 能力来支持父组件向它包含的无论嵌套层级有多深的子组件传递状态参数让状态共享变的简单。
使用步骤
一、创建 Context
通过 createContext创建Context对象并且将其从定义Context的文件中导出这样其他组件才能使用这个 Context
createContext函数有一个必填参数这个参数是 context 对象初始化的默认值这个参数可以传入任何类型的值。
// context.tsimport { createContext } from react;export const RootContext createContext({name:levenx});二、注册 Context Provider
在需要共享状态的最高层级的父组件外层包裹 context provider这样它包含的所有子组件都可以使用 context 中的状态
import { RootContext } from ./context.js;
import { useState } from reactexport default function Root({ level, children }) {const [userInfo, setUserInfo] useState({name:levenx});return (RootContext.Provider value{userInfo}section classNamesection{children}/section/RootContext.Provider );
}在Root组件上包裹 Context Provider后Root组件中的所有子组件都能够通过 RootContext获取userInfo信息。
三、消费 Context 状态
在子组件中引入已经注册好的 context 并且通过 useContext hook来消费共享的状态参数
import { useContext } from react
import { RootContext } from ./context.jsexport 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处理就更加复杂了。这个时候就可以通过 reducer和 context配合使用来管理复杂的状态。
总结
React Context 为了我们提供了一种组件间状态共享的手段合理使用会高效提升代码运行效率和维护成本。后续会继续分享在生产项目中使用案例。
