初探React Context API_React, 会员专栏教程

作者：大漠日期：2020-05-01 点击：975

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

最近在整理CSS自定义属性在React中的使用时了解到“可以使用React Context API相关的知识更好的在React组件中使用CSS自定义属性”，但是自己对这方面的知识了解的并不多，因此想借此机会来学习React Context API相关的知识。也基于这个原因有了这篇文章。

为什么要React Context API

我们从一个React的实例开始。假设你要构建一个React的应用，该应用有一个最简单的功能，就是Dark Mode的切换。简单地说，在Web应用上一个切换组件（比如ThemeToggle），用户点击该切换按钮可以让页面在暗色系（dark）和亮色系（light）之间切换。

通常我们会通过props为所有组件提供当前主题的模式，并使用state来更新当前的主题。

在/src/components/目录下分别创建了GrandChild、Child、ParentComponent和ThemeToggle几个组件：

示例代码如下：

// /src/components/GrandChild
import React from 'react'

const GrandChild = (props) => {
    const styled = {
        color: `${props.theme.color}`,
        background: `${props.theme.background}`
    }
    return <h1 style={{...styled,...props.styles}}>Theme Toggle</h1>
}

export default GrandChild;

// /src/components/Child
import React from 'react'
import GrandChild from '../GrandChild'

const Child = (props) => {
    const styled = {
        border: `5px solid ${props.theme.color}`,
        padding: `10vmin 20vmin`,
        borderRadius: '8px'
    }

    return <GrandChild theme = {props.theme} styles={styled} />
}

export default Child

// /src/components/ParentComponent
import React from 'react'
import Child from '../Child'

const ParentComponent = (props) => <Child theme = {props.theme} />

export default ParentComponent

// /src/components/ThemeToggle
import React from 'react'

const ThemeToggle = (props) => {
    const styled = {
        background: `${props.theme.background}`,
        color: `${props.theme.color}`,
        border: `4px solid currentColor`,
        borderRadius: `6px`,
        padding: `2vmin 4vmin`,
        margin: `4vmin`,
        cursor: `pointer`
    }
    return <button onClick={props.click} style={styled}>Toggle Dark Mode</button>
}

export default ThemeToggle

// /src/App.js
import React, {Fragment} from 'react';
import ParentComponent from './components/ParentComponent'
import ThemeToggle from './components/ThemeToggle'

const dark = {
    background: '#121212',
    color: '#fff'
}

const light = {
    background: '#fff',
    color: '#444'
}

const App = () => {
    const [theme, setTheme] = React.useState('light')

    const onClickHander = () => {
        theme === 'light' ? setTheme('dark') : setTheme('light')
    }


    return <Fragment>
        <ParentComponent theme={theme === 'light' ? light : dark} />
        <ThemeToggle click={onClickHander} theme={theme === 'light' ? light : dark} />
    </Fragment>
}

export default App;

效果如下：

在这个示例中，在ParentComponent组件中指定了theme这个props，并且将这个props一级一级往下传，传给组件树下的所有组件。即，将theme传递到需要它的地方，在本例中会传到GrandChild组件。而Child组件和theme（props）没有任何关系，它只是作为一个媒体而以。

试想一下，在React中组件树就有点类似于我们熟悉的DOM树：

注意，上图中每个白色的矩形方框代表的就是React的组件。

正如上图所示，我们可以在最底层组件中添加state，但如果要将数据传递给兄弟组件的话，在React Context API之前，我们只能将state放到他们的父组件中（组件树中更高的组件位置），然后通过props将其传递回同级组件：

就像上面的示例，我们需要将state从组件树的最顶层一级一级往下传，哪怕是所有中间层组件不需要使用这些数据，但它必须为了后面的组件做为媒介，将state传递到最底层组件。

在React社区中，将这种冗长和耗时的过程称为Prop Drilling。

对应到上面的示例中，那就是：

React Context API正是用来解决Prop Drilling的问题。React Context API提供了一种通过Provider和Consumer用来提供数据和消费数据，它们可以在组件件中传递数据，最主要的是不必要一级一级的通过props向组件树传递state。简单地说，在组件树最顶层的组件中通过Provider提供数据，在后面的任何一个子组件树可以通过Consumer来消费Provider提供的数据：

React Context API简介

React的官网是这样描述Context的：

Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。

