那么讓我們來(lái)看看關(guān)于 React 的問(wèn)題以及它與競(jìng)爭(zhēng)對(duì)手的比較：

我想擁有更多的工作機(jī)會(huì)。 React 到底有多受歡迎？

嗯，這很容易回答 —— 選擇 React。實(shí)際上，我會(huì)說(shuō) React 的工作機(jī)會(huì)大約其它的 6 到 10 倍（可能出入比較大，在一些大網(wǎng)站是 50 倍，也有些網(wǎng)站是 6 倍），是 Vue 的 2 到 4倍，比 Angular 更多。對(duì) React experts 的需求很大，但是為什么 Vue 在 GitHub 上非常受歡迎（實(shí)際上它獲得了比 React 更多的star）卻沒(méi)有更多的職位空缺？這點(diǎn)我不知道?！咀g者注：作者是美國(guó)人，這里指的是美國(guó)的就業(yè)市場(chǎng)】

我想要一個(gè)很大的社區(qū)，還有大量的庫(kù)，能夠快速解決可能出現(xiàn)的問(wèn)題。
選 React，不要再猶豫了。

它是否容易使用，開(kāi)發(fā)過(guò)程是否令人愉快？

2018年和2017年的 JS 狀態(tài)報(bào)告顯示，React 和 Vue 都享有良好的聲譽(yù)，大多數(shù)開(kāi)發(fā)人員表示會(huì)再次使用。另一方面Angular 有一種趨勢(shì)，每年都會(huì)有越來(lái)越多的人說(shuō)不會(huì)再次使用它。

我想創(chuàng)建一個(gè)新的單面應(yīng)用，但我不想額外去找這種支持庫(kù)。

我認(rèn)為這大概是 Angular 值得選擇的唯一原因。

我不是大公司。但是希望盡可能獨(dú)立，應(yīng)該選擇哪個(gè)？

Vue —— 它是我們?nèi)揞^中唯一獨(dú)立的一個(gè)。 （ Facebook 支持 React，而 Google 支持 Angular。）

上手最簡(jiǎn)單和最快的學(xué)習(xí)曲線(xiàn)？

Vue/React。在這里我更傾向于 Vue，但這只是我個(gè)人的意見(jiàn)。至于為什么？因?yàn)槟悴恍枰?JSX（它是可選的），它基本上只是 HTML + CSS + JavaScript。

目前上手 React 最簡(jiǎn)單方法是使用 CRA，這是一個(gè)為你創(chuàng)建項(xiàng)目的 CLI 工具，可幫助你避免配置 Webpack / Babel 等環(huán)境。你只需要依賴(lài)默的認(rèn)配置方式，并隨著時(shí)間的推移更新包含在內(nèi)的內(nèi)容。多虧了這一點(diǎn)，你無(wú)需關(guān)心某些關(guān)鍵庫(kù)的主要更新。

當(dāng)然，稍后，你可以通過(guò)運(yùn)行 npm run eject 來(lái)“彈出”自己并自己處理每個(gè)細(xì)節(jié)。這種方法有其自身的優(yōu)點(diǎn)，因?yàn)槟憧梢栽黾釉瓉?lái)不可用的東西（例如裝飾器）來(lái)增強(qiáng)你的應(yīng)用，但它也可能是令人頭疼的問(wèn)題，因?yàn)樗枰ㄙM(fèi)更多的時(shí)間去配置許多額外的文件。

所以，首先要做的是：

npx create-react-app {app-name}

然后 npm run start 就完成了。

我們應(yīng)該先解釋這些組件的不同之處?；旧厦總€(gè)組件可以是 function 或 class。它們之間的主要區(qū)別在于，類(lèi)組件有函數(shù)組件中沒(méi)有的一些功能：它們有 state 并使用 refs、生命周期等。從 v16.7 開(kāi)始我們可以使用 hooks，因此可以使用 hooks 來(lái)進(jìn)行 state 和 refs。

類(lèi)組件有兩種類(lèi)型：Component 和 PureComponent。它們唯一的區(qū)別是 PureComponent 可以對(duì) props 和 state 進(jìn)行淺層比較 —— 這在你不想“浪費(fèi)”渲染資源的情況下有獨(dú)到的好處，一個(gè)組件及其子組件恰好在渲染后處于相同狀態(tài)。不過(guò)它只有一個(gè)淺層比較；如果你想實(shí)現(xiàn)自己的比較操作（假如你傳遞的是復(fù)雜的 props），只需要用 Component 并覆蓋 shouldComponentUpdate（默認(rèn)情況下返回true）。從 16.6 + 開(kāi)始，在函數(shù)組件中也可以用類(lèi)似的東西 —— 全靠 React.memo 這個(gè)更高階的組件，在默認(rèn)情況下表現(xiàn)得像 PureComponent（淺層比較），在你進(jìn)行自定義的 props 比較時(shí)它還需要第二個(gè)參數(shù)。

