1 前言

React目前在前端的影響力就不多說(shuō)了，不管你目前有沒(méi)有入坑React，估計(jì)都見(jiàn)過(guò)不少各種相關(guān)的新聞和技術(shù)文章。如果你有入坑React的打算，或者剛開(kāi)始學(xué)習(xí)React ，可以參考一下下面內(nèi)容。如果你已是React達(dá)人，可以繞過(guò)（當(dāng)然也很歡迎指出不足）。本文不是API文檔，也不是代碼搬運(yùn)工，只是談一下學(xué)習(xí)React的一些心得和Tips

2 入坑React的原因

前端的伙伴們都知道，我們的技術(shù)氛圍十分活躍，要跟進(jìn)所有新的技術(shù)，保持不落伍不是一件容易的事情。所以，我們必須把有限的學(xué)習(xí)精力花在能持續(xù)產(chǎn)生價(jià)值的事情上面。作為參考，我本人學(xué)習(xí)和使用React的原因有以下幾點(diǎn)：

好多人都在搞啊，Facebook在維護(hù)啊，生態(tài)好啊，總不會(huì)那么容易過(guò)時(shí)吧（從眾心理）

UI組件組織很爽，在開(kāi)發(fā)時(shí)會(huì)不自覺(jué)地提取組件，再次開(kāi)發(fā)時(shí)組織原有組件，效率高。

數(shù)據(jù)與UI解耦，單向數(shù)據(jù)流使邏輯清晰，告別jquery時(shí)代的混亂。

React的美好藍(lán)圖：跨端（React Native）和同構(gòu)（Server Rending）。后臺(tái)？終端APP？We can, we up!

業(yè)務(wù)里新項(xiàng)目已經(jīng)使用，老項(xiàng)目準(zhǔn)備切到React.（最有力的原因。。）

3 轉(zhuǎn)換思維

之前使用Jquery開(kāi)發(fā)和組織項(xiàng)目的同學(xué)，如果沒(méi)有接觸過(guò)類似mvvm的框架的，在入門React的時(shí)，有些思維方式需要轉(zhuǎn)換一下。建議看一下React官方文檔：Thinking in React

3.1 模塊思維 => 組件思維

先說(shuō)明一下模塊和組件的區(qū)別：組件是具有規(guī)范接口的模塊。說(shuō)明完畢。模塊是拆分應(yīng)用的基本手段（使用如CommonJS, AMD等模塊管理方案），而組件是將模塊按照某個(gè)體系（組件體系）加以規(guī)范，同一體系中的組件可很方便地復(fù)用。

在使用React開(kāi)發(fā)的時(shí)候，先把應(yīng)用按層級(jí)拆分成組件（不只是模塊）。不論組件后續(xù)是否能復(fù)用，必須也只能做成組件。當(dāng)組件存在復(fù)用的可能時(shí)，就考慮把可復(fù)用的部分抽離成單獨(dú)的組件。這會(huì)使你的應(yīng)用層次非常分明，并且可復(fù)用性較高。

3.2 面向過(guò)程 => 面向數(shù)據(jù)

React提供了一套很好的UI機(jī)制，操作UI的途徑是操作數(shù)據(jù)。所以，在一開(kāi)始設(shè)計(jì)應(yīng)用時(shí)，除了按層次拆分組件，下一件要做的事就是要設(shè)計(jì)應(yīng)用需要的數(shù)據(jù)。數(shù)據(jù)同樣也要護(hù)照層級(jí)設(shè)計(jì)，并對(duì)應(yīng)到具體組件上。原來(lái)通過(guò)Jquery選擇器操作Dom的方式直接摒棄，通過(guò)操作數(shù)據(jù)的方式改改變組件行為和展示。

初始化操作 => 設(shè)置初始化數(shù)據(jù)（傳遞props）

默認(rèn)操作 => 設(shè)置默認(rèn)數(shù)據(jù)（定義defaultProps ）

改變當(dāng)前組件行為/展示 => 設(shè)置當(dāng)前組件狀態(tài)數(shù)據(jù)（this.setState）

改變其他組件行為/展示 => 執(zhí)行上層組件的回調(diào)，由上導(dǎo)組件修改要改變的組件的數(shù)據(jù)（props）

3.3 事件循環(huán) => 組件生命周期循環(huán)

Jquery組織的應(yīng)用中，事件響應(yīng)通常是業(yè)務(wù)邏輯的集中營(yíng)。里面會(huì)分發(fā)和改變應(yīng)用的各種狀態(tài)與展示。在React中，應(yīng)用的狀態(tài)和行為由數(shù)據(jù)和組件來(lái)管控。以前關(guān)注的事件循環(huán)，現(xiàn)在只需要關(guān)注對(duì)應(yīng)組件的生命周期就行了，可以在生命周期的各個(gè)切面里執(zhí)行你想要的操作。

4 Tips

4.1 使用ES6

反正都要用babel編譯jsx了，不妨順應(yīng)潮流，把ES6也編譯了吧。

javascript是我們的飯碗，是時(shí)候提前適應(yīng)一下升級(jí)版的飯碗了。

上上github，看下React相關(guān)的項(xiàng)目，你也不想一臉懵逼吧？

注意瀏覽器兼容性，有時(shí)候你可能需要pollifill。

4.2 props和state

props對(duì)于組件自己來(lái)說(shuō)是常量，是父組件賦予給自己的，不要嘗試要任何地方修改它（身體發(fā)膚，受之父母，不敢毀傷，孝之始也）。

state才是組件自己的個(gè)性，只和自己組件相關(guān)的數(shù)據(jù)可以放在這里，并且自己可以修改（你有你的個(gè)性，但請(qǐng)不要影響他人）。

應(yīng)用太復(fù)雜，數(shù)據(jù)層級(jí)深？管理不易，使用Redux吧。

4.3 生命周期：反省自己的一生

學(xué)習(xí)組件生命周期的順序和原理。

注意不要限入無(wú)限輪回。有的生命周期（componentWillUpdate）中設(shè)置數(shù)據(jù)可能會(huì)讓你的組件進(jìn)入渲染的死循環(huán)。什么？還是死循環(huán)了？看看你是不是用了什么Mixin或者高階組件，它們有可能干涉你組件的生命周期。

shouldComponentUpdate 這個(gè)生命周期比較重要，性能優(yōu)化集中在這里。

componentDidMount Server端的組件生命到此為止，后續(xù)再無(wú)。

4.4 好用的工具

classnames 讓你免去拼接類名的煩惱

immutablejs 和Redux搭配效果不錯(cuò)，前提是你接受它的寫(xiě)法（必須通過(guò)get方法取屬性值）

redux-thunk 如果你要用Redux，很可能就要用到它

原文來(lái)自：imweb