在这个特性还没出现之前，在React应用中数据的通讯是通过props属性自上而下（由父及子）进行传递的，换句话说，必须通过props传递到每个组件中，然后在组件中重复相同的过程。但这种做法对于某些类型的属性而言是极其繁锁的，也会变得非常的糟糕，最终可能会导致props在我们的组件中要不断的一层一层嵌套。

React Context API的出现主要是为了帮助我们解决这方面的问题，它提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递props。也就是说，它允许父组件隐式地将数据传递给子组件（不管组件树有多深）。换句话说，可以将数据添加到父组件中，然后任何子组件都可以访问它。

假设我们有这样的一个使用场景，在一个React应用中，我们有App、Container、Form和Button四个组件，它们之间是依次被嵌套：

App ➜ Container ➜ Form ➜ Buttton

假如我们使用props传递就需要一层一层往里传：

换成Context，就可以直接获取最顶层App组件绑定的值：

React Context API入门级应用

对于像我这样的初级使用者而言，要想彻底的了解React Context API，只能从最简单的应用开始。为了更好的理解它的使用，我们从最简单的示例开始。

创建上下文对象

在JavaScript中（或React）中常将Context称为上下文。

在React中使用Context的话，我们首要做的就是创建上下文对象（Context Object）。可以使用React上的.createContext()创建一个Context对象：

const DataContext = React.createContext()

尝试着把这个Context对象DataContext在控制台上打印出来：

这个时候可以从组件树中离自身最近的那个匹配的Prrovider中读取到当前的context值。

只有当组件所处的树中没有匹配到Provider时，其defaultValue参数才会生效。这有助于在不使用Provider包装组件的情况下对组件进地测试。

另外，createContext()方法提供了Provider和Consumer能力，其中一个是提供者，另一个是消费者，而且这两个属性都是成对出现的，即每一个Provider都会有对应的一个Consumer。

Provider将作为父组件使用，它持有所有Consumer都可以共享的值。注意，Consumer只能用于Provider的子组件。

使用`Provider`提供数据

上一步，使用React.createContext()创建了一个名为DataContext的上下文对象，在其中，我们用一些值（value）初始化一个状态（state），可以使用DataContext的Provider接受一个value属性，传递给子组件消费（Consumer）

const App = () => <DataContext.Provider value={{userName: 'Airen', age: 30 }}>
    <h4>Child Component</h4>
</DataContext.Provider>;

Provider的value属性的值可以是字符串、数字或对象。

消费`Provider`提供的数据

Provider创建了数据，其创建的数据可以通过context对象的Consumer属性给子组件消费。主要有三种方法来消费Provider属性创建的数据。

使用`Consumer`组件消费数据

创建一个新组件，并且在该组件中使用DataContext的Consumer来消费数据。这将返回一个函数，该函数允许组件消费Provider中设置的值。比如：

