精读《useEffect 完全指南》

April 发布于2019-08-23 16:21 / 3318人阅读

摘要：引言工具型文章要跳读，而文学经典就要反复研读。原文非常长，所以概述是笔者精简后的。这是理解以及的关键，后面还会详细介绍。从几个疑问开始假设读者有比较丰富的前端开发经验，并且写过一些。

1. 引言

工具型文章要跳读，而文学经典就要反复研读。如果说 React 0.14 版本带来的各种生命周期可以类比到工具型文章，那么 16.7 带来的 Hooks 就要像文学经典一样反复研读。

Hooks API 无论从简洁程度，还是使用深度角度来看，都大大优于之前生命周期的 API，所以必须反复理解，反复实践，否则只能停留在表面原地踏步。

相比 useState 或者自定义 Hooks 而言，最有理解难度的是 useEffect 这个工具，希望借着 a-complete-guide-to-useeffect 一文，深入理解 useEffect。

原文非常长，所以概述是笔者精简后的。作者是 Dan Abramov，React 核心开发者。

2. 概述

unLearning，也就是学会忘记。你之前的学习经验会阻碍你进一步学习。

想要理解好 useEffect 就必须先深入理解 Function Component 的渲染机制，Function Component 与 Class Component 功能上的不同在上一期精读精读《Function VS Class 组件》已经介绍，而他们还存在思维上的不同：

Function Component 是更彻底的状态驱动抽象，甚至没有 Class Component 生命周期的概念，只有一个状态，而 React 负责同步到 DOM。 这是理解 Function Component 以及 useEffect 的关键，后面还会详细介绍。

由于原文非常非常的长，所以笔者精简下内容再重新整理一遍。原文非常长的另一个原因是采用了启发式思考与逐层递进的方式写作，笔者最大程度保留这个思维框架。

从几个疑问开始

假设读者有比较丰富的前端 & React 开发经验，并且写过一些 Hooks。那么你也许觉得 Function Component 很好用，但美中不足的是，总有一些疑惑萦绕在心中，比如：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102938.html

理解 React Hooks 的 Capture Value 特性

摘要：在读了一些文章后，大致是找到自己总是掉坑的原因了没理解中的特性。通过这个示例，相信会比较容易地理解特性，并如何使用来暂时绕过它。在知道并理解这个特性后，有助于进一步熟悉了的运行机制，减少掉坑的次数。由于刚使用 React hooks 不久，对它的脾气还拿捏不准，掉了很多次坑；这里的坑的意思并不是说 React hooks 的设计有问题，而是我在使用的时候，因为还没有跟上它的理念导...

curlyCheng 2019-08-26 13:38 评论0 收藏0
精读《react-easy-state 源码》

摘要：会自动触发函数内回调函数的执行。因此利用并将依赖置为使代码在所有渲染周期内，只在初始化执行一次。同时代码里还对等公共方法进行了包装，让这些回调函数中自带效果。前端精读帮你筛选靠谱的内容。 1. 引言 react-easy-state 是个比较有趣的库，利用 Proxy 创建了一个非常易用的全局数据流管理方式。 import React from react; import { stor...

curlyCheng 2019-08-23 16:48 评论0 收藏0
精读《编写有弹性的组件》

摘要：引言读了精读完全指南之后，是不是对的理解又加深了一些呢这次通过一文，了解一下什么是有弹性的组件，以及为什么可以做到这一点。总结了弹性组件具有的四个特征不要阻塞数据流。不要有单例组件。以上规则不仅适用于，它适用于所有组件。 1. 引言读了精读《useEffect 完全指南》之后，是不是对 Function Component 的理解又加深了一些呢？这次通过 Writing Res...

sunsmell 2019-08-26 13:39 评论0 收藏0
精读《Function Component 入门》

摘要：比如就是一种，它可以用来管理状态返回的结果是数组，数组的第一项是值，第二项是赋值函数，函数的第一个参数就是默认值，也支持回调函数。而之所以输出还是正确的，原因是的回调函数中，值永远指向最新的值，因此没有逻辑漏洞。 1. 引言如果你在使用 React 16，可以尝试 Function Component 风格，享受更大的灵活性。但在尝试之前，最好先阅读本文，对 Function Com...

Scholer 2019-08-26 13:56 评论0 收藏0
精读《React Hooks》

摘要：更容易将组件的与状态分离。也就是只提供状态处理方法，不会持久化状态。大体思路是利用共享一份数据，作为的数据源。精读带来的约定函数必须以命名开头，因为这样才方便做检查，防止用判断包裹语句。前端精读帮你筛选靠谱的内容。 1 引言 React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想尝试的同学安装此版本即可。 React Hooks 要解决的问题是状态共享，...

kohoh_ 2019-08-23 13:03 评论0 收藏0