1分鐘讀完《我希望在深入 React 之前知道這些》

testbird 發布于2019-08-21 17:21 / 2708人閱讀

摘要：我希望在深入之前知道這些是的一名前端工程師，正在使用構建公司內部項目。對狀態的改變是異步的調用后，組件的并不會立即改變。使用官方推出的讓開發者已零配置的方式快速創建應用。閱讀原文討論地址我希望在深入之前知道這些如果你想參與討論，請點擊這里

我希望在深入 React 之前知道這些

Canberk Morelli 是 OpsGenie 的一名前端工程師，正在使用 React 構建公司內部項目。通過這篇文章可以使初學者不要犯同樣的錯誤。

1、每次調用 setState 都會引起組件的重新渲染 re-render

每次state 改變或者傳入新的 props 都會調用 shouldComponentUpdate。

shouldComponentUpdate 默認返回 true，開發者可以根據自己的邏輯決定是否返回 false。

注意：

不正確的 shouldComponentUpdate 邏輯可能引發錯誤：應該渲染的時候沒有渲染，或者不應該渲染的時候卻渲染了

在 shouldComponentUpdate 進行復雜的判斷容易引發性能問題，可以通過 React’s Performance Tools 來查找。

2、setState 對狀態的改變是異步的

調用 setState 后，組件的 state 并不會立即改變。

一個經常犯的錯誤就是在 setState 后馬上使用 this.state。

setState 還有另一種用法：setState(updater, [callback])，通過傳遞一個函數 updater。
第 2 個參數是修改完狀態后的回調，但是不推薦在這里寫業務邏輯，一個比較不錯的地方是寫到 componentDidUpdate 函數里。

3、組件生命周期很重要

生命周期大概分為 3 類：

掛載：組件被創建并插入到 DOM

更新：組件正在重新渲染，一般是由 props 或 state 的改變引起的

卸載：組件從 DOM 上移除

4、componentWillReceiveProps 的使用

當組件的 props 改變時需要更新 state時使用這個方法。

注意：

即使 props 沒有改變，也會調用 componentWillReceiveProps，因此需要在函數內部比較 this.props 和 nextProps

在一個已掛載組件接收新 props 前，componentWillReceiveProps 被調用，因此在掛載階段是不會調用 componentWillReceiveProps 的

5、使用 React Developer Tools

React Developer Tools 可以更方便的調試 React 應用。

6、使用 Create React App

官方推出的 Create React App 讓開發者已零配置的方式快速創建 React 應用。

閱讀原文：I wish I knew these before diving into React

討論地址：我希望在深入 React 之前知道這些

如果你想參與討論，請點擊這里

云服務器 GPU云服務器不要在我離開之前離開 java線程1分鐘 php統計1分鐘在線 php時間多加1分鐘

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

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

JavasScript重難點知識

摘要：忍者級別的函數操作對于什么是匿名函數，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數是一個很重要且具有邏輯性的特性。通常，匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0
我的春招求職經驗分享（已拿阿里京東網易等 5 個 offer）

摘要：面經因為我完全沒有面試經驗，從來沒有經歷過面試，于是想著在去這類大公司面試之前先找成都的小公司練練手，積累點面試經驗。于是三月份開始就有成都的小公司開始約我面試。前序從我高考成績出來那一刻開始，從我在高考志愿上填上計算機科學與技術這幾個當時在心中堪稱神圣的幾個字開始，我就已經把進入中國互聯網最高殿堂BAT作為我整個大學奮斗的目標，哪怕我就讀的是一所位于內陸的雙非一本大學我也認為我能...

Winer 2019-08-15 15:48 評論0 收藏1
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 評論0 收藏0