React进阶用法和hooks的个人使用见解(Typescript版本) - 4.useReducer+useContext+createContext的使用、模拟redux合并reducer

最新推荐文章于 2024-07-23 17:28:47 发布

置顶

Mack Liu

最新推荐文章于 2024-07-23 17:28:47 发布

阅读量4.3k

点赞数 3

分类专栏： react TypeScript 文章标签： hooks React Typescript useReducer useContext

本文链接：https://blog.csdn.net/weixin_43902189/article/details/99690873

版权

本文介绍了如何在React中使用useReducer、useContext和createContext来模拟Redux的合并reducer功能。通过示例代码展示了从简单的使用到抽离组件、改造代码的过程，同时预告了后续将探讨的useRef、useImperativeHandle、forwardRef以及useLayoutEffect和useDebugValue的使用。

摘要由CSDN通过智能技术生成

4.useReducer+useContext+createContext的使用、模拟redux合并reducer

`注意:hooks只能在函数(无状态组件)中使用`

`createContext:一个创建上下文函数，执行产生一个上下文对象，包含两个属性，Provider组件和Consumer组件`

Provider:用来包裹整合组件，传递一个value属性，把context上下文注入到整个组件当中
Consumer组件，在里面使用函数调用Provider的value传递的值成形参，并取出使用

具体：官方createContext介绍

useReducer和useContext - Hooks Api链接

useReducer和useContext也不过多介绍了,了解的话可以去官方查看即可,下面直接上代码

4.1useReducer+useContext+createContext的简单使用,创建一个Test.tsx文件

import React, {
    useReducer, useContext, createContext, Context } from 'react';
//初始化stroe的类型、初始化值、reducer
const ADD_COUNTER = 'ADD_COUNTER';
const initialReucer = {
   
    count: 100
}
function reducer(state: typeof initialReucer, action: {
    type: typeof ADD_COUNTER }) {
   
    switch (action.type) {
   
        case ADD_COUNTER:
            return {
    ...state, count: state.count + 1 }
        default:
            return state;
    }
}
const ProviderContext: Context<any> = createContext('provider');//创建上下文实例
//高阶组件，给函数组件注入上下文
const providerHoc = (reducer: Function, initialState: any) => (Com: React.FC<any>) => {
   
    return () => {
   
        const [state, dispatch] = useReducer<any>(reducer, initialState);
        return (
            <ProviderContext.Provider value={
   {
    state, dispatch }}>
                <Com />
            </ProviderContext.Provider >
        );
    }
}
function Test(): JSX.Element {
   
    const