由于React的函数式组件使用起来方便（对比class组件），我将重点使用函数组件来运行开发。在这系列博客中，我将分享我所学到Hook系列API的知识。 通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。 可以理解成Hook就是用来放一些重复代码的函数。 下面我将做手动…

本文详细的讲述了 useCallback 与 useMemo 的使用场景，以及有哪些使用中常遇到的问题与采坑点。

先说结论useCallback和useMemo都可缓存函数的引用或值，但是从更细的使用角度来说useCallback缓存函数的引用，useMemo缓存计算数据的值。 根据官网文档的介绍我们可理解：在a和b的变量值不变的情况下，memoizedCallback的引用不变。即：us…

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 看到“reducer”这个词，容易让人联想到Redux，但是在本文中，不必先理解Redux才能阅读这篇文章。咱们将一起讨论“reducer”实际上是什么，以及如何利用useReducer来管理组件中的复杂状态，…

Ref属性用来获取DOM元素的节点和获取子组件的实例。 String Ref是个过时的API。因为String类型的Ref存在一些问题，将在未来的某个版本中被遗弃，不建议使用。 Ref获取子组件的实例后，可以调用子组件上的方法。 Callback Ref能助你更精细地控制何时 …

上篇文章结尾提到过使用useReducer，可以帮助我们集中式的处理复杂的state管理。但如果我们的页面很复杂，拆分成了多层多个组件，我们如何在子组件触发这些state变化呢，比如在LoginButton触发登录失败操作？ 这篇文章会介绍如何使用另外一个高阶Hook-useC…

Redux 毫无疑问是众多 React 项目首选的状态管理方案，但我觉得 Redux 的开发体验并不好。 去到管理 redux 的文件夹，思考把这个状态放到状态树的哪个位置，然后新建一个文件夹并命名 myFeature。 以上只是加个状态而已，写很多模板代码还是其次，最要命的是…

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 想象一下:你有一个非常好用的函数组件，然后有一天，咱们需要向它添加一个生命周期方法。 呃... 刚开始咱们可能会想怎么能解决这个问题，然后最后变成，通常的做法是将它转换成一个类。但有时候咱们就是要用函数方式，怎…

useMome、useCallback用法都差不多，都会在第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行，并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。 React.memo 为高阶组件。它与React.P…