精讀《useEffect 完全指南》

April 發(fā)布于2019-08-23 16:21 / 3314人閱讀

摘要：引言工具型文章要跳讀，而文學經(jīng)典就要反復研讀。原文非常長，所以概述是筆者精簡后的。這是理解以及的關鍵，后面還會詳細介紹。從幾個疑問開始假設讀者有比較豐富的前端開發(fā)經(jīng)驗，并且寫過一些。

1. 引言

工具型文章要跳讀，而文學經(jīng)典就要反復研讀。如果說 React 0.14 版本帶來的各種生命周期可以類比到工具型文章，那么 16.7 帶來的 Hooks 就要像文學經(jīng)典一樣反復研讀。

Hooks API 無論從簡潔程度，還是使用深度角度來看，都大大優(yōu)于之前生命周期的 API，所以必須反復理解，反復實踐，否則只能停留在表面原地踏步。

相比 useState 或者自定義 Hooks 而言，最有理解難度的是 useEffect 這個工具，希望借著 a-complete-guide-to-useeffect 一文，深入理解 useEffect。

原文非常長，所以概述是筆者精簡后的。作者是 Dan Abramov，React 核心開發(fā)者。

2. 概述

unLearning，也就是學會忘記。你之前的學習經(jīng)驗會阻礙你進一步學習。

想要理解好 useEffect 就必須先深入理解 Function Component 的渲染機制，F(xiàn)unction Component 與 Class Component 功能上的不同在上一期精讀精讀《Function VS Class 組件》已經(jīng)介紹，而他們還存在思維上的不同：

Function Component 是更徹底的狀態(tài)驅(qū)動抽象，甚至沒有 Class Component 生命周期的概念，只有一個狀態(tài)，而 React 負責同步到 DOM。 這是理解 Function Component 以及 useEffect 的關鍵，后面還會詳細介紹。

由于原文非常非常的長，所以筆者精簡下內(nèi)容再重新整理一遍。原文非常長的另一個原因是采用了啟發(fā)式思考與逐層遞進的方式寫作，筆者最大程度保留這個思維框架。

從幾個疑問開始

假設讀者有比較豐富的前端 & React 開發(fā)經(jīng)驗，并且寫過一些 Hooks。那么你也許覺得 Function Component 很好用，但美中不足的是，總有一些疑惑縈繞在心中，比如：

GPU云服務器云服務器 useEffect 完全完全過濾完全恢復

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102938.html

理解 React Hooks 的 Capture Value 特性

摘要：在讀了一些文章后，大致是找到自己總是掉坑的原因了沒理解中的特性。通過這個示例，相信會比較容易地理解特性，并如何使用來暫時繞過它。在知道并理解這個特性后，有助于進一步熟悉了的運行機制，減少掉坑的次數(shù)。由于剛使用 React hooks 不久，對它的脾氣還拿捏不準，掉了很多次坑；這里的坑的意思并不是說 React hooks 的設計有問題，而是我在使用的時候，因為還沒有跟上它的理念導...

curlyCheng 2019-08-26 13:38 評論0 收藏0
精讀《react-easy-state 源碼》

摘要：會自動觸發(fā)函數(shù)內(nèi)回調(diào)函數(shù)的執(zhí)行。因此利用并將依賴置為使代碼在所有渲染周期內(nèi)，只在初始化執(zhí)行一次。同時代碼里還對等公共方法進行了包裝，讓這些回調(diào)函數(shù)中自帶效果。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 react-easy-state 是個比較有趣的庫，利用 Proxy 創(chuàng)建了一個非常易用的全局數(shù)據(jù)流管理方式。 import React from react; import { stor...

curlyCheng 2019-08-23 16:48 評論0 收藏0
精讀《編寫有彈性的組件》

摘要：引言讀了精讀完全指南之后，是不是對的理解又加深了一些呢這次通過一文，了解一下什么是有彈性的組件，以及為什么可以做到這一點。總結了彈性組件具有的四個特征不要阻塞數(shù)據(jù)流。不要有單例組件。以上規(guī)則不僅適用于，它適用于所有組件。 1. 引言讀了精讀《useEffect 完全指南》之后，是不是對 Function Component 的理解又加深了一些呢？這次通過 Writing Res...

sunsmell 2019-08-26 13:39 評論0 收藏0
精讀《Function Component 入門》

摘要：比如就是一種，它可以用來管理狀態(tài)返回的結果是數(shù)組，數(shù)組的第一項是值，第二項是賦值函數(shù)，函數(shù)的第一個參數(shù)就是默認值，也支持回調(diào)函數(shù)。而之所以輸出還是正確的，原因是的回調(diào)函數(shù)中，值永遠指向最新的值，因此沒有邏輯漏洞。 1. 引言如果你在使用 React 16，可以嘗試 Function Component 風格，享受更大的靈活性。但在嘗試之前，最好先閱讀本文，對 Function Com...

Scholer 2019-08-26 13:56 評論0 收藏0
精讀《React Hooks》

摘要：更容易將組件的與狀態(tài)分離。也就是只提供狀態(tài)處理方法，不會持久化狀態(tài)。大體思路是利用共享一份數(shù)據(jù)，作為的數(shù)據(jù)源。精讀帶來的約定函數(shù)必須以命名開頭，因為這樣才方便做檢查，防止用判斷包裹語句。前端精讀幫你篩選靠譜的內(nèi)容。 1 引言 React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想嘗試的同學安裝此版本即可。 React Hooks 要解決的問題是狀態(tài)共享，...

kohoh_ 2019-08-23 13:03 評論0 收藏0