const ParagraphChildComponent = () => <DataContext.Consumer>
    { value => <h4>I'm {value.userName}, {value.age} yeas old this year!</h4>}
</DataContext.Consumer>

const App = () => <DataContext.Provider value={{userName: 'Airen', age: 30 }}>
    <ParagraphChildComponent />
</DataContext.Provider>;

浏览器渲染出来的结果如下：

注意，DataContext.Consumer组件中返回的函数是基于context值进行渲染。

这种方式对于处理不需要任何逻辑的组件非常有用。

使用`this.context`和`contextType`来消费数据

在使用类的组件中，可以使用this.context和conteextType来消费Provider组件中设置的值。比如：

class ParagraphChildComponentWithClass extends React.Component {
    render() {
        return <h4>He is {this.context.userName}, {this.context.age} yeas old this year!</h4>
    }
}

ParagraphChildComponentWithClass.contextType = DataContext

const App = () => <DataContext.Provider value={{userName: 'Airen', age: 30 }}>
    <ParagraphChildComponentWithClass />
</DataContext.Provider>;

挂载在class上的contextType属性会被重新赋值为一个由React.createContext()创建的context对象。这能让你使用this.context来消费最近context上的那个值。你可以在任何生命周期中访问到它，包括render函数中。

class MyClass extends React.Component {
    componentDidMount() {
        let value = this.context
        console.log('➜componentDidMount➜➜➜', value)
    }
    componentDidUpdate() {
        let value = this.context
        console.log('➜componentDidUpdate➜➜➜', value)
    }
    componentWillUnmount(){
        let value = this.context
        console.log('➜componentWillUnmount➜➜➜', value)
    }
    render() {
        let value = this.context
        return <h4>➜UserName: {value.userName}➜➜➜ Age: {value.age}</h4>
    }
}

MyClass.contextType = DataContext

const App = () => <DataContext.Provider value={{userName: 'Airen', age: 30 }}>
    <MyClass />
</DataContext.Provider>;

使用`useContext`来消费数据

上面两种方式都可以用来消费Provider提供的数据，但这两种方法要在适用的组件中使用。除此之外，还可以使用React的useContext方法来消费Provider提供的数据。该方法用于从context中获取props，其方法与上面两种方法相同，但看起来更简单得多：

const ParagraphChildComponentWithUseContext = () => {
    const {userName, age} = useContext(DataContext)

    return <h4>She is {userName}, {age} yeas old this year!</h4>
}

const App = () => <DataContext.Provider value={{userName: 'Airen', age: 30 }}>
    <ParagraphChildComponentWithUseContext />
</DataContext.Provider>;

后面我们会多花一点时间来聊useContext。

现在对React Context API有了一个最基础的了解，接下来我们来看看在实例中怎么使用它。

React Context API实例

我们来使用React Context API改造文章最开始的Dark Mode案例。

首先需要创建一个React的上下文context，正如上面介绍的，可以使用React.createContext来创建。比如，我在src/目录下创建一个ThemeContext.js文件，用来管理这个context。在这个示例中，给.createContext()传入一个字符串light，它是当前的主题模式：

// src/ThemeContext.js
import React from 'react'

const ThemeContext = React.createContext('light')

export default ThemeContext;

为了使ThemeContext这个上下文对所有React组件可用，我们必须在React组件树的最顶层，使用Provider来为后代子组件提供需要消费的数据。因为我们需要在light和dark两种状态下切换，因此，需要对ThemeContext.js稍作修改。使用React.createContext()创建context上下文时需要接受一个类似useState钩子结果的对象作为参数：

// src/ThemeContext.js
import React from 'react'

const ThemeContext = React.createContext(['light', () => {}])

export default ThemeContext;

在这个示例中，我们在App.js文件中来创建上下文的Provider。在创建Provider之前，需要先导入上面已创建的ThemeContext：

// src/App.js
import ThemeContext from './ThemeContext'

一旦ThemeContext被导入，那么App组件中的内容必须包含在ThemeContext.Provider标签内。Provider组件有一个名为value的props，它将包含我们想要给组件树中组件所需要的数据。这个时候，我们的App组件类似下面这样：

// src/App.js
import React from 'react';
import ThemeContext from './ThemeContext'

const App = () => {
    const theme = 'light'

    return <ThemeContext.Provider value={theme}>
        <div>子组件放在这里</div>
    </ThemeContext.Provider>
}

export default App;

这个时候，light的值可以用于React组件树中的所有组件。

现在我们可以像前面一样。创建Dark Mode所需要的颜色体系。

const dark = {
    background: '#121212',
    color: '#fff'
}

const light = {
    background: '#fff',
    color: '#444'
}

为好更好管理这两个主题颜色，这里将它们放到一个名为Color.js文件中（该文件也放在src/目录下）：

// src/Color.js
export const dark = {
    background: '#121212',
    color: '#fff'
}

export const light = {
    background: '#fff',
    color: '#444'
}

接下来，我们来改造前面创建的ParentComponent、Child、GrandChild和ThemeToggle组件。先来重写ThemeToggle组件：

// src/components/ThemeToggle/index.js
import React, { useContext } from 'react'
import { dark, light} from '../../Color'
import ThemeContext from '../../ThemeContext'

const ThemeToggle = () => {
    const [theme, setTheme] = useContext(ThemeContext)

    const clickHandler = () => {setTheme(theme === 'light' ? 'dark' : 'light')}

    const currentTheme = theme === 'light' ? light : dark

    const styledButton = {
        background: `${currentTheme.background}`,
        color: `${currentTheme.color}`,
        border: `4px solid currentColor`,
        padding: `2vmin 4vmin`,
        margin: `4vmin`,
        cursor: `pointer`,
        borderRadius: `6px`,
        fontSize: `2rem`,
        fontFamily: `"Gochi Hand", sans-serif`
    }

    return <button style={styledButton} onClick={clickHandler}>{theme === 'light' ? 'Toggle Dark' : 'Toggle Light'}</button>
}

export default ThemeToggle

这里我们采用了useContext来消费顶层组件App的ThemeContext.Provider提供的数据，它将返回一个数组。我们使用ES6的解构（Destructuring），可以从数组中获取元素。然后，为ThemeToggle组件写一个onClick事件处理程序，即 clickHandler。

接下来调整最里面的组件GrandChild：

// src/components/GrandChild/index.js
import React, { useContext } from 'react'
import ThemeContext from '../../ThemeContext'
import {dark, light} from '../../Color'

const GrandChild = () => {
    const theme = useContext(ThemeContext)[0]

    const currentTheme = theme === 'light' ? light : dark

    const styled = {
        color: `${currentTheme.color}`,
        background: `${currentTheme.background}`,
        border: `5px solid ${currentTheme.color}`,
        padding: `10vmin 20vmin`,
        borderRadius: '8px'
    }

    return <h1 style={styled}>{ theme === 'light' ? 'Light' : 'Dark'} Theme</h1>
}

export default GrandChild;

在这里使用useContext(ThemeContext)[0]取出context上下文中数组中的第一个值，即theme。然后根据theme值的变化获取Color.js对应的两个颜色主题dark和light。这样就可以将对应主题的颜色运用到元素中。

对于Child和ParentComponent两个组件，我们要变得容易地多：

// src/components/ParentComponent/index.js
import React from 'react'
import Child from '../Child'

const ParentComponent = () =>  <Child  />

export default ParentComponent

// src/components/Child/index.js
import React from 'react'
import GrandChild from '../GrandChild'

const Child = () => <GrandChild  />

export default Child

最后的效果如下：

虽然GrandChild组件是组件树中最底层，但通过useContext()可以直接消费最顶层提供的数据：

React Context API来管理全局状态

在React中，以往都是使用Redux工具来管理全局状态，但随着React Context API的出现，我们可以使用它来创建一个类似于Redux的全局状态管理工具。

React的官方文档也提到过，React Context API提供了一种通过组件树传递数据的方式，而不履在每一层手动传递props。事实上，在React中我们可以结合useContext笔useReducer两个钩子函数，创建一个全局存储（store）来管理整个应用程序的状态，并支持在整个应用程序中方便地更新状态（state）。

为了更好的向大家阐述这方面的特性，即，使用React Context API和React的useContext、useReducer钩子函数来管理React应用程序的全局状态。用一个计数器的示例来帮助我们理解这方面的特性。

创建一个存储器

首先在src/目录下创建一个store.js文件，用来创建全局状态的存储器。这个存储器（该文件）包含两个部分：context（上下文）和 state（状态）。使用React.createContext()创建一个React上下文，会返回一个Provider，它会接受一个value值（即props）。Provider将会包裹整个应用程序（App）。而且value将接收useReducer钩子函数创建的状态（state）。该钩子函数接受一个(state, action) => newState类型的Reducer，并返回新的状态（newState）和一个dispatch函数。Reducer（减速器）定义了一组操作（action）以及根据操作类型更新状态的方式。

useContext钩子是组件访问全局存储（Global Store）的方式。最后，创建一个自定义钩子useStore，这样就不必要导出StoreContext，然后导入它和useContext。

// src/store.js
import React, { createContext, useReducer, useContext } from 'react'

const StoreContext = createContext()

const initialState = {
    count: 0,
    message: ''
}

const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return {
                count: state.count + 1,
                message: action.message
            }
        case 'decrement':
            return {
                count: state.count - 1,
                message: action.message
            }
        case 'reset':
            return {
                count: 0,
                message: action.message
            }
        default:
            throw new Error(`未定义的操作类似：${action.type}`)
    }
}

