Bokk的博客

目录前言一、 background1.1 原始方法1.2 测试二、改进2.1 直接测试hook2.2 fake component三、使用Library3.1 react-hooks总结前言测试除了可以让我们对线上代码更有信心，更重要的是当需要重构代码时，有测试用例的代码才叫重构，没有测试用例的代码叫重写所以，测试对于软件工程来说是非常重要的，本文讲讲react hook的测试如果对React测试不熟悉的话可以参考我之前的React的测试 - 基本的HTML测试一、 background

前言测试除了可以让我们对线上代码更有信心，更重要的是当需要重构代码时，有测试用例的代码才叫重构，没有测试用例的代码叫重写所以，测试对于软件工程来说是非常重要的，本文主要解决context全局组件的测试如果对React测试不熟悉的话可以参考我之前的React的测试 - 基本的HTML测试一、background1.1问题对于全局组件，其实每一个子组件都应该被该组件包裹，如果每次都用context.provider包裹测试组件，将会比较冗余，我们需要一个render方法已发，这个render

前言测试除了可以让我们对线上代码更有信心，更重要的是当需要重构代码时，有测试用例的代码才叫重构，没有测试用例的代码叫重写所以，测试对于软件工程来说是非常重要的，本文将模拟http的请求如果对React测试不熟悉的话可以参考我之前的React的测试 - 基本的HTML测试一、 background1.1 mocking data很多时候前端需要请求后端数据，mocking data做测试使用就很有必要了1.2 API这里使用的是MSW，其中mocking的方法如下const serv

前言测试除了可以让我们对线上代码更有信心，更重要的是当需要重构代码时，有测试用例的代码才叫重构，没有测试用例的代码叫重写所以，测试对于软件工程来说是非常重要的，本文讲讲表单中的测试如果对React测试不熟悉的话可以参考我之前的React的测试 - 基本的HTML测试一、example1.1 测试的组件我们需要测试一个表单，用户输入username以及password就可以点击提交，需要测试点击submit后提交的内容与用户输入的一致1.2 render组件首先需要render测试的

目录前言一、example1.1 测试的组件1.2 create div element1.3 获取需要测试的元素1.4 模拟用户的事件1.5 清理DOM二、使用React Testing Library2.1 新的React组件包裹API2.2 获取元素2.3 模拟用户事件三、避免实现细节3.1 background3.2 借助screen3.3 Chrome插件总结前言测试除了可以让我们对线上代码更有信心，更重要的是当需要重构代码时，有测试用例的代码才叫重构，没有测试用例的代码叫重写所以，测

目录前言一、background1.1 实际问题1.2 example二、 提出方法2.1 方案12.2 方案22.3 使用state切片三、HOC总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享通过state切片以提高性能以及通过HOC抽象逻辑一、background1.1 实际问题有时候，即便使用了memo，但是由于太多components跟新了，导致其它components的联动跟新，于是出现了性能问题1.2 example不妨假设我们有两个组件，一个是Grid，另

目录前言一、背景1.1 React lifecycle二、example2.1 用法2.2 react-dev-tool2.3 使用memo2.4 memo的第二个参数2.5 最佳实践总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享memo的使用方法一、背景1.1 React lifecycleReact的lifecycle如下→ render → reconciliation → commit ↖ ↙

目录前言一、example1.1 useCallback1.2 useMeno总结前言这里主要讲讲React中两个类似的hook，useCallback以及useMeno的区别，简单来讲就是useMeno是内部返回的一个值useCallback是内部返回的一个当前函数–一、example1.1 useCallback正常来说，当处理sideEffect的时候，useEffect的第二个参数会传一个dependence list，只有当list中地参数变化时候，这个effect才会被重新触

目录前言一、background1.1 performance bottleneck1.2 performance check二、使用Chrome的调试工具2.1 example2.2 使用Chrome调试工具2.3 re-test总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享一个检测性能的方法，并且利用此方法介绍useMeno的使用方法一、background1.1 performance bottleneckReact可以让我们把所有的逻辑以及state managem

目录前言一、background1.1 需求1.2 example二、实现2.1 example2.2 useToggle实现2.3 设计新的dispatch2.4 调用user的onChange逻辑2.5 final veriosn总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享Rect中的一个设计模式Control Props，这个设计方法跟React中的Control Component文章中完整的示例代码可以查看 这里一、background1.1 需求有时候用户希

目录前言一、background前言最近开始学习React，跟着Kent学，有很多干货，这里分享Rect中的一个设计模式方法重写或者是控制反转IoC，就是用户可以根据API提供的方法重写某些方法以满足设计需求，这样也满足了对修改封闭，对扩展开放原则一、background用户的需求是时刻变化的，之前提供的API可能不完全cover用户的需求，这时候就需要给API做扩展；具体的例子比如是reducer给接受的action中的方法需要改变...

