useContext高级用法

liam 3/6/2023 React

React Hook useContext高级用法

所谓高级用法，只不过是一些深层知识点和实用技巧，其实也就是对前面知识点的一个巩固和学习。

最近肯定会想，你的博客为啥最近这么勤？其实23年我有一个大胆的想法，只可意会不可言传。还有最近一直在写React这些东西并不是不用Vue了，还在用，最近在【重构】使用 redux-toolkit + antd5 重构 Hooks-Admin (opens new window)所以最近就更新的React。Vue公司还在用呢，怎么可能不用Vue呢，哈哈哈哈哈。废话不多说，开始学useContext高级用法!

# 同时传递多个共享数据值给1个子组件

# 组件需求

有2个共享数据对象UserContext、NewsContext；
父组件为AppComponent、子组件为ChildComponent；
父组件需要同时将UserContext、NewsContext的数据同时传递给子组件；

# 实现代码

import React, { useContext } from 'react';

const UserContext = React.createContext();
const NewsContext = React.createContext();

function AppComponent() {
    return (
        <UserContext.Provider value={{name: 'liam'}}>
            <NewsContext.Provider value={{title: "hello Hook."}}>
                <ChildComponent />
            </NewsContext.Provider>
        </UserContext.Provider>
    )
}

function ChildComponent() {
    
    const user = useContext(UserContext);
    const news = useContext(NewsContext);
    
    return <div>
        {user.name} - {news.title}
    </div>
}

export default AppComponent;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 代码分析

父组件同时要实现传递2个共享数据对象value值，需要使用<XxxContext.Provider value={obj}>标签进行2次嵌套。
子组件使用了useContext，他可以自由随意使用父组件传递过来的共享数据value，并不需要多次嵌套获取。

# 同时将1个共享数据值传递给多个子组件

使用<XxxContext.Provider></XxxContext.Provider>标签将多个子组件包裹起来就能实现

<XxxContext.Provider>
    <ComponentA />
    <ComponentB />
    <ComponentC />
</XxxContext.Provider>

1
2
3
4
5

这样3个子组件、、都可使用useContext获取共享数据值。

# 为什么不使用redux？

在Hook出现以前，React主要负责视图层的渲染，并不负责组件数据状态管理，所以才有了第三方Redux模块，专门来负责React的数据管理。

但是自从有了Hook以后，使用React Hook进行函数组件开发，实现数据状态管理变得切实可行。只要根据实际项目需求，使用useContext和useReducer，在一定成都上是可以满足常见需求的。

毕竟使用Redux会增大项目复杂度，此外还要花费学习Redux成本。

具体需求具体分析，不必过分追求Redux。(像之前在一个Vue群，好多说要用Vuex，传个值都要用Vuex，还是那句话，别为了Vuex而Vuex，实现方法有很多，没必要过分追求)

# 总结

关于useContext高级用法就完了，useContext降低了组件之间数据传递的复杂性，让编写代码更加心情愉悦，而不用再去关心层层嵌套的问题。