一般來(lái)說(shuō)如果你能用函數(shù)組件（假設(shè)你不需要類(lèi)功能）那么就用它。不過(guò)從 16.7.0 開(kāi)始，由于生命周期方法，只能用類(lèi)組件。但是我認(rèn)為函數(shù)組件更透明，更容易推理和理解。

Constructor(props)

可選，CRA 使其變得受歡迎，默認(rèn)包含 JavaScript 的類(lèi)字段聲明。聲明是否通過(guò)類(lèi)中的箭頭函數(shù)去綁定方法是沒(méi)有意義的。類(lèi)似的狀態(tài)也可以初始化為類(lèi)屬性。

僅用于 ES6 類(lèi)中初始化對(duì)象的本地狀態(tài)和綁定方法。

componentDidMount()

在這里進(jìn)行 Ajax 調(diào)用。

如果你需要事件監(jiān)聽(tīng)器，訂閱等功能，可以在此處添加。

你可以在這里使用 setState（但是它會(huì)使組件重新渲染）。

componentWillUnmount()

清除所有仍在進(jìn)行的東西 —— 例如，Ajax應(yīng)該被中斷，取消訂閱，清除定時(shí)器等等。

不要調(diào)用 setState，因?yàn)樗鼪](méi)有意義，因?yàn)榻M件將會(huì)被卸載（并且你會(huì)得到一個(gè)警告）。

componentDidUpdate(prevProps, prevState, snapshot)

在組件剛剛更新完畢時(shí)執(zhí)行（在開(kāi)始渲染時(shí)不會(huì)）。

有三個(gè)可選的參數(shù)（以前的props，以前的 state 和只有在你的組件實(shí)現(xiàn) getSnapshotBeforeUpdate 時(shí)才會(huì)出現(xiàn)的快照 ）。

僅當(dāng) shouldComponentUpdate 返回true時(shí)才會(huì)執(zhí)行。

If you use setState here, you should guard it or you will land in an infinite loop.

如果你在這里用到了 setState，應(yīng)該保護(hù)它，否則將會(huì)陷入無(wú)限循環(huán)。

shouldComponentUpdate(nextProps, nextState)

僅用于性能優(yōu)化。

如果返回 false，則不會(huì)調(diào)用渲染器。

如果重寫(xiě)的 SCO 只是對(duì) props/state的淺層比較，可以使用 PureComponent。

getSnapshotBeforeUpdate()

可用于保存一些與當(dāng)前 DOM 有關(guān)的信息，例如當(dāng)前的滾動(dòng)位置，稍后可在 componentDidUpdate 中重用，用來(lái)恢復(fù)滾動(dòng)的位置。

componentDidCatch(error, info)

應(yīng)該記錄日志錯(cuò)誤的地方。

可以調(diào)用 setState，但在以后的版本中，將會(huì)在靜態(tài)方法getDerivedStateFromError(error) 中被刪除，它將通過(guò)返回一個(gè)值來(lái)更新?tīng)顟B(tài)。

還有兩種靜態(tài)方法，在其他的段落中提到過(guò)

static getDerivedStateFromError(error)

此處提供錯(cuò)誤信息。

應(yīng)返回一個(gè)對(duì)象值，該值將會(huì)更新可用于處理錯(cuò)誤的狀態(tài)（通過(guò)顯示內(nèi)容）。

由于它是靜態(tài)的，因此無(wú)法訪(fǎng)問(wèn)組件實(shí)例本身。

static getSnapshotBeforeUpdate(props, state)

應(yīng)該在 props 隨時(shí)間變化的情況下使用 —— 例如根據(jù) React docs，它可能用于轉(zhuǎn)換組件。

由于它是靜態(tài)的，因此無(wú)法訪(fǎng)問(wèn)組件實(shí)例本身。

注意，目前還有更多可用的方法，但它們可能會(huì)在 React 17.0 中被刪除，所以就不在這里沒(méi)有提起了。

我們先從 Props 開(kāi)始，因?yàn)樗菀捉忉尅rops 是傳給組件的屬性，以后可以在組件顯示信息或業(yè)務(wù)邏輯時(shí)重用它 。

import React, { Component } from "react";

export default class App extends Component {
   render() {

       return (
           

               
           
       );
   }
}

const HelloWorld = (props) => 
Hello {props.name}