目录前言一、background二、原型2.1 example2.2 实现2.3 改进总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享Rect中的控制反转Inversion of Control这里还是讨论props传递的问题，之前React中的设计模式 - 组合组件(上) 以及React中的设计模式 - 组合组件(下) 已经讨论过很多模式，本文讨论利用控制反转，让组件使用者调用props, 而不是被动从父组件接受props文章中完整的示例代码可以查看 这里一、back

目录前言一、background二、解决办法2.1 初始方案2.2 使用hook2.3 子组件获取属性总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享Compound Components组合组件的第二种模式文中完整的示例代码可以查看 这里一、background之前在React中的设计模式 - 组合组件(上)中，我们提到可以通过cloneElement的方法修改给子组件加属性，从而不需要通过props向下传递，但是如果遇组件跟DOM元素嵌套之后，这个方法就不能用了，情况如

目录前言一、background1.1 example1.2 需求二、React的组合模式2.1 需求2.2 设计2.3 新的设计2.4 支持DOM元素总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享Compound Components组合组件文中完整的示例代码可以查看 这里一、background1.1 example组合模式是backend的一个概念，但是frontend其实也是有类似的设计模式的，比如select跟options的组合<select>

目录前言一、background1.1 一般context的使用1.2 提出问题1.3 提出解决方案1.4 最佳实践总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享Context API一、background1.1 一般context的使用如果大家使用过Reducer，那么以下的场景不会陌生/ src/context/counter.jsconst UserContext = React.createContext()function UserProvider({

目录前言一、background1.1 设计初衷1.2 example1.3 useContext三大件总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享React Hook中的useContext一、background1.1 设计初衷useContext设计的初衷是给全局共享state的，这样就不需要每个state都通过prop传递了；这里举一个简单的例子学习一下useContext的用法1.2 example设计一个counter，组件如下；其中，CountDispl

目录前言一、background前言最近开始学习React，跟着Kent学，有很多干货，这里分享React Hook中的useCallback一、background正常来说，当处理sideEffect的时候，useEffect的第二个参数会传一个dependence list，只有当list中地参数变化时候，这个effect才会被重新触发，比如React.useEffect(() => { window.localStorage.setItem('count', count)}, [

目录前言一、useReducer1.0 useReducer的API1.1 传递object1.2 useReducer的最佳实践总结前言最近开始学习React，跟着Kent学，有很多干货，这里分享React Hook中的useReducer很多时候并不需要useReducer，因为useReducer增加了代码的复杂度，但是如果计算逻辑比较复杂涉及到多个state的互动，useReducer就可以比较好的解决这类问题一、useReducer1.0 useReducer的APIuseReduc

目录前言一、实现1.0 基本方法1.1 添加错误处理1.2 添加status1.3 使用object统一管理多个states二、进阶 - 使用ErrorBoundary总结前言最近开始学习React，跟着Kent学，有很多干货，这里具体分享一个通过useEffect处理异步http请求的方法，及其改进我把代码放在了codesandbox上, 里面是一个fetch pokemon的场景，接下来会通过这个场景一步步介绍异步请求在React的使用一、实现1.0 基本方法简单的处理方式就是如果需要发送

目录前言一、需求分析二、实现细节2.1 新加的功能2.2 增强的方法前言最近开始学习React，跟着Nolan老师开发Jira，有很多干货，这里分享一个组件组件封装的方法。一、需求分析在antd的Select组件中，value 可以传入多种类型的值onChange只会回调 number|undefined 类型当 isNaN(Number(value)) 为true的时候，也就是vaule不能转换成number的时候，代表选择默认类型，就是string当选择默认类型的时候，onChange

目录前言一、Closure的代码段分析二、Rect hook中的closure2.1 useEffect中的闭包2.2 useRef总结前言最近开始学习React，跟着Nolan老师开发Jira，有很多干货，这里分享React hook的一个易错点，也就是React Hook中由于closure闭包中会带来的问题以及解决方法一、Closure的代码段分析const testClosure = () => { let num = 0; const effect = () => {

目录前言一、需求分析1.1 AuthenticatedApp1.2 UnauthenticatedApp二、框架三、实现细节3.1 使用context管理用户信息3.2 实现UnauthenticatedApp3.2.1 LoginScreen3.2.1 RegisterScreen3.3 实现AuthenticatedApp3.4 实现login/register的请求3.5 与localstorage的交互完善AuthProvider四、总结前言最近开始学习React，跟着Nolan老师开发Jira