摘要：你可以使用這個(gè)技術(shù)在構(gòu)建時(shí)間生成。谷歌實(shí)際上是在年開(kāi)始抓取素材的，這個(gè)算法現(xiàn)在已經(jīng)可以完美地工作了。閉包在無(wú)處不不在，并且你可能一直使用到它，即使你還沒(méi)有注意到。但是你在方法中使用閉包時(shí)，它確實(shí)是不好的。

原文：5 common practices that you can stop doing in React

從下面這點(diǎn)來(lái)說(shuō)，很難說(shuō)React是這個(gè)星球上最受歡迎的庫(kù)之一。很多人對(duì)React感興趣，新的開(kāi)發(fā)者之所以傾向于使用這個(gè)框架的原因是因?yàn)樗腢I優(yōu)先方法。雖然這些年React和它的整個(gè)生態(tài)已經(jīng)比較成熟，但是在某些情況下你仍然會(huì)這樣問(wèn)自己：“正確的做法到底是什么？”

這是一個(gè)好問(wèn)題--并不總是有一個(gè)通用的“正確”的做事方式。事實(shí)上，正如你所知，最佳實(shí)踐并不總是那么的適用。長(zhǎng)遠(yuǎn)來(lái)看，其中的某些寫法可能會(huì)影響性能，可讀性，并導(dǎo)致效率低下。

在本文中，我將描述在React開(kāi)發(fā)中5種被普遍接受的寫法，但是實(shí)際上你是可以避免這樣做的。當(dāng)然，我將解釋為什么我認(rèn)為這些做法是可以避免的，并且我會(huì)建議你用其他的寫法來(lái)完成相同的事情。

React的開(kāi)發(fā)人員在如何使React更快投入了大量的精力，每次迭代新的優(yōu)化方法又會(huì)被添加進(jìn)去。在我看來(lái)，你不應(yīng)該花費(fèi)時(shí)間優(yōu)化這些東西，除非你發(fā)現(xiàn)了真正的性能影響。

為什么？

React相比其它的前端平臺(tái)更容易擴(kuò)展，因?yàn)槟悴槐刂貙懩硞€(gè)模塊來(lái)加快應(yīng)用的速度。導(dǎo)致性能問(wèn)題的罪魁禍?zhǔn)淄ǔＪ?b>React使用更新虛擬DOM的reconciliation過(guò)程。

讓我們看一下React是如何處理下面的事情的。在每個(gè)render()中，React生成了一個(gè)由UI元素組成的樹(shù)——子節(jié)點(diǎn)是實(shí)際的DOM元素。當(dāng)state或者props更新的時(shí)候，React需要使用最小的改變次數(shù)來(lái)生成一個(gè)新的樹(shù)，并保持可預(yù)測(cè)性。

想象一下，你看到的樹(shù)是這個(gè)樣子的：

想象一下，你的應(yīng)用接收到新的數(shù)據(jù)，下列的節(jié)點(diǎn)需要被更新：

React通常會(huì)重新渲染整個(gè)子樹(shù)，而不是像這樣僅僅渲染相關(guān)節(jié)點(diǎn)：

當(dāng)頂層組件的state發(fā)生改變的時(shí)候，它的子元素都會(huì)重新渲染。這是默認(rèn)的行為，在小型應(yīng)用中不需要擔(dān)心。隨著應(yīng)用的逐漸擴(kuò)展，您應(yīng)該考慮使用Chrome Profiling工具來(lái)測(cè)量實(shí)際性能。這個(gè)工具將為你提供在不必要的渲染上所浪費(fèi)時(shí)間的精確數(shù)據(jù)。如果這些數(shù)據(jù)很重要，你可以通過(guò)向你的組件中添加shouldComponentUpdate鉤子來(lái)優(yōu)化你的渲染時(shí)間。

這個(gè)鉤子在重新渲染開(kāi)始之前將被觸發(fā)，默認(rèn)返回true:

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

當(dāng)返回true時(shí)，React的diff算法接管并重新渲染整個(gè)子樹(shù)。你能避免這樣的情況發(fā)生，通過(guò)在shouldComponentUpdate中添加比較邏輯，并且僅當(dāng)相關(guān)的props發(fā)生改變的時(shí)候更新邏輯。

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

除了color/count，其它任何props/state改變，這個(gè)組件都不會(huì)更新。

除此之外，還有一些開(kāi)發(fā)人員通常忽略的non-React優(yōu)化技巧，但它們會(huì)影響應(yīng)用程序的性能。

我將在下面列舉一些可以避免的習(xí)慣和解決方案：

未優(yōu)化的圖片--如果你的應(yīng)用中有很多動(dòng)態(tài)圖片，你需要在處理圖片時(shí)考慮你的選項(xiàng)。較大的圖片可能會(huì)給用戶一種應(yīng)用很慢的印象。在將圖片推入服務(wù)器之前壓縮圖片，或者使用動(dòng)態(tài)圖片處理解決方案來(lái)替代。我個(gè)人喜歡Cloudinary來(lái)優(yōu)化react圖片因?yàn)樗兴约旱?b>react庫(kù)，但是你也可以使用Amazon S3或者Firebase。

