以下內容是我在學習和研究React時，對React的特性、重點和注意事項的提取、精練和總結，可以做為React特性的字典，方便大家查閱；
目錄
1. 性能優化
2. JSX語法
3. 注釋
4. React元素
5. 組件
6. 標簽屬性
7. 元素的子代
8. props的類型檢查
9. props的默認值
10. 狀態state
11. Props和State
12. 事件處理
13. key
14. 表單
15. 元素的引用
16. 上下文 Context
17. 不使用ES6
18. React的特性
19. React的理解
20. React術語的概念
內容
1. 性能優化
- 雖然 props 由React本身設置以及 state 用于存儲狀態，但如果需要存儲不用于視覺輸出的東西，則建議通過手動向類或實例中添加相應屬性來存儲，而不應用 state 和 props 來存儲；
- 如果在組件的鉤子方法shouldComponentUpdate中返回false，則React不會對該組件及其子組件進行變化檢查和渲染，所以，應在組件不需要更新的情況下，讓鉤子方法shouldComponentUpdate內返回false；
- 因為
React.PureComponent類型的組件在做變化檢查時是用淺比較來判斷是否有變化的，所以性能較快，所以：對于沒有必須進行深比較的組件，優先使用React.PureComponent而不是React.Componen； - 避免觸發
componentDidUpdate中不必要的更新邏輯：componentDidUpdate鉤子會在每次更新時都會觸發，但并不是所有的邏輯都需要要更新時重新觸發，可以通過傳給componentDidUpdate的prevProps和prevState來判斷關注的部分變化與否，然后再決定是否觸發更新邏輯； - 合理的使用key；
2. JSX語法
- JSX 語法的解析規則是：遇到 XML 標簽 <...>，以 XML 規則解析；遇到代碼塊 {...}，就用 JavaScript 規則解析；
- 在JSX中，XML可以理解為是創建虛擬DOM對象的字面量寫法；在編譯之后呢，XML標簽 會被轉化為 React.createElement() 函數的調用；
下面兩種代碼的作用是完全相同的：
等效于：const element = ( <h1 className="greeting"> Hello, world! </> );
React.createElement() 這個方法首先會進行一些避免bug的檢查，之后會返回一個類似下面例子的對象：const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
這樣的對象被稱為 “React 元素”。它代表所有你在屏幕上看到的東西。React 通過讀取這些對象來構建 DOM 并保持數據內容一致。// 注意: 以下示例是簡化過的（不代表在 React 源碼中是這樣） const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } }; - JSX 允許直接在模板插入 JavaScript 變量；如果這個變量是一個數組，則會展開這個數組的所有成員；
- 如果 JSX 中的XML帶有換行，則推薦，有XML的外面加上一個小括號，這樣可以防止 分號自動插入 的bug；
- 在JSX中的XML，通過引號定義以字符串為值的標簽屬性：
const element = <div tabIndex="0"></div>;，通過大括號來定義以 JavaScript 表達式為值的標簽屬性：const element = <img src={user.avatarUrl}></img>;；切注意：如果使用了大括號包裹的 JavaScript 表達式時就不要再到外面套引號了。JSX 會將引號當中的內容識別為字符串而不是表達式； - JSX不允許沒有閉合的標簽；
- 因為 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 XML 使用 camelCase 小駝峰命名 來定義屬性的名稱，而不是使用 HTML 的屬性名稱;例如：class 用 className 代替，而 tabindex 用 tabIndex 代替；
- React DOM 在渲染之前默認會 過濾 所有傳入的值。它可以確保應用不會被注入攻擊。所有的內容在渲染之前都被轉換成了字符串。這樣可以有效地防止 XSS(跨站腳本) 攻擊；
3. 注釋
由于JSX的本質是JavaScript，所以在JSX中的注釋還是JavaScript的注釋；為了JSX的XML中使用注釋，所以需要用先用花括號{}產生JavaScript環境，然后在{}內使用JavaScript注釋；
所以，關于的注釋的規則總結如下：
- 在標簽內部的注釋需要花括號
{}括住； - 在標簽外的注釋不使用花括號
{}；
4. React元素
- 元素是構成 React 應用的最小單位；元素用來描述你在屏幕上看到的內容，如下：
const element = <h1>Hello, world</h1>;； - React元素與瀏覽器的 DOM 元素不同，React 當中的元素事實上是普通的對象，React DOM 可以確保 瀏覽器 DOM 的數據內容與 React 元素保持一致；
- React 元素都是不可變的。當元素被創建之后，是無法改變其內容或屬性的。一個元素就好像是動畫里的一幀，它代表應用界面在某一時間點的樣子。更新界面的唯一辦法是創建一個新的元素，然后將它傳入 ReactDOM.render() 方法；在實際生產開發中, 大多數React應用只會調用一次 ReactDOM.render()；
- 在更新視圖時，React DOM 首先會比較元素內容先后的不同，而在渲染過程中只會更新改變了的部分；
- JSX 的標簽名決定了 React 元素的類型；小寫開頭的 JSX 標簽名表示一個原生HTM元素，即內置的組件，如
<div>或<span>，在編譯時，會將字符串 'div' 或 'span' 傳 遞給 React.createElement 方法；大寫開頭的 JSX 標簽名表示一個 React 組件，如<Foo />，在編譯時，會被編譯為同名變量并被引用，如React.createElement(Foo)，所以如果使用了 大家開頭的標簽，如：<Foo />，則必須在作用域中先聲明與該標簽名同名的變量，如 Foo 變量； - 由于 JSX 編譯后會調用 React.createElement 方法，所以在 JSX 代碼中必須首先聲明或導入 React 變量；
- JSX 的標簽名可以是打點的屬性調用；如：
<MyComponents.DatePicker color="blue" />；但不能是表達式，如：<MyComponents["DatePicker"] color="blue" />是錯誤的；
5. 組件
- 從概念上看組件就像是函數，它可以接收任意的輸入值（稱之為“props”），并返回一個需要在頁面上展示的React元素；
- 當React遇到的元素是用戶自定義的組件時，它會將標簽的所有標簽屬性作為單個對象傳遞給該組件構造函數,這個對象稱之為“props”；
- 在組件內部，不允許修改props；
- 可以通過props.children獲取組件元素的開關標簽之間的內容；
- 組件可以嵌套；
- 唯一一種在 React 之外獲取 React 組件實例句柄的方式就是保存 React.render 的返回值。在其它組件內，可以使用 refs 得到相同的結果；
定義組件的方式：
- 用函數定義組件：
定義一個組件最簡單的方式是使用JavaScript函數：
該函數是一個有效的React組件，它接收一個單一的“props”對象并返回了一個React元素。我們之所以稱這種類型的組件為函數定義組件，是因為從字面上來看，它就是一個JavaScript函數。function Welcome(props) { return <h1>Hello, {props.name}</h1>; } - 通過 ES6 class 來定義組件：
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
組件的渲染
- 組件通過觸發組件實例的render方法渲染自己；
- 每個組件在渲染時也會觸發子組件的render方法渲染子組件；
- 根組件需要通過ReactDom.render方法把自身添加到指定的Dom元素上，并渲染自己；
- 組件類的頂層標簽只能有一個；
- 如果 render 返回 null，則不會渲染該組件，但并不會影響該組件生命周期方法的回調；
- 在切換組件時，會先創建和掛載新組件，然后再卸載被替換掉的組件；
6. 標簽屬性
在 JSX 中有如下幾種不同的方式來指定標簽屬性：
- 使用 JavaScript 表達式
可以傳遞任何 {} 包裹的 JavaScript 表達式作為一個標簽屬性值，如：<MyComponent foo={1 + 2 + 3 + 4} />，表達式的值最終會被賦給相應的標簽屬性。if 語句和 for 循環在 JavaScript 中不是表達式，因此它們不能直接用在標簽屬性中； - 字符串常量
可以將字符串常量作為標簽屬性值傳遞。當你傳遞一個字符串常量時，它不會對其進行 HTML 轉義，所以下面幾個 JSX 表達式是等價的：<MyComponent message="<3" /> <MyComponent message="<3" /> <MyComponent message={'<3'} /> - 默認為 True
如果沒有給標簽屬性傳值，則它默認為 true。因此下面兩個 JSX 是等價的：<MyTextBox autocomplete /> <MyTextBox autocomplete={true} /> - 擴展屬性
在 JSX中，你可以使用 ... 作為擴展操作符來傳遞整個屬性對象。
下面兩個組件是等效的：function App1() { return <Greeting firstName="Ben" lastName="Hector" />; } function App2() { const props = {firstName: 'Ben', lastName: 'Hector'}; return <Greeting {...props} />; }
7. 元素的子代
在 JSX 中，開始標簽和結束標簽之間的子代內容會作為props.children傳遞；開始標簽和結束標簽之間可以是任何類型的東西，只要該組件在 React 渲染前能將其轉換成 React 能夠理解的東西即可；
例如，可以傳遞如下類型的子代：
- 字符串常量：如果在開始和結束標簽之間放入一個字符串，則 props.children 就是那個字符串；因為 HTML 未被轉義，所以可以像寫 HTML 一樣寫 JSX；JSX 會移除行空行和開始和結尾處的空格。標簽鄰近的新行也會被移除，字符串常量內部的換行會被壓縮成一個空格；
- JSX：可以開始和結束標簽之間嵌入更多的 JSX 元素；
- JavsScript 表達式：可以將任何 {} 包裹的 JavaScript 表達式作為子代傳遞；
- 函數：可以將用 {} 包裹的函數作為子代傳遞；
- 布爾值、Null 和 Undefined 被忽略：
false、null、undefined 和 true 都是有效的子代，但它們不會直接被渲染；而當子代是React 提供的一些 "falsy" 值 （即：除了false 外，0，“”，null，undefined 和 NaN）時，則會被渲染；
下面的表達式是等價的：<div /> <div></div> <div>{false}</div> <div>{null}</div> <div>{undefined}</div> <div>{true}</div>
8. props的類型檢查
要給組件的props限制類型，則需要設置組件類的propTypes屬性；
示例代碼：
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string,
children: PropTypes.element.isRequired
};
可以通過設置propTypes的children屬性 propTypes.children 來限傳入的子代內容；
9. props的默認值
要給組件的props設置默認值，則需要設置組件類的defaultProps屬性；
defaultProps 用來確保 this.props.name 在父組件沒有特別指定的情況下，有一個初始值。類型檢查發生在 defaultProps 賦值之后，所以類型檢查也會應用在 defaultProps 上面；
示例代碼：
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// 為屬性指定默認值:
Greeting.defaultProps = {
name: 'Stranger'
};
// 渲染 "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
10. 狀態state
- 構造函數是唯一能夠初始化 this.state 的地方；
- 直接更新狀態不會重新渲染組件，如：
this.state.comment = 'Hello';；應當使用 setState()設置狀態，如：this.setState({comment: 'Hello'});； - 狀態更新可能是異步的；React 可以將多個setState() 調用合并成一個調用來提高性能。因為 this.props 和 this.state 可能是異步更新的，所以不應該依靠它們的值來計算下一個狀態，如：
應該給 setState() 傳一個函數而不是一個對象。 該函數將接收先前的狀態作為第一個參數，如：//錯誤的示范 this.setState({ counter: this.state.counter + this.props.increment, });
上方代碼使用了箭頭函數，但它也適用于常規函數；//正確的示范 this.setState((prevState, props) => ({ counter: prevState.counter + props.increment })); - 當你調用 setState(參數對象) 時，參數對象中的屬性會完全替換掉this.state中相應的屬性；
11. Props和State
- Props是組件實例的標簽屬性的集合；它可以接收組件外傳進來的值，在組件內部是不可修改Props的屬性的，在組件外部可以通過標簽屬性給它賦值，所以可以用來從組件外部給組件內部傳值；
- State是組件實例的內部數據的集合；在組件內部是可以更改State的屬性的值，且每次更改后，都會觸發render方法渲染組件；
組件的標簽屬性在使用前不用先定義；而組件的內部數據State的屬性在使用前需要先通過getInitialState方法定義；
12. 事件處理
- React事件綁定屬性的命名采用駝峰式寫法，而不是小寫。
- 如果采用 JSX 的語法，則需要傳入一個函數作為事件處理函數，而不是一個字符串(DOM元素的寫法)；處理函數接收一個事件對象，這個事件對象是 React 根據 W3C spec 來合成的事件對象，所以不需要擔心跨瀏覽器的兼容性問題；
- 不能使用返回 false 的方式阻止默認行為，必須明確的使用 preventDefault 來阻止默認行為；
示例：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('已被點擊！');
}
return (
<a href="#" onClick={handleClick}>
點擊我
</a>
);
}
13. key
- key必須在其兄弟節點中是唯一的，而非全局唯一；
- key會作為給React的提示，但不會傳遞給你的組件，即不會成為props中的屬性；
14. 表單
- 對于 textarea 元素，在HTML當中，是通過子節點（開關標簽之間的內容）來定義它的文本內容的，而在React中，是通過 標簽屬性value來設置它的文本內容的；
- 對于 select 標簽，在HTML中，是通過在設置它的選項option元素的標簽屬性selected來設置被選中的選項的；而在React中，是通過設置 select 元素的標簽屬性 value 來設置被選中的值的；
- 通過給表單元素設置標簽屬性 defaultValue 可以為其指定初始值；
15. 元素的引用
元素的標簽屬性 ref 接受一個回調函數，它在元素被加載或卸載時執行；該回調函數接收一個參數，
在元素被加載時：
如果該元素是原生的HTML元素，則參數是該元素的DOM節點實例；
如果該元素是React組件，則參數是該元素的Reac實例；
在元素被卸載時：參數是null；
注意：
- 對函數式組件（用函數定義的組件）設置ref無效；
- 如果 ref 回調以內聯函數的方式定義，在更新期間它會被調用兩次，第一次參數是 null ，之后參數是元素的實例。這是因為在每次渲染中都會創建一個新的函數實例。因此，React 需要清理舊的 ref 并且設置新的；
- 舊版 React 的 ref 是 string 類型的，用于指定 引用名 ，通過 組件實例的 this.refs.textInput.引用名 來訪問 被引用的DOM節點。因為 String 類型的 refs 存在問題。它已過時并可能會在未來的版本中被移除。建議使用回調函數的方式代替；
16. 上下文 Context
Context 是React提供的可用于在組件層級間（父子孫等組件）共享數據的一種機制，但Ract建議：能用 State 做的，盡量不要用 Context 去實現；
Context 的使用特點為：組件提供的 Context ，只有其子組件可以訪問；
Context 的使用方式
定義 Context
-
在父組件中引入 PropTypes ，以便定義類型：
import PropTypes from 'prop-types'; -
在父組件的類上定義 childContextTypes ：
Parent.childContextTypes = { attributeFun: PropTypes.func, attributeStr: PropTypes.string, ... }; -
在父組件的實例中實現 getChildContext 方法，并用其返回上下文對象供子組件使用：
class NavConfigProvider extends Component { getChildContext() { return { attributeFun: 函數值, attributeStr: 字符串值, ... }; } }
使用 Context
-
在需要使用 Context 的子組件中引入 PropTypes ，以便定義類型：
import PropTypes from 'prop-types'; -
在子組件的類上定義 childContextTypes ：
Children.contextTypes = { attributeFun: PropTypes.func, attributeStr: PropTypes.string, ... }; -
然后可以通過以下方式引用 Context 對象：
this.context- 組件的以下生命周期方法中，都會接收一個額外的 context 參數：
constructor(props, context) componentWillReceiveProps(nextProps, nextContext) shouldComponentUpdate(nextProps, nextState, nextContext) componentWillUpdate(nextProps, nextState, nextContext) componentDidUpdate(prevProps, prevState, prevContext)
注意：
從 React 16 開始， componentDidUpdate 不再接收 prevContext 。
Context 特性說明
- React 是通過類的 childContextTypes 屬性來判斷：該類是否要提供 context ；如果類有 childContextTypes 屬性的定義，則便會在每次組件的 state 或者 props 被改變時調用 getChildContext 方法獲得組件提供的 context 對象；
- React 是通過類的 contextTypes 屬性來判斷：是否要給該類傳入 context ；
- 組件提供的 context 對象，只能被其子組件接收；
- 組件可以接收不同層級的父組件提供的 context，即，即使某組件提供了 context，則該組件的子組件也能接收到該組件的父組件提供的 context；
- 在層級組件間，如果子組件提供的 context 對象的屬性 與 父組件提供的 context 對象的屬性有重名，則子組件提供的 context 對象的屬性 會覆蓋父組件提供的 context 對象的同名屬性；
- 如果組件的
shouldComponentUpdate方法返回false，則該組件的 context 將不會被更新；
17. 不使用ES6
以上是用ES6的語法創建的React組件的，當然也可以僅用ES5及以下的語法特性來創建，如下：
用 create-react-class 模塊創建組件類，代替ES6的用class創建組件類：
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
ES6 中 class 相關的接口與 createReactClass 方法十分相似，但有以下幾個區別：
- 聲明默認屬性：
- 如果使用 class 關鍵字創建組件，可以直接把自定義屬性對象寫到類的 defaultProps 屬性中；
- 如果使用 createReactClass 方法創建組件，那就需要在配置對象中定義 getDefaultProps 方法，并且在這個方法中返回包含自定義屬性的對象；
- 設置初始狀態：
- 如果使用 class 關鍵字創建組件，你可以通過在 constructor 中給 this.state 賦值的方式來定義組件的初始狀態；
- 如果使用 createReactClass 方法創建組件，你就需要多寫一個 getInitialState 方法，并讓這個方法返回你要定義的初始屬性；
- 自動綁定：
- 對于使用 class 關鍵字創建的 React 組件，組件中的方法是不會自動綁定 this 的。類似地，通過 ES6 class 生成的實例，實例上的方法也不會綁定 this。因此，你需要在 constructor 中為方法手動添加 .bind(this)；
- 如果使用 createReactClass 方法創建組件，組件中的方法會自動綁定至實例，不需要加 .bind(this)；
18. React的特性
- JSX使用大、小寫的約定來區分標簽是定義的組件類還是原生的HTML標簽；
- 由于JSX就是JavaScript，所以一些標識符（如：class和for）不能作為XML標簽的屬性名。在JSX中，使用className替代XML標簽的class屬性，htmlFor替代XML的for屬性；
- 在JSX中的XML中的花括號
{}表達式中不能使用if else語句，可以使用條件表達式(三元運算條件?值1: 值2)代替； - 組件類的頂層標簽只能有一個；
- 每次調用this.setState方法修改狀態值，都會觸發this.render方法渲染組件；
19. React的理解
一個React應用可以理解為是一個狀態機，狀態就是某一時刻（時間點）的所有相關數據的一個快照，當相關數據有變更時，就會生成一個新的狀態，每當有新的狀態時，React就會渲染一下界面生成新的一貞，以確定貞與狀態同步，可以理解為：在React中，貞用來展示狀態的，連續的多個貞就組成了React的應用界面；
React元素 是對 組件（包括：React的內置組件 和 自定義組件） 某一時刻的描述，即是組件的某一時刻的快照，所以 React元素 是組件的貞，是React應用界面的貞的一個組成部分；
20. React術語的概念
在 React 的術語中，有五個核心類型，區分它們是很重要的：
React元素：ReactElement
ReactElement 沒有方法，且原型上什么都沒有，只有四個屬性：type、props、key 和 ref；ReactElement 實例 不是 DOM元素 實例。一個 ReactElement 實例是一個輕量的，無狀態的，不可變的，虛擬的 DOM 元素 的表示，是一個虛擬 DOM；
ReactElement 實例可以通過 React.createElement 創建，如：
var reactElement = React.createElement('div');
也可以使用React的JSX語法來創建：
var reactElement = <div></div>
工廠
一個 ReactElement 工廠就是一個簡單的函數，該函數生成一個帶有特殊 type 屬性的 ReactElement。React 有一個內置的輔助方法用于創建工廠函數。該方法的邏輯是這樣的：
function createFactory(type){
return React.createElement.bind(null, type);
}
該函數能創建一個方便的短函數用來創建特定類型的ReactElement實例，而不必總調用 React.createElement(type)去創建ReactElement實例。React 已經在 React.DOM 里內置了常用的原生HTML標簽的 ReactElement實例的工廠函數 ，如：React.DOM.ul、React.DOM.li 等等；
React節點：ReactNode
ReactNode 可以是：
- ReactElement
- string （又名 ReactText）
- number （又名 ReactText）
- ReactNode 實例數組 （又名 ReactFragment）
React組件：ReactComponent
ReactComponent 類就是簡單的 JavaScript 類（或者說是“構造函數”）。
var MyComponent = React.createClass({
render: function() {
...
}
});
當該構造函數被調用的時候，會返回ReactComponent實例，ReactComponent實例至少會有一個 render 方法：
var component = new MyComponent(props);
除非為了測試，正常情況下不要自己調用該構造函數，React 會調用這個構造函數；
如果把 ReactComponent類 傳給 createElement 方法，createElement 方法就會返回一個 ReactElement 實例；
var element = React.createElement(MyComponent);
或者通過JSX語法使用ReactComponent類 也會返回一個 ReactElement 實例：
var element = <MyComponent />;
React.render方法會根據 ReactElement實例調用相應的的構造函數（ReactComponent類），然后創建并返回一個 ReactComponent實例；
var component = React.render(element, document.body);
如果一直用相同的 ReactElement 類型或相同的 DOM 元素掛載容器調用 React.render方法，將會總是返回相同的ReactComponent實例，并且該實例是被狀態化的：
var componentA = React.render(<MyComponent />, document.body);
var componentB = React.render(<MyComponent />, document.body);
componentA === componentB; // true
這就是為什么不應該直接調用ReactComponent類來創建ReactComponent實例。ReactElement 是 ReactComponent 實例的一個快照。React 可以對比新舊 ReactElement 實例之間的差異，從而決定是創建一個新的 ReactComponent 實例還是重用已有的實例；
ReactComponent實例的 render 方法應該返回另一個 ReactElement實例，表示允許ReactComponent實例被組裝；
術語的定義
入口點
React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;
節點和元素
type ReactNode = ReactElement | ReactFragment | ReactText;
type ReactElement = ReactComponentElement | ReactDOMElement;
type ReactDOMElement = {
type : string,
props : {
children : ReactNodeList,
className : string,
etc.
},
key : string | boolean | number | null,
ref : string | null
};
type ReactComponentElement<TProps> = {
type : ReactClass<TProps>,
props : TProps,
key : string | boolean | number | null,
ref : string | null
};
type ReactFragment = Array<ReactNode | ReactEmpty>;
type ReactNodeList = ReactNode | ReactEmpty;
type ReactText = string | number;
type ReactEmpty = null | undefined | boolean;
類和組件
type ReactClass<TProps> = (TProps) => ReactComponent<TProps>;
type ReactComponent<TProps> = {
props : TProps,
render : () => ReactElement
};
