React 入門實例教程

最近又重新學習了一遍React基礎，下面自己做下簡單的筆記總結。

一、React的起源
React起源於Facebook的內部項目，因爲該公司對市場上的所有Javascript MVC框架都不滿意，就決定自己寫一套，用來架設Instagram的網站。做出來之後，發現這套東西很好用，就在2013年5月開源了。
React 官網：https://reactjs.org/

由於React的設計思想及其獨特，屬於革命性創新，性能出衆，代碼邏輯簡單，所以，越來越多的人開始關注和使用，認爲它可能是將來Web開發的主流工具。

這個項目本身也越來越大，從最早的UI引擎變成了一整套前後端通吃的Web App解決方案。衍生的React Native項目，目標更是宏偉，希望用寫Web App的方式去寫Native App。如果能夠實現，整個互聯網行業都會被顛覆，因爲同一組人只需要寫一次UI，就能同時運行在服務器、瀏覽器和手機。

阮一峯老師寫過一個React Demos：https://github.com/ruanyf/react-demos，大家可以做下學習參考。

二、React 概覽

React是一個聲明式，高效且靈活的用於構建用戶界面的JavaScript庫。使用React可以將一些簡短、獨立的代碼片段組合成複雜的UI界面，這些代碼片段被稱作“組件”。

React的核心思想：封裝組件。
各個組件維護自己的狀態和UI，當狀態變更，自動重新渲染整個組件。
基於這種方式的一個直觀感受就是我們不在需要不厭其煩地來回查找某個DOM元素，然後操作DOM去更改UI。
React大體包含下面這些概念：

組件
JSX
Virtual DOM
Data Flow

這裏通過一個簡單的組件來快速瞭解這些概念，以及建立對React的一個總體認識。

import React, { Component } from 'react';
import { render } from 'react-dom';

class HelloMessage extends Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

// 加載組件到 DOM 元素 mountNode
render(<HelloMessage name="John" />, mountNode);

組件
React 應用都是構建在組件之上。
上面的HelloMessage 就是一個React構建的組件，最後一句render會把這個組件顯示到頁面上的某個元素mountNode裏面，顯示的內容就是

Hello John

。

props是組件包含的兩個組件概念之一，另一個是state（這個組件沒用到）。可以把props
看作是組件的配置屬性，在組件內部是不變的，只是在掉用這個組件的時候傳入不同的屬性（比如這裏的name）來定製顯示這個組件。

JSX
從上面的代碼可以看到將HTML直接嵌入了JS代碼裏面，這個就是React提出的一種叫JSX的語法，這應該是最開始接觸React最不能接受的設定之一，因爲前端被“表現和邏輯層分離”這種思想“洗腦”太久了。但實際上組件的HTML是組成一個組件不可分割的一部分，能夠將HTML封裝起來纔是組件的完全體，React發明了JSX讓JS支持嵌入HTML不得不說是一種非常聰明的做法，讓前端實現真正意義上的組件化成爲了可能。

好消息是你可以不一定使用這種語法，後面會進一步介紹JSX，到時候你可能就會喜歡上了。現在要知道的是，要使用包含JSX的組件，是需要“編譯”輸出JS代碼才能使用的，之後就會講到開發環境。

VIrtual DOM
當組件狀態state有更改的時候，React會自動調用組件的render方法重新渲染整個組件的UI。
當然如果真的這樣大面積的操作DOM，性能會是一個很大的問題，所以React實現了一個Virtual DOM，組件DOM結構就是映射到這個Virtual DOM上，React在這個Virtual DOM上實現了一個diff算法，當要重新渲染組件的時間，會通過diff尋找到要變更的DOM節點，再把這個修改更新到瀏覽器實際的DOM節點上，所以實際上不是真的渲染整個DOM樹。這個Virtual DOM是一個純粹的JS數據結構，所以性能會比原生DOM快很多。

DATA FLOW
“單向數據綁定”是 React 推崇的一種應用架構的方式。當應用足夠複雜時才能體會到它的好處，雖然在一般應用場景下你可能不會意識到它的存在，也不會影響你開始使用 React，你只要先知道有這麼個概念。

三、React的安裝和項目構建

具體步驟：
1、確保你安裝了較新版本的Node.js。
2、按照Create React App安裝指南創建有一個新的項目

$ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

四、React 特點

1.聲明式設計 −React採用聲明範式，可以輕鬆描述應用。

2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的交互。

3.靈活 −React可以與已知的庫或框架很好地配合。

4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。

5.組件 − 通過 React 構建組件，使得代碼更加容易得到複用，能夠很好的應用在大項目的開發中。

6.單向響應的數據流 − React 實現了單向響應的數據流，從而減少了重複代碼，這也是它爲什麼比傳統數據綁定更簡單

五、React 的一個實例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);
</script>

</body>
</html>

六、React 知識點總結
https://blog.csdn.net/weixin_42881744/article/details/104171934

七、React 生命週期
https://blog.csdn.net/weixin_42881744/article/details/104192170