未壓縮的構(gòu)建文件--Gzipping構(gòu)建文件(bundle.js)可以有效的減少文件大小。你需要修改webserver的配置文件。Webpack有一個(gè)gzip壓縮插件，叫做compression-webpack-plugin。你可以使用這個(gè)技術(shù)在構(gòu)建時(shí)間生成bundle.js.gz。

雖然單頁(yè)面應(yīng)用非常棒，但是他們?nèi)匀淮嬖趦蓚€(gè)問(wèn)題。

當(dāng)應(yīng)用首次加載的時(shí)候，瀏覽器中沒(méi)有JavaScript緩存。如果應(yīng)用很大，首次加載應(yīng)用的時(shí)間將會(huì)很慢。

由于應(yīng)用程序是在客戶端進(jìn)行渲染，搜索引擎使用的web爬蟲(chóng)程序?qū)o(wú)法索引JavaScript生成的內(nèi)容。搜索引擎將看到你的應(yīng)用是空白的，然后排名很差。

這就是服務(wù)端渲染技術(shù)派上用處的地方。在SSR中，JavaScript內(nèi)容最初是由服務(wù)器渲染的。在首次渲染后，客戶端的腳本接管，并像一個(gè)正常的SPA應(yīng)用運(yùn)行。由于你需要使用Node/Express服務(wù)，因此在以傳統(tǒng)SSR進(jìn)行構(gòu)建時(shí)復(fù)雜度和花費(fèi)更高。

如果你是為了搜索引擎優(yōu)化、谷歌索引和沒(méi)有任何問(wèn)題地抓取JavaScript內(nèi)容，那么有一個(gè)好消息。谷歌實(shí)際上是在2016年開(kāi)始抓取JavaScript素材的，這個(gè)算法現(xiàn)在已經(jīng)可以完美地工作了。

以下是2015年10月Webmaster博客的節(jié)選。

今天，只要你不阻止Googlebot抓取你的JavaScript或CSS文件，我們就能像現(xiàn)代瀏覽器一樣渲染和理解你的網(wǎng)頁(yè)。為了反映這一改進(jìn)，我們最近更新了我們的技術(shù)站長(zhǎng)指南，建議不要禁止Googlebot抓取你網(wǎng)站的CSS或JS文件。

如果你使用服務(wù)器端渲染，是因?yàn)槟銚?dān)心你的谷歌頁(yè)面排名，那么你不需要使用SSR。它曾經(jīng)是過(guò)去的事，但現(xiàn)在不是了。

然而，如果你正在改善首次渲染速度，那么你應(yīng)該嘗試使用像Next.js這樣的庫(kù)來(lái)實(shí)現(xiàn)更加簡(jiǎn)單的SSR。Next將節(jié)省你在設(shè)置Node/Express 服務(wù)所花費(fèi)的時(shí)間。

在使用React做開(kāi)發(fā)時(shí)，我曾親自嘗試過(guò)多種不同的樣式理念，為了能找到一種新的引入樣式到React組件的方式。在React組件中使用已經(jīng)存在多年的傳統(tǒng)的CSS-in-CSS 方法。你的樣式表全部樣放在一個(gè)樣式表目錄，然后你可以將所需要的CSS導(dǎo)入到你的組件中。

然而，當(dāng)你使用這些組件的時(shí)候，樣式表不再清晰明了。React鼓勵(lì)你以組件化的方式來(lái)思考你的應(yīng)用，然而樣式表則強(qiáng)迫你以文檔的角度來(lái)思考。

目前有多種方法將CSS和JS代碼合并到一個(gè)文件中。內(nèi)聯(lián)樣式可能是其中最流行的。

const divStyle = {
  margin: "40px",
  border: "5px solid pink"
};
const pStyle = {
  fontSize: "15px",
  textAlign: "center"
};

const TextBox = () => (
  

    
Yeah!
  
);

export default TextBox;

你不需要再導(dǎo)入CSS，但是這會(huì)犧牲可讀性和可維護(hù)性。除了這樣做，內(nèi)聯(lián)樣式不支持媒體查詢，偽元素以及樣式回退。當(dāng)然，有一些技巧可以讓你解決上述問(wèn)題，但是使用起來(lái)卻并不方便。

這就是CSS-in-JSS派上用處的地方，內(nèi)聯(lián)樣式并不完全是CSS-in-JSS。下面的代碼演示了使用styled-components的概念。

import styled from "styled-components";

const Text = styled.div`
  color: white,
  background: black
`
This is CSS-in-JS

在瀏覽器中看上去是這樣的：

This is CSS-in-JS

新的