React 學習筆記
React入門
React由Facebook開發，它是一個用於構建使用者介面/檢視的JavaScript庫
- 起初由Facebook的軟體工程師Jordan Walke建立
- 於2011年部署於Facebook的newsfeed
- 隨後在2012年部署於Instagram
- 2013年5月宣佈開源。
為什麼要學React？
-
原生JavaScript操作DOM繁瑣、效率低 (DOM-API操作UI)
document.getElementById('...'); -
使用JavaScript直接操作DOM，瀏覽器會進行大量的迴流重繪
-
原生JavaScript沒有元件化/模組化的編碼方案，程式碼複用率低。
React的特點
- 採用元件化/模組化模式、宣告式編碼，提高開發效率及元件複用率。
- 在React Native中可以是用React與法進行移動端開發
- 使用虛擬DOM和優秀的Diffing演算法，儘量減少與真實DOM的互動。
引包
react.development.js ===>> React核心庫
react-dom.development.js ===>> React擴充套件庫，用於支援react操作dom
prop-types.js ===>> 型別檢查庫
babel.min.js ===>> 語法轉換核心庫，jsx 轉 js
<!-- 引入react核心庫 --> <script src="../js/react.development.js"></script> <!-- 引入react擴充套件庫，用於react支援操作dom --> <script src="../js/react-dom.development.js"></script> <!-- 引入babel，用於將es6轉es5和jsx轉js --> <script src="../js/babel.min.js"></script>
注意編寫程式碼的script標籤一定要指定型別
type="text/babel"告訴瀏覽器使用babel來翻譯
<script type="text/babel"></script>
Hello React
先準備好一個容器，React會將虛擬dom渲染到這個容器中
<div id="app"></div>
建立一個虛擬dom，注意此處<h1>...</h1>不需要使用引號引起來。
// 建立虛擬dom
const vdom = <h1>Hello React!</h1>;
將虛擬dom渲染到容器上
// 渲染虛擬dom
ReactDOM.render(vdom, app);
啟動走你～～
建立虛擬DOM的第二種方式
在React中，除了使用jsx建立虛擬DOM外，還可以以使用js來進行建立。這需要使用到React核心庫提供的React.createElementAPI進行建立。它有三個引數：
- 第一個引數：標籤名
- 第二個引數：標籤屬性
- 第N個引數：標籤內容
<!-- 引入react核心庫 -->
<script src="../js/react.development.js"></script>
<!-- 引入react擴充套件庫，用於react支援操作dom -->
<script src="../js/react-dom.development.js"></script>
<div id="app"></div>
<script>
const attr = {id: 'hello'}
// 建立虛擬dom
const vdom = React.createElement('h1',attr , 'Hello React!');
// 渲染虛擬dom
ReactDOM.render(vdom, app);
</script>
虛擬DOM與真實DOM
- 虛擬DOM它本質是一個Object型別的物件（一般物件）
- 虛擬DOM比較“輕”，而真實DOM比較“重”，因為虛擬DOM是React內部在用，用不上真實DOM上那麼多的屬性。
- 虛擬DOM最終會被React轉化為真實DOM呈現在頁面上。
JSX
-
全稱叫JavaScript XMl
-
JSX是React定義的一種類似於XML的js拓展語法：JS + XML
-
本質是
React.createElement(component, props, ...children)方法的語法糖。 -
JSX用於簡化建立虛擬DOM
-
寫法
const ele = <h1>Hello JSX!</h1>; -
他不是字串，也不是HTML/XML標籤
-
它最終產生的就是一個JS物件
-
-
標籤名可以是HTML標籤，也可以是其他標籤。
JSX語法規則
-
定義虛擬DOM的時候不要寫引號
const vdom = ( <h1 id="clover"> <span>Hello React!</span> </h1> ); -
標籤中要混入JS表示式時需要使用
{}const author = "clover"; const body = "hello world!"; // 建立虛擬dom const vdom = ( <h1 id={author}> <span>{body}</span> </h1> ); -
樣式的類名指定不要使用
class，需要使用className<style> .myStyle { background-color: bisque; font-size: 20px; } </style> const vdom = ( <h1 className="myStyle" id="clover"> <span>hello world!</span> </h1> ); -
jsx中，若想使用內聯樣式，不能使用html中的語法
style="color: #900"，需要傳遞一個json到style屬性中。const vdom = ( <h1 id="clover"> <span style={{color: '#900', fontSize: '20px'}}>Hello React!</span> </h1> ); -
虛擬DOM必須只有一個根標籤，不允許出現多個根標籤，例如：
const vdom = ( <h1 id="clover">..</h1> <h1 id="clover">..</h1> ); -
必須有閉合標籤或自閉和
-
標籤命名
- 若是小寫字母開頭，則將該標籤轉為html中同名元素，若html中無該標籤，則丟擲異常。
- 若大寫字母開頭，React就去渲染對應的元件，若找不到該元件，則丟擲錯誤。
模組與元件
模組
- 對外提供特定功能的js程式，一般就是一個js檔案
- 隨著業務邏輯的增加，程式碼越來越多且複雜，為了提高程式碼質量、複用性、執行效率和閱讀性，所以將不同功能點抽取成一個個模組。
- 當應用的js都是以模組的方式來編寫時，那麼這個應用就可以被定義為一個模組化的應用。
元件
- 元件是用來實現區域性功能效果的程式碼和資源的集合
- 隨著介面功能越來越複雜，元件化的方式能夠提高程式碼質量、複用性和閱讀性。
- 當應用是以多元件的方式實現，那麼這個應用就會被定義為一個元件化的應用。
React面向元件程式設計
函式式元件
定義函式式元件，注意首字母一定要大寫，並且函式必須有返回值
function FnComponent() {
return <div>我是函式式元件</div>;
}
將這個元件渲染到頁面上
ReactDOM.render(<FnComponent/>, app);
在這裡時注意，FnComponent元件中的this是一個undefined，因為在經過babel翻譯之後開啟了嚴格模式。
在React執行了ReactDOM.render(<FnComponent/>, app);之後發生了兩件事：
- React解析元件標籤，找到
FnComponent元件 - 發現元件時使用函式定義的，隨後呼叫該函式將返回的虛擬DOM轉為真實DOM呈現在頁面中。
類式元件
建立一個類，首字母要大寫並且繼承React.Component，在這個類中，必須有一個render方法，並且這個方法必須返回一個虛擬DOM。
class ClassComponent extends React.Component{
render() {
return <div>你好</div>;
}
}
ReactDOM.render(<ClassComponent/>, app);