Context 在 React 项目中的使用规范

为什么会出现 React Context

在 React 单页面项目 SPA 中，过深层级的数据传递会影响开发者的体验，针对小项目不想引入 Redux 管理全局变量情况下，可以引入 React Context 来解决

Context 实现思想

实际上 Context 通过插槽的方式，让 APP 组件变成该全局组件的子组件，从而全部的组件都可以操作到该对象

create Context 把全局对象变量注册为一个组件

1. 在 store 下引入 Context，把变量对象通过 createContext 注册为组件
2. 通过 props.children 插槽方式把子组件嵌入到注册的组件中

import {createContext, useState} from 'react'

// 初始化状态
const FavoritiesContext = createContext({
    favorities: [],
    totalFavorities: 0,
    addFavorite: (favoriteMeetup) => {}
})

// 到处 React Component
export function FavoritiesContextProvider(props) {
    const [userFavorities, setUserFavorities] = useState([])
    
    const context = {
        favorities: userFavorities,
        totalFavorities: userFavorities.length,
        addFavorite: addFavoriteHandler
    }
    
    // 操作函数
    function addFavoriteHandler(favoriteMeetup) {
        // 回调函数形式获取最新的 state 值
        setUserFavorities((prevUserFavorites) => {
            return prevUserFavorites.concat(favoriteMeetup)
        })
    }

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

// 默认导出状态对象
export default FavoritiesContext

在 index.js 外包围上该组件

import {FavoritiesContextProvider} from './store/favorites-context'

ReactDOM.render(
    <FavoritiesContextProvider>
        <BrowserRouter>
            <APP/>
        </BrowserRouter>
   </FavoritiesContextProvider>
);

组件中使用Context

函数点击最终会触发 FavoritiesContextProvider 上下文组件里的函数，并更新组件里的 State，从而触发整个应用里的更新

import {useContext} from 'react'
// 引入默认 Context 对象
import FavoritesContext from '../../store/favorites-context'


function MeetupItem(props) {
    const favoritesCtx = useContext(FavoritesContext)

    function toogleFavoriteStatusHandler() {
        // 调用 Context 上函数添加收藏对象
        favoritesCtx.addFavorite(props.id)
    }
    
    return (
        <div>
            <button onClick={toogleFavoriteStatusHandler}>添加收藏</button>
        </div>
    )
}

参考链接

视频参考