Bokk的博客

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

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

目录前言一、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 基本方法简单的处理方式就是如果需要发送