export const StoreProvider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, initialState)

    return <StoreContext.Provider value={{state, dispatch}}>
        {children}
    </StoreContext.Provider>
}

export const useStore = () => useContext(StoreContext)

让全局存储可以随处被访问

为了让store可以随处可访问，将整个应用程序封装在刚刚创建的Provider中。

// src/App.js
import React from 'react';
import {StoreProvider} from '../src/store'
import './App.css';

const App = () => {
    return <StoreProvider>
        <h4>所有子组件放在这里</h4>
    </StoreProvider>
}

export default App;

这样我们就要以在任何地方访问useStore。比如新创建的Count组件中，从store中提取state和dispatch函数。dispatch需要调用action类型以及任何有效的负载（Payload）信息，比如本例中的message。

// src/components/Count
import React from 'react'
import { useStore } from '../../store'
import './index.css'

const Count = () => {
    const {state, dispatch} = useStore()

    const incrementClickHandler = () => dispatch({
        type: 'increment',
        message: 'Incremented'
    })

    const decrementClickHandler = () => dispatch({
        type: 'decrement',
        message: 'Decremented'
    })

    const resetClickHandler = () => dispatch({
        type: 'reset',
        message: 'Reset'
    })

    return <div className="count">
        <h1>{state.message} {state.count} </h1>
        <div className="actions">
            <button onClick={incrementClickHandler} className="button increment"><span>+</span></button>
            <button onClick={decrementClickHandler} className="button decrement"><span>-</span></button>
            <button onClick={resetClickHandler} className="button reset"><span>R</span></button>
        </div>
    </div>
}

