React 16.2.x全新全譯

全文翻譯自React 16.2.0英文文檔，適當精簡了生產環境不常使用的內容，並對部分比較複雜的概念進行了更加翔實的解讀，以及與Vue2進行了一些特性方面的比較。本文首先對React 16所帶來的一系列變化和新特性進行解讀，然後覆蓋了React官網Docs當中的Quick Start和Advanced Guides的內容，最後對tutorial的完整示例代碼進行分析。應該是目前最新、最完整的React上手指南，適合已經具備組件式前端框架開發經驗的同學快速上手React 16。

快速開始

如果使用npm作為依賴管理工具，可以通過下面命令安裝React。

npm install --save react react-dom

一個使用ES6的最簡單例子是這樣的：

import React from react;import ReactDOM from react-dom;ReactDOM.render( <h1>Hello, React 16.2.0 !</h1>, document.getElementById(app));

當然，也可以使用獨立的React發布包，直接在<script>標籤當中包含使用。

<!-- Development Versions--><script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!-- Production Versions --><script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

JSX

JSX是一個具有JavaScript編程特性的類HTML標籤語言，目前TypeScript和Vue2都已經對JSX語法提供了良好的支持，廣泛的應用於現代化前端開發當中。

向JSX中嵌入表達式

開發人員可以通過花括弧語法{}嵌入JavaScript表達式（例如2+2、user.name、auth(user)）。

function auth(user) { return user.name + + user.password;}const user = { name: hank, password: 12345};const element = ( <h1> User Info：{auth(user)}. </h1>);ReactDOM.render( element, document.getElementById("app"));

通過使用圓括弧語法()，可以方便的書寫多行JSX。

JSX本身也是一種表達式

編譯之後，JSX表達式會被轉換為標準的JavaScript對象。這意味著可以在JSX中使用if和for等JavaScript語句、指定一個變數、接收其作為參數、甚至是從一個函數當中返回它們。

function getUserInfo(user) { if (user) { return <h1>User Info：{auth(user)}</h1>; } return <h1>No Info.</h1>;}

指定JSX的屬性

可以使用引號"指定一個字元串字面量作為JSX的屬性。

const element1 = <div className="dashboard"></div>;const element2 = <div tabIndex="0"></div>;

推薦閱讀：