在上面的例子中，name 是一個(gè) prop。prop 是只讀元素，不能直接在子組件中更改。很多人有一種不太好的習(xí)慣，那就是把 prop 復(fù)制到 state ，然后再對(duì) state 進(jìn)行操作。當(dāng)然有時(shí)候你希望執(zhí)行類(lèi)似 “在提交之后去更新父組件的初始狀態(tài)” 這樣的操作，但這種情況非常少見(jiàn) —— 在這種情況下，更新初始狀態(tài)可能有意義。另外不僅可以給子組件傳遞字符串這樣的 prop ，還可以傳遞數(shù)字、對(duì)象、函數(shù)等。

prop 還有一個(gè)更有用的東西叫做 defaultProps，這是一個(gè)靜態(tài)字段，它可以告訴你組件的默認(rèn) prop 是什么（比如當(dāng)它們沒(méi)有傳遞給組件時(shí)）。

在“狀態(tài)提升”的情況下，其中一個(gè)組件（父組件）具有稍后由其子組件重用的狀態(tài)（例如，一個(gè)子組件用來(lái)顯示而另一個(gè)用來(lái)編輯），那么我們需要將該功能從父組件傳遞給子組件。 它允許我們更新父級(jí)的本地狀態(tài)。
另一方面，狀態(tài)是一個(gè)可以修改的本地狀態(tài)，但是通過(guò) this.setState 間接修改。如果直接去改變狀態(tài)，組件將不會(huì)感知到，更不會(huì)因?yàn)闋顟B(tài)的改變而重新渲染。

SetState 是一種更改本地狀態(tài)對(duì)象的方法（通過(guò)執(zhí)行淺層合并），之后組件通過(guò)重新渲染自己來(lái)響應(yīng)它。請(qǐng)注意，在使用 setState 之后，this.state 屬性不會(huì)立即對(duì)更改（它具有異步性質(zhì)）作出反應(yīng)，因?yàn)閮?yōu)化的原因，可能會(huì)將 setState 的幾個(gè)實(shí)例一起進(jìn)行批處理。調(diào)用它的方式有好幾種，其中一種方式允許我們?cè)趯?duì)狀態(tài)進(jìn)行更新能夠后立即對(duì)組件執(zhí)行某些操作：

setState({value: ‘5’})

setState((state, props) => ({value: state.name + “‘s”}))

setState([object / function like above], () => {}) —— 這個(gè)表單允許我們附加 callback，當(dāng) state 顯示我們想要的數(shù)據(jù)時(shí)被調(diào)用（在第一個(gè)參數(shù)）。

import React, { Component } from "react";

export default class App extends Component {
   state = {
       name: "Someone :)"
   }

   onClick = () => this.setState({ name: "You" })

   render() {
       return (
           

               
           
       );
   }
}

const HelloWorld = (props) => 
Hello {props.name}

React 最近穩(wěn)定的 Context API（已經(jīng)在 React 中存在了相當(dāng)長(zhǎng)的時(shí)間，盡管被 Redux 等一些最受歡迎的庫(kù)廣泛使用，卻是一個(gè)實(shí)驗(yàn)性功能）有助于我們解決一個(gè)問(wèn)題：Props drilling。簡(jiǎn)而言之 Props drilling 是在結(jié)構(gòu)中深入傳遞 props 的一種方式 —— 例如，它可以是組件的某種主題、針對(duì)特定語(yǔ)言的本地化、用戶(hù)信息等。在 Context出現(xiàn)之前（或者更確切地說(shuō)，在它變成非實(shí)驗(yàn)功能之前），它是通過(guò)遞歸方式從父級(jí)一直傳遞到到子級(jí)的最后一級(jí)的來(lái)進(jìn)行鉆取的（顯然還有可以解決這個(gè)問(wèn)題的 Redux）。請(qǐng)注意，此功能僅僅用于解決 Props drilling 的問(wèn)題，并且不能替代 Redux 或 Mobx 等。當(dāng)然如果你只使用狀態(tài)管理庫(kù)，則可以隨意替把它替換掉。

這是我們的React教程的第一部分。在后續(xù)的文章中，我們會(huì)設(shè)計(jì)更多高級(jí)主題，包括樣式和類(lèi)型檢查，以及生產(chǎn)部署和性能優(yōu)化。

12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

世界頂級(jí)公司的前端面試都問(wèn)些什么

CSS Flexbox 可視化手冊(cè)

過(guò)節(jié)很無(wú)聊？還是用 JavaScript 寫(xiě)一個(gè)腦力小游戲吧！

從設(shè)計(jì)者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動(dòng)畫(huà)效果

程序員30歲前月薪達(dá)不到30K，該何去何從

第三方CSS安全嗎？

談?wù)剆uper(props) 的重要性