大約半個(gè)月前，我一直在思考一個(gè)問題，Angular、React 和 Vue，究竟該學(xué)什么？

聽取了幾位前輩的意見，也綜合考慮了各方面的原因，最終選擇了 React，希望我“沒有選錯(cuò)”。

十天的時(shí)間，把 React 的快速入門文檔給過了一遍，整理了一些筆記，現(xiàn)在記錄如下。

JSX 簡(jiǎn)介

可以在 JSX 中嵌入 JavaScript 表達(dá)式，并用花括號(hào)包裹。

使用括號(hào)包裹 JSX 表達(dá)式，并將其拆分為多行以提高可讀性。也可以避免自動(dòng)插入分號(hào)。

由于 JSX 是在 JavaScript 中使用的，React DOM 的屬性使用 camelCase 命名。

JSX 是安全的，可以防止注入攻擊。

渲染元素

元素是元素，組件是組件。

React 元素是只讀的，一旦創(chuàng)建，就不能改變它的子元素和屬性。

就目前來說，更新 UI 的唯一方法是創(chuàng)建一個(gè)新的元素，并傳遞給 ReactDOM.render()。

在實(shí)踐中，大多數(shù)應(yīng)用程序只調(diào)用一次 ReactDOM.render()。

當(dāng)調(diào)用 ReactDOM.render() 時(shí)，只有發(fā)生改變的節(jié)點(diǎn)才會(huì)被 React DOM 更新。

組件和屬性

從概念上講，組件就像 JavaScript 函數(shù)，它們接收輸入，并返回 React 元素。

可以使用 ECMAScript 6 的類來定義組件，類有一些額外的功能。

組件的名稱總是以大寫字母開始。

組件中可以使用組件。

如果要將 React 集成到現(xiàn)有應(yīng)用程序中去，可以優(yōu)先編寫小的組件，自下而上。

組件越小越好。

一個(gè)好的經(jīng)驗(yàn)法則：如果 UI 被多次使用，或者 UI 本身足夠復(fù)雜，那么就可以將它做成組件。

組件的屬性是只讀的。

所有的 React 組件必須像純函數(shù)那樣使用它們的屬性。

狀態(tài)和生命周期

狀態(tài)類似于屬性，但它是私有的，完全由組件控制。

componentDidMount() 在組件呈現(xiàn)到 DOM 之后運(yùn)行。

狀態(tài)有特殊的意義，如果需要存儲(chǔ)不影響視覺輸出的內(nèi)容，并不在 render() 中使用，則可以手動(dòng)向類中添加其它字段。

不要直接修改狀態(tài)，而是通過調(diào)用 this.setState() 來修改狀態(tài)。

React 可以將多個(gè) this.setState() 調(diào)用批處理為一個(gè) this.setState() 以實(shí)現(xiàn)性能上的提升。

更新狀態(tài)是異步的，不能依賴上一個(gè)狀態(tài)值來計(jì)算下一個(gè)狀態(tài)值。
要解決它，應(yīng)當(dāng)使用函數(shù)而不是對(duì)象。該函數(shù)將接收先前的狀態(tài)做為第一個(gè)參數(shù)，并將屬性做為第二個(gè)參數(shù)。

我想了解如何學(xué)習(xí)

姓名：
手機(jī)：
留言：