export default Count

在App的<StoreProvider>中引用Count组件：

const App = () => {
    return <StoreProvider>
        <Count />
    </StoreProvider>
}

看到的效果如下：

虽然示例中提到的这种方式，我们可以很好的管理全局的状态，但也存在一定的缺陷：

每当上下文（context）被修改时，useContext会重新渲染。

也就是说，订阅全局状态的每个组件将在上下文更新时重新渲染，对页面的性能有直接影响。

React Context API对性能的影响

上面的示例提到过，订阅全局状态的每个组件将在上下文更新时会重新渲染。那么我们要如何避免这方面的问题呢。我们从一个简单的示例开始，一步一步地向大家演示在使用React Context API和React Hooks时在哪些方面要改进，以及组件如何避免上下文更新时重新渲染。

首先在src/目录下创建一个名为GlobalContext.js文件，主要用来存放创建Context所需的逻辑：

// src/GlobalContext.js
import React, { createContext } from 'react'

const GlobalContext = createContext()

export default GlobalContext

创建了一个最简单的上下文GlobalContext，这个时候，我们就可以在App.js中使用它：

// src/App.js

import React from 'react';
import GlobalContext from '../src/GlobalContext'
import './App.css';

const App = () => {
    return <GlobalContext.Provider>
        <h1>子组件放这里</h1>
    </GlobalContext.Provider>
}

export default App;

接着创建一个ProfileCard组件，当它被挂载（mounted）时，会通过调用API得到用户个人信息，然后使用setProfile更新状态并显示它们。

// src/components/ProfileCard
import React, { useState, useEffect } from 'react'

const ProfileCard = props => {
    const [profile, setProfile] = useState([])
    useEffect(() => {
        (async () => {
            const result = await fetch('https://api.github.com/users/airen')
            const data = await result.json()
            setProfile(data)
        })()
    },[])

    const { avatar_url,location, name, bio, public_repos, followers, following, html_url } = profile

    return <div className="profile">
        <div className="header">
            <div className="avatar">
                <a href={html_url}>
                    <img src={avatar_url} alt={name} />
                </a>
            </div>
            <h2>{name} <span>{bio}</span></h2>
            <h3>{location}</h3>
            <div className="footer">
                <ul className="details">
                    <li>
                        <span>{followers}</span>
                        <strong>Followers</strong>
                    </li>
                    <li>
                        <span>{following}</span>
                        <strong>Following</strong>
                    </li>
                </ul>
            </div>
        </div>
    </div>
}

export default ProfileCard

并将ProfileCard组件放到<GlobalContext.Provider>标签内：

// src/App.js
const App = () => {
    return <GlobalContext.Provider>
        <ProfileCard />
    </GlobalContext.Provider>
}

加上CSS之后，看到的效果如下：

我们请求数据需要有一定的时间，我们创建一个Loading组件，这样在加载数据的时候，可以告诉用户：

// src/components/Loading
import React from 'react'
import './index.css'

const Loading = props => {
    return <div className="global-spinner-overlay">
        <ul className="loading-animation alternate">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
}

export default Loading

同样将该组件引入到App中：

// src/App.js
const App = () => {
    return <GlobalContext.Provider>
        <Loading />
        <ProfileCard />
    </GlobalContext.Provider>
}

现在的效果并不完美。我们还必须在App.js为Loading组件添加一些逻辑，控制它什么时候显示。接下来，创建一个ContextProvider组件，它将封装这个逻辑，并且让App.js更干净。先对前面的GlobalContext.js做修改，不再导出GlobalContext，而是将它作为一个常量。另外在该文件中创建一个GlobalContextProvider组件，将使用useState钩子一米存储和更新Loading组件可见性状态（state）。为了达到该效果，可能会像下面这样做：

