大約半個月前,我一直在思考一個問題,Angular、React 和 Vue,究竟該學(xué)什么?
聽取了幾位前輩的意見,也綜合考慮了各方面的原因,最終選擇了 React,希望我“沒有選錯”。
十天的時間,把 React 的快速入門文檔給過了一遍,整理了一些筆記,現(xiàn)在記錄如下。
JSX 簡介
可以在 JSX 中嵌入 JavaScript 表達(dá)式,并用花括號包裹。
使用括號包裹 JSX 表達(dá)式,并將其拆分為多行以提高可讀性。也可以避免自動插入分號。
由于 JSX 是在 JavaScript 中使用的,React DOM 的屬性使用 camelCase 命名。
JSX 是安全的,可以防止注入攻擊。
渲染元素
元素是元素,組件是組件。
React 元素是只讀的,一旦創(chuàng)建,就不能改變它的子元素和屬性。
就目前來說,更新 UI 的唯一方法是創(chuàng)建一個新的元素,并傳遞給 ReactDOM.render()。
在實踐中,大多數(shù)應(yīng)用程序只調(diào)用一次 ReactDOM.render()。
當(dāng)調(diào)用 ReactDOM.render() 時,只有發(fā)生改變的節(jié)點才會被 React DOM 更新。
組件和屬性
從概念上講,組件就像 JavaScript 函數(shù),它們接收輸入,并返回 React 元素。
可以使用 ECMAScript 6 的類來定義組件,類有一些額外的功能。
組件的名稱總是以大寫字母開始。
組件中可以使用組件。
如果要將 React 集成到現(xiàn)有應(yīng)用程序中去,可以優(yōu)先編寫小的組件,自下而上。
組件越小越好。
一個好的經(jīng)驗法則:如果 UI 被多次使用,或者 UI 本身足夠復(fù)雜,那么就可以將它做成組件。
組件的屬性是只讀的。
所有的 React 組件必須像純函數(shù)那樣使用它們的屬性。
狀態(tài)和生命周期
狀態(tài)類似于屬性,但它是私有的,完全由組件控制。
componentDidMount() 在組件呈現(xiàn)到 DOM 之后運行。
狀態(tài)有特殊的意義,如果需要存儲不影響視覺輸出的內(nèi)容,并不在 render() 中使用,則可以手動向類中添加其它字段。
不要直接修改狀態(tài),而是通過調(diào)用 this.setState() 來修改狀態(tài)。
React 可以將多個 this.setState() 調(diào)用批處理為一個 this.setState() 以實現(xiàn)性能上的提升。
更新狀態(tài)是異步的,不能依賴上一個狀態(tài)值來計算下一個狀態(tài)值。
要解決它,應(yīng)當(dāng)使用函數(shù)而不是對象。該函數(shù)將接收先前的狀態(tài)做為第一個參數(shù),并將屬性做為第二個參數(shù)。