React核心原理

當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，UI 能夠自動(dòng)把變化反映出來(lái)。

在 React 之前，我們需要調(diào)用 DOM 的 API 來(lái)修改 DOM 樹(shù)的結(jié)構(gòu)，從而改變 UI 的展現(xiàn)。而在有了 React 之后，我們只需要在業(yè)務(wù)狀態(tài)和 UI 狀態(tài)之間建立一個(gè)綁定的關(guān)系就行了。綁定完成后，我們就不需要再關(guān)心怎么去精細(xì)控制 UI 的變化，因?yàn)?React 會(huì)在數(shù)據(jù)發(fā)生變化時(shí)，幫助我們完成 UI 的變化。

React的基本概念

組件

在 React 中，所有的 UI 都是通過(guò)組件去描述和組織的。

• 內(nèi)置組件：映射到 HTML 節(jié)點(diǎn)的組件，例如 div、input、table 等，都是小寫(xiě)字母。
• 自定義組件：自己創(chuàng)建的組件，使用時(shí)必須以大寫(xiě)字母開(kāi)頭，例如 TopicList、TopicDetail。

React 組件是以樹(shù)狀結(jié)構(gòu)組織到一起的，一個(gè) React 的應(yīng)用通常只有一個(gè)根組件。

我們要根據(jù)實(shí)際的場(chǎng)景把復(fù)雜的 UI 模塊化為獨(dú)立的組件。

React 組件的本質(zhì)

React 組件的模型其實(shí)很直觀，就是從 Model 到 View 的映射，這里的 Model 對(duì)應(yīng)到 React 中就是 state 和 props。如下圖所示：

image.png

我們可以把 UI 的展現(xiàn)看成一個(gè)函數(shù)的執(zhí)行過(guò)程。其中，Model 是輸入?yún)?shù)，函數(shù)的執(zhí)行結(jié)果是 DOM 樹(shù)，也就是 View。而 React 要保證的，就是每當(dāng) Model 發(fā)生變化時(shí)，函數(shù)會(huì)重新執(zhí)行，并且生成新的 DOM 樹(shù)，然后 React 再把新的 DOM 樹(shù)以最優(yōu)的方式更新到瀏覽器。

狀態(tài) - 使用 state 和 props 管理狀態(tài)

• state：保存組件的內(nèi)部狀態(tài)
• props：父子組件之間傳遞狀態(tài)

JSX - React中的模版語(yǔ)言 - 語(yǔ)法糖

不用 JSX 的寫(xiě)法，其實(shí)也是能夠?qū)?React 的。

使用腳手架工具創(chuàng)建 React 應(yīng)用

在實(shí)際的項(xiàng)目開(kāi)發(fā)中，我們其實(shí)不僅需要把 React 作為 UI 層，還可能需要路由管理、狀態(tài)管理等框架。與此同時(shí)，我們還需要使用最新的 JavaScript 語(yǔ)言特性、CSS 的預(yù)處理框架等等。所以一般需要結(jié)合 Webpack 等打包工具來(lái)使用 React。

Facebook 官方提供的 create-react-app 命令行工具

用來(lái)創(chuàng)建一個(gè)基礎(chǔ)的 React 項(xiàng)目。它會(huì)提供一個(gè)完善的 Webpack 配置，讓我們能夠立刻開(kāi)始使用React、JavaScript 語(yǔ)言的最新特性和 CSS Module 等主流的技術(shù)方案。但是它不包含 Redux 或者 Router 等非必須的功能。需要注意的是：create-react-app 的使用需要 Node.js 的環(huán)境，具體版本是 Node >= 10.16 版本以及 npm >=5.6 版本。

npx create-react-app my-app
cd my-app
npm start

思考

React 最打動(dòng)你的特性是什么？或者說(shuō)你認(rèn)為它的最大優(yōu)點(diǎn)有哪些？