06 2022 档案
摘要：自定义 Hook 概述 通过自定义 Hook，可以对其它 Hook 的代码进行复用 官方文档地址：https://react.docschina.org/docs/hooks-custom.html 假如现在博主有这么一个需求，就是定义两个组件然后在 App 根组件当中进行使用，使用的时候分别为定义
阅读全文
摘要：useLayoutEffect Hook 概述 大部分情况下 useLayoutEffect 和 useEffect 没太大区别(用法格式都相同) 但是如果需要修改 DOM 的布局样式, 那么推荐使用 useLayoutEffect 为什么推荐在 useLayoutEffect 中修改 DOM 的布
阅读全文
摘要：useImperativeHandle Hook 概述 useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值 暴露给父组件的实例值 这个是什么意思呢大致意思就是说，你想把当前组件的什么内容给父组件，可以实现一个权限的效果： import React, {use
阅读全文
摘要：useRef Hook 概述 useRef 就是 createRef 的 Hook 版本, 只不过比 createRef 更强大一点 首先先来看 createRef 获取，代码如下： import React, {createRef} from 'react'; class Home extends
阅读全文
摘要：useMemo Hook 概述 useMemo 用于优化代码, 可以让对应的函数只有在依赖发生变化时才返回新的值 其实我们可以把 useMemo 看成是 useCallback 底层的实现，如下： function useCallback(fn, arr) { return useMemo(() =
阅读全文
摘要：# 《麦浪》 > 夏天到了，麦子也要成熟了，今天来推荐这首麦浪，其中有两个版本，音乐版为yihuik苡慧原唱，视频版为男生版以及各路大神的翻唱，在这个夏天，一起听起来吧！ !> 视频被 UP 主删除了
阅读全文
摘要：useCallback Hook 概述 useCallback 是用于优化代码, 可以让对应的函数只有在依赖发生变化时才重新定义 首先来看如下这么一个案例，大致内容为，在 App 组件当中引用了两个组件，然后在使用 useState 定义状态，在 App 当中可以进行增加和减少，在其它两个组件当中也
阅读全文
摘要：useContext Hook 概述 useContext 相当于类组件中的 static contextType = Context 博主这里直接就是以两种不同的方式消费的代码贴在下方自己体会下就知道为啥要介绍 useContext Hook 了示例一： import React, {create
阅读全文
摘要：useReducer Hook 概述 从名称来看, 很多人会误以为 useReducer 是用来替代 Redux 的, 但是其实不是 useReducer 是 useState 的一种替代方案, 可以让我们很好的复用操作数据的逻辑代码 首先来用一个案例来带出 useReducer 的使用，案例大致内
阅读全文
摘要：useEffect Hook 概述 可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合 useEffect Hook 特点 可以设置依赖, 只有依赖发生变化的时候
阅读全文
摘要：Hook 概述 Hook 就是一个特殊的函数 useState Hook 概述 可以让函数式组件保存自己状态的函数 使用 useState Hook Hook 只能在函数式组件中使用, 并且只能在函数体的最外层使用 有一个 useState 方法该方法接收一个参数： 参数：保存状态的初始值 返回值，
阅读全文
摘要：工具一 /** * @author BNTang * @version 1.0 * @date Created in 2022/3/10 010 15:07 * @description **/ @Slf4j @UtilityClass public class ReflectUtil { publ
阅读全文
摘要：工具一 /** * @author BNTang * @version 1.0 * @date 2022年6月13日09:34:05 **/ public class BigDecimalUtils { public static BigDecimal doubleAdd(double v1, do
阅读全文
摘要：Hook 概述 Hook 是 React 16.8 的新增特性 它可以让函数式组件拥有类组件的特性 为什么需要 Hook 在 Hook 出现之前, 如果我们想在组件中保存自己的状态, 如果我们想在组件的某个生命周期中做一些事情, 那么我们必须使用类组件。 但是类组件的学习成本是比较高的, 你必须懂得
阅读全文
摘要：当前 reducer 存在的问题： 所有的操作都是在一个 reducer 中处理的, 如果项目很复杂, 那么会变得非常难以维护 如何解决： 对 reducer 进行拆分 官方文档地址：https://www.redux.org.cn/docs/recipes/StructuringReducers.
阅读全文
摘要：Redux DevTools 概述 Redux DevTools 是一款 Redux 官方提供的浏览器调试工具 可以让我们很方便的对 Redux 保存的状态进行追踪调试 GitHub 地址：https://github.com/reduxjs/redux-devtools 使用 Redux DevT
阅读全文
摘要：本文的主题为 saga 的实现原理，那么与其说 sage 的实现原理，不如说在 saga 中如何通过 yield 获取异步返回的结果，在 React-Saga 中如何通过 yield 获取到数据之前，我还是建议去把博主在 JS新特性+流程框架 标签中编写的 Generator 函数文章进行观看一遍，
阅读全文
摘要：Redux-saga 简介 redux-saga 和 redux-thunk 一样, 是一个 Redux 中获取存储异步数据的中间件 redux-saga 可以直接拦截 dispatch 派发的 action, 从而实现在执行 reducer 之前执行一些其它操作 使用 Redux-saga 安装
阅读全文
摘要：本篇的内容也是基于上次实现 Redux 实现原理的文章进行改造的，在 redux-thunk 中，如果通过 dispatch 派发的任务是一个对象, 那么就立即执行 reducer, 如果通过 dispatch 派发的任务是一个函数, 那么就执行这个函数，实现这一步该如何实现呢，其实呢非常的简单。
阅读全文
摘要：当前保存异步数据存在的问题 异步数据既然要保存到 Redux 中, 所以获取异步数据也应该是 Redux 的一部分，所以获取异步数据的代码应该放到 Redux 中, 而不是放到组件生命周期方法中。 在 Redux 中获取网络数据 使用 redux-thunk 中间件 redux-thunk 作用 默
阅读全文