// src/GlobalContext.js
import React, { createContext, useState } from 'react'

export const GlobalContext = createContext()

const GlobalContextProvider = (props) => {
    const [isLoadingOn, setLoading] = useState(false)

    return <GlobalContext.Provider value={{isLoadingOn, setLoading}}>
        {props.children}
    </GlobalContext.Provider>
}

export default GlobalContextProvider

同时App.js中的代码也需要做相应的调整：

// src/App.js
const App = () => {
    return <GlobalContextProvider>
        <Loading />
        <ProfileCard />
    </GlobalContextProvider>
}

然后在Loading组件中，导入GlobalContext而且使用useContext钩子函数引入Provider的isLoadingOn来控制Loading组件的渲染。当isLoadingOn为true时显示Loading，反之不显示：

// src/components/Loading
import React, { useContext } from 'react'
import {GlobalContext} from '../../GlobalContext'
import './index.css'

const Loading = props => {
    const {isLoadingOn} = useContext(GlobalContext)
    return isLoadingOn ? <div className="global-spinner-overlay">
        <ul className="loading-animation alternate">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div> : null
}

export default Loading

按同样的方式，在ProfileCard中引入GlobalContext，但不需要isLoadingOn，而是需要setLoading函数：

// src/components/ProfileCard
import React, { useState, useEffect, useContext } from 'react'
import {GlobalContext} from '../../GlobalContext'
import './index.css'

const ProfileCard = props => {
    const [profile, setProfile] = useState([])
    const { setLoading } = useContext(GlobalContext)
    useEffect(() => {
        (async () => {
            setLoading(true)
            const result = await fetch('https://api.github.com/users/airen')
            const data = await result.json()
            setProfile(data)
            setLoading(false)
        })()
    },[setLoading])

    const { avatar_url,location, name, bio, followers, following, html_url } = profile

    return <div className="profile">
        <div className="header">
            <div className="avatar">
                <a href={html_url}>
                    <img src={avatar_url} alt={name} />
                </a>
            </div>
            <h2>{name} <span>{bio}</span></h2>
            <h3>{location}</h3>
            <div className="footer">
                <ul className="details">
                    <li>
                        <span>{followers}</span>
                        <strong>Followers</strong>
                    </li>
                    <li>
                        <span>{following}</span>
                        <strong>Following</strong>
                    </li>
                </ul>
            </div>
        </div>
    </div>
}

export default ProfileCard

上面演示的是最简单的实现，但它存在一些问题。我们继续在该示例的基础上进行优化。首先需要对GlobalContext进行改造。就是实现如何将isLoadingOn和setLoading传递给上下文的Provider。

<GlobalContext.Provider value={{isGlobalOn, setLoading}}>
    {props.children}
</GlobalContext.Provider>

当传递给Provider的值发生更改时，会重新渲染所有上下文使用者，这也意思味着，如果改变isLoadingOn的值或父组件重新渲染，那么Loading和ProfileCard组件都将重新渲染。这对于页面的性能来说是有很大影响。要解决这个问题，可以使用useMome钩子函数，它会缓存值对象。这样一来，只有isLoadingOn的值发生变化时，它才会被重新创建。

// src/GlobalContext.js
import React, { createContext, useState, useMemo } from 'react'

export const GlobalContext = createContext()

const GlobalContextProvider = (props) => {
    const [isLoadingOn, setLoading] = useState(false)

    const value = useMemo(() =>({
        isLoadingOn,
        setLoading
    }),[isLoadingOn])

    return <GlobalContext.Provider value={value}>
        {props.children}
    </GlobalContext.Provider>
}

export default GlobalContextProvider

这解决了在每个渲染上重新创建一个新对象，从而重新渲染所有消费者（Consumer）的问题。不幸的是，这样还是存在一个问题。即避免重新渲染所有上下文使用者。

现在，只要isLoadingOn值发生变化就会创建一个新的值对象。然而，尽管Loading组件依赖于isLoadingOn，但它并不依赖于setLoading函数。同样，ProfileCard只需要访问setLoading函数。因此，在每次isLoadingOn可见性发彺更改时都重新渲染ProfileCard是没有意义的，因为组件并不直接依赖于它。所以说，为了避免这个问题，我们可以创建另一个上下文来分离isLoadingOn和setLoading。

