React 性能優化：性能永遠是第一需求

這是我參與 8 月更文挑戰的第 10 天，活動詳情查看：8月更文挑戰算法

前言

在項目開發中，性能永遠是第一需求，必須時刻考慮性能問題。性能優化

如何避免應用出現性能問題，能夠考慮這幾個方面：markdown

瞭解常見的性能問題場景，在出現性能問題時，能根據經驗按優先級先解決影響最大。網絡

在 Web 應用中，最常出現的有兩種狀況：鍵盤輸入的卡頓、鼠標事件的卡頓。函數

好比在一個列表頁面，搜索框的每一次輸入都會引起列表內容的刷新，若是每次刷新都須要消耗較大的性能，那就是有問題的。工具

再好比一個視圖區域 resize 的功能，每一次鼠標的移動都會致使頁面組件的更新，這時就能夠經過防抖函數（debounce）來優化性能。post

在開發的時候時常思考：何時能夠拆分組件？何時出現了優化的空間？...性能

特別是在 React 中，當頁面狀態發生變化時組件是否能夠高效更新，當組件的粒度越細，React 可優化的空間也越大，diff 算法能夠最大程度的保留不變的組件，從而提高性能。優化

什麼樣的代碼是可重構的？這就要求代碼的耦合性很是低，是一個獨立的功能模塊，即不依賴外部的變量、不被不少外部模塊所依賴。這樣的模塊在快速實現後，即便存在必定的性能問題，也能夠在以後的優化中重構，即保留了可優化的空間。spa

當問題發生時，咱們能夠經過工具定位問題的位置，好比 React 提供的 Dev Tool 和 Chorme 提供的 Dev Tool。

綜上，是對性能問題的一些概述，具體場景的實踐，會有後續的文章跟進。