当我们使用redux进行数据管理的时候,一般都是在根组件通过Provider的方式引入store,然后在每个子组件中,通过connect的方式使用高阶组件进行连接,这样造成的一个问题是,大量的高阶组件代码冗余度特别高,既然hooks带来了新特性,不如一起来用用看

目录结构如下:

  • action/example/index.js:

    我们还使用redux的思想,编写action
  • reducer/example/index.js:

    处理action,不同于redux的reducer,这里我们可以不用提供初始状态
  • 根组件App.js:

    Provider提供给子组件context

    useReducer定义的位置,引入一个reducer并且提供初始状态initialState
  • 子组件component/example/example.js:

    useContext定义的位置,获取祖先组件提供的context

    useEffect用于进行异步请求

1.reducer/example/index.js

import * as Types from '../../types/types';

export const defaultState = {
count: 0
} export default (state, action) => {
switch(action.type) {
case Types.EXAMPLE_TEST:
return {
...state,
count: action.count
}
default: {
return state
}
}
}

2.action/example/index.js

import * as Types from '../../types/types';

export const onChangeCount = count => ({
type: Types.EXAMPLE_TEST,
count: count + 1
})

3.根组件App.js

import React, { useReducer } from 'react';
import Example from './test/example';
import example, { defaultState } from './reducer/example'; export const ExampleContext = React.createContext(null); const App = () => { const [exampleState, exampleDispatch] = useReducer(example, defaultState); return (
<ExampleContext.Provider value={{exampleState, dispatch: exampleDispatch}}>
<Example />
</ExampleContext.Provider>
);
} export default App;

4.子组件component/example/example.js

import React, { useState, useEffect, useReducer, useContext } from 'react';

import actions from '../../action';
import { ExampleContext } from '../../App'; const Example = () => { const exampleContext = useContext(ExampleContext); useEffect(() => {
window.document.title = `you click ${exampleContext.exampleState.count} times`;
}, [exampleContext.exampleState.count]); return (
<div>
<p>you can click it</p>
<button onClick={() => exampleContext.dispatch(actions.onChangeCount(exampleContext.exampleState.count))}>click it</button>
</div>
)
} export default Example;

5.types/types.js

export const EXAMPLE_TEST = 'EXAMPLE_TEST';

总结

使用useContext()时候我们不需要使用Consumer了。但不要忘记export和import上下文对象

使用React Hooks新特性useReducer、useContext替代传统Redux高阶组件案例的更多相关文章

  1. React Hooks新特性学习随笔

    React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...

  2. React躬行记(10)——高阶组件

    高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中 ...

  3. React文档(二十四)高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  4. React进阶之高阶组件

    前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...

  5. 【转】react的高阶组件

    React进阶之高阶组件   前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...

  6. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  7. React高阶组件总结

    在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...

  8. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  9. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

随机推荐

  1. IntelliJ IDEA(2018)安装详解

    转: IntelliJ IDEA(2018)安装详解 置顶 2018年06月06日 22:58:45 Lazymanx 阅读数:95701   版权声明: https://blog.csdn.net/ ...

  2. 弹指之间 -- Folk Rock

    CHAPTER 17 民谣摇滚 Folk Rock 以8Beat为主,120左右的速度最能表现此节奏特色. 示例曲目: 略

  3. [Java] Servlet工作原理之一:体系结构及其容器

    一.Servlet体系结构 在 servlet-api.jar (2.5) 中有两个包:javax.servlet 和 javax.servlet.http             1 Servlet ...

  4. 流媒体技术学习笔记之(七)进阶教程OBS参数与清晰度流畅度的关系

    源码地址:https://github.com/Tinywan/PHP_Experience 很多主播问过OBS的参数到底什么影响画质,到底什么影响流畅度,那么本篇教程尽量用通俗的语言解释下一些重要参 ...

  5. Bower使用笔记

    全局安装bower $ npm install -g bower 检测成功 $ bower help 在项目根目录下进行安装(最新版本),会自动生成一个bower_components文件夹(如果在c ...

  6. 【原创】javascript模板引擎的简单实现

    本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试 写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着 ...

  7. php银行卡校验

    前言银行金卡,维萨和万事达.银联品牌,如果是贷记卡或准贷记卡,一定为16位卡号.而借记卡可以16-19位不等.美国运通卡则不论金卡或是白金卡.普通卡,都是15位卡号.16-19 位卡号校验位采用 Lu ...

  8. centos安装lrzsz

    yum -y install lrzsz 使用rz打开上传框

  9. ASP.NET MVC3-Music Store中英文教程 [下载]

    翻译原文档名: MVC Music Store版本: ASP.NET MVC3概述Mvc Music Store 是一个为WEB开发人员一步一步介绍和解释如何使用MVC和Visual Web开发的应用 ...

  10. 20155204 2016-2017-2 《Java程序设计》第8周学习总结

    学号 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 想要取得channel的操作对象,可以使用channels类,它定义了静态方法newChannel(). ...