这个时候GlobalContext.js文件可以改造成：

// src/GlobalContext.js
import React, { createContext, useState, useMemo } from 'react'

export const GlobalContext = createContext()
export const GlobalActionsContext = createContext()

const GlobalContextProvider = (props) => {
    const [isLoadingOn, setLoading] = useState(false)

    return <GlobalContext.Provider value={isLoadingOn}>
        <GlobalActionsContext.Provider value={setLoading}>
            {props.children}
        </GlobalActionsContext.Provider>
    </GlobalContext.Provider>
}

export default GlobalContextProvider

由于有两个上下文提供者（Provider），组件可以准确地使用它们需要的内容。现在，我们需要更新Loading和ProfileCard组件时使用正确的值。

Loading组件原本就是通地GlobalContext来消费Provider提供的数据，所以它不需要做任何的调整。但ProfileCard组件中，需要将GlobalContext更换成新创建的上下文GlobalActionsContext:

// src/components/ProfileCard
import React, { useState, useEffect, useContext } from 'react'
import {GlobalActionsContext} from '../../GlobalContext'
import './index.css'

const ProfileCard = props => {
    const [profile, setProfile] = useState([])
    const setLoading  = useContext(GlobalActionsContext)
    useEffect(() => {
        (async () => {
            setLoading(true)
            const result = await fetch('https://api.github.com/users/airen')
            const data = await result.json()
            setProfile(data)
            setLoading(false)
        })()
    },[setLoading])

    const { avatar_url,location, name, bio, followers, following, html_url } = profile

    return <div className="profile">
        <div className="header">
            <div className="avatar">
                <a href={html_url}>
                    <img src={avatar_url} alt={name} />
                </a>
            </div>
            <h2>{name} <span>{bio}</span></h2>
            <h3>{location}</h3>
            <div className="footer">
                <ul className="details">
                    <li>
                        <span>{followers}</span>
                        <strong>Followers</strong>
                    </li>
                    <li>
                        <span>{following}</span>
                        <strong>Following</strong>
                    </li>
                </ul>
            </div>
        </div>
    </div>
}

export default ProfileCard

这样一来，我们就解决了性能问题。但我们还有地方需要进一步的改进，即使用上下文值的方式有关。

要在任何组件中使用isLoadingOn上下文值，我们必须直接导入上下文以及useContext钩子。通过使用useContext色子调用的包装器，我们可以使它变得不那么单调乏味。我们不再直接导出上下文值，而是使用自定义函数来使用上下文。

// src/GlobalContext.js
import React, { createContext, useState, useContext } from 'react'

const GlobalContext = createContext()
const GlobalActionsContext = createContext()

export const useGlobalContext = () => useContext(GlobalContext)
export const useGlobalActionsContext = () => useContext(GlobalActionsContext)

const GlobalContextProvider = (props) => {
    const [isLoadingOn, setLoading] = useState(false)

    return <GlobalContext.Provider value={isLoadingOn}>
        <GlobalActionsContext.Provider value={setLoading}>
            {props.children}
        </GlobalActionsContext.Provider>
    </GlobalContext.Provider>
}

export default GlobalContextProvider

接下来，我们必须调整Loading和ProfileCard组件，并使用useGlobalContext和useGlobalActionsContext来替换useContext钩子函数：

// src/components/Loading
import React from 'react'
import {useGlobalContext} from '../../GlobalContext'
import './index.css'

const Loading = props => {
    const isLoadingOn = useGlobalContext()
    return isLoadingOn ? <div className="global-spinner-overlay">
        <ul className="loading-animation alternate">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div> : null
}

export default Loading

// src/components/ProfileCard
import React, { useState, useEffect } from 'react'
import {useGlobalActionsContext} from '../../GlobalContext'
import './index.css'

const ProfileCard = props => {
    const [profile, setProfile] = useState([])
    const setLoading  = useGlobalActionsContext()
    useEffect(() => {
        (async () => {
            setLoading(true)
            const result = await fetch('https://api.github.com/users/airen')
            const data = await result.json()
            setProfile(data)
            setLoading(false)
        })()
    },[setLoading])

    const { avatar_url,location, name, bio, followers, following, html_url } = profile

    return <div className="profile">
        <div className="header">
            <div className="avatar">
                <a href={html_url}>
                    <img src={avatar_url} alt={name} />
                </a>
            </div>
            <h2>{name} <span>{bio}</span></h2>
            <h3>{location}</h3>
            <div className="footer">
                <ul className="details">
                    <li>
                        <span>{followers}</span>
                        <strong>Followers</strong>
                    </li>
                    <li>
                        <span>{following}</span>
                        <strong>Following</strong>
                    </li>
                </ul>
            </div>
        </div>
    </div>
}

export default ProfileCard

由于useContext只能在Context.Provider中调用。为了确保我们不会在Provider之外使用上下文，我们可以检查是否有上下文值。

// src/GlobalContext.js
import React, { createContext, useState, useContext } from 'react'

const GlobalContext = createContext()
const GlobalActionsContext = createContext()

export const useGlobalContext = () => {
    const context = useContext(GlobalContext)

    if (context === undefined) {
        throw new Error(`useGlobalContext must be called within GlobalContextProvider`)
    }

    return context
}

export const useGlobalActionsContext = () => {
    const context = useContext(GlobalActionsContext)

    if (context === undefined) {
        throw new Error(`useGlobalActionsContext must be called within GlobalContextProvider`)
    }

    return context
}

const GlobalContextProvider = (props) => {
    const [isLoadingOn, setLoading] = useState(false)

    return <GlobalContext.Provider value={isLoadingOn}>
        <GlobalActionsContext.Provider value={setLoading}>
            {props.children}
        </GlobalActionsContext.Provider>
    </GlobalContext.Provider>
}

export default GlobalContextProvider

正如上面代码所示，我们首先检查context值，而不是立即返回useContext的结果。如果context未定义，则抛出相应错误。然而，对于每个useContext消费者（Consumer）都这样做有点重复，因此，我们可以将其抽取出来重复使用。

// src/GlobalContext.js
import React, { createContext, useState, useContext } from 'react'

const GlobalContext = createContext()
const GlobalActionsContext = createContext()

/* eslint-disable*/ 
const useContextFactory = (name, context) => {
    return () => {
        const ctx = useContext(context)
        if (ctx === undefined) {
            throw new Error(`use${name}Context must be use withing a ${name}ContextProvider`)
        }
        return ctx
    }
}

/* eslint-enable */

export const useGlobalContext = useContextFactory('GlobalContext', GlobalContext)
export const useGlobalActionsContext = useContextFactory('GlobalActionsContext', GlobalActionsContext)

const GlobalContextProvider = (props) => {
    const [isLoadingOn, setLoading] = useState(false)

    return <GlobalContext.Provider value={isLoadingOn}>
        <GlobalActionsContext.Provider value={setLoading}>
            {props.children}
        </GlobalActionsContext.Provider>
    </GlobalContext.Provider>
}

export default GlobalContextProvider

有关于这方面的介绍还可以阅读《Global state with React》一文。

小结

React Context API是React的一个特性，在React中可以很好的用来处理组件之间的数据通讯，也能更易于处理状态的管理。但React Context API也不是银弹，也不是全能的，可以用于任何场景之中。在实际使用之中，我们还是需要根据具体场景做出正确的选择。在文章中我们主要对React Context API做了一些初步的探讨，学习了这方面最基础知识和运用。如果你在这方面有经验，欢迎在下面的评论分享。

上一篇: CSS实现圆形头像效果 | 下一篇: CSS自定义属性在组件开发中的使用

w3cplus

初探React Context API

为什么要React Context API

React Context API简介

React Context API入门级应用

创建上下文对象

使用`Provider`提供数据

消费`Provider`提供的数据

使用`Consumer`组件消费数据

使用`this.context`和`contextType`来消费数据

使用`useContext`来消费数据

React Context API实例

React Context API来管理全局状态

创建一个存储器

让全局存储可以随处被访问

React Context API对性能的影响

小结

直达目的地(^_^)

关于我们

关于站长

我的作品

w3cplus

你在这里

初探React Context API

为什么要React Context API

React Context API简介

React Context API入门级应用

创建上下文对象

使用Provider提供数据

消费Provider提供的数据

使用Consumer组件消费数据

使用this.context和contextType来消费数据

使用useContext来消费数据

React Context API实例

React Context API来管理全局状态

创建一个存储器

让全局存储可以随处被访问

React Context API对性能的影响

小结

直达目的地(^_^)

关于我们

关于站长

我的作品

使用`Provider`提供数据

消费`Provider`提供的数据

使用`Consumer`组件消费数据

使用`this.context`和`contextType`来消费数据

使用`useContext`来消费数据