React組件（推薦，差代碼）

時間 2019-11-17

標籤 react 組件推薦代碼欄目 React 简体版

原文原文鏈接

課程地址：https://www.imooc.com/learn/944css

認識React

JSX—一種語法結構html

1、環境安裝：

1.HTTP服務器

安裝python3.5.2python

創建項目文件夾react_pyreact

打開teminal（windows上我安裝的cmder）git

進入該目錄下ajax

啓動服務器命令json

python -m http.server

2.相關準備

安置須要的框架文件windows

react官方連接：https://reactjs.org/瀏覽器

react官方教程：https://reactjs.org/tutorial/tutorial.html服務器

在右上方git中下載最新版本的master（速度挺慢的），看例子

cdn連接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

複製上面的連接，瀏覽器打開，分別複製內容到新建的js文件中

附加（sublime3）下載：https://www.sublimetext.com/3

index.html爲新建文件

開啓瀏覽器：http://localhost:8000/component/index.html

說明能夠跑起來了

2、組件化

1.組件化思想

引入框架到文件中

ctrl+F5刷新（F12-開發者模式，查看console控制檯發現紅色文字報錯，警告：說明不太正規）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello react</title>
	<script src='react.js'></script>
	<script src='react-dom.js'></script>
	<script src='browser.min.js'></script>
</head>
<body>
	<script type='text/babel'>
		ReactDOM.render(
			<h1>I am Tyler</h1>,
			document.body
		)
	</script>
</body>
</html>

掛載節點父元素-body元素，通常不要掛載在body上

2.react組件化

利用函數思想渲染頁面，複雜組件由簡單組件組成

作一個hello world組件：

jsx對象

增長jsx文件，經過react解析，而後dom掛載

渲染

經過react提供的creatClass組件建立，上面函數中render做用是在渲染的時候會調用下面render函數，獲得jsx對象，改變dom模型，進而改變界面

Helloworld就是一個組件

使用的時候就在ReactDOM.render裏面加載

顯示出來

組件的優越處：可重用性

增長組件的父節點和其餘兄弟節點

組件輸入參數：

this指代整個HelloWorld組件對象，props是組件的數據對象，greetTarget是參數名

輸入不一樣參數

3.組件樣式設計

pros.children

添加組件，涉及根節點

在react下class是關鍵字，應該使用className

react下設計邏輯和頁面邏輯的整合：

把界面設計邏輯封裝成一個json對象，把這個對象放在react空間的代碼塊裏面

把界面顯示屬性封裝在letterStyle裏，刪除style

把對象放到render函數裏，css語法整合在js裏

設置不一樣顏色，組件顯示的可配置化

設計複合式控件（相似調色板）：

基本框架代碼

Square爲上方顏色空間，Label爲下方文字空間

Card爲兩個空間的結合，把其繪製到根節點下

Card空間裝飾

4.組件實現

color變量屬性

字空間的color先經過父屬性傳遞

修改可變，空間可重用

5.組件屬性的傳遞

react不能直接從1到5，屬性也不能反向傳遞（子到父）

使用基本框架代碼

外層組件

在外層屬性

最外層設置屬性值

屬性傳遞不靈活

使用ES6 中{...}語法，屬性的擴展操做符

6.組件狀態機制

靈活？組件是程序的基本單位。須要存儲機制-組件的狀態機制

在基本框架裏新建對象

增長顯示樣式

增長背景顏色

基本邏輯完成

瞭解幾個js原生接口：

getInitialState——組件加載以前會被調用-初始化組件

componentDidMount——組件被瀏覽器加載以後，可是render函數尚未被調用以前

這裏是調用定時器的最佳時期

setState——用來修改組件自己的state對象

timerTrick是個回調函數

計數開始變化

調用機制：

getInitialState初始化加載 —> componentDidMount被調用 —> 定時器開啓 —> 觸發上圖render函數 —> 若是render裏面引用了他的子組件，子組件的render也會被自動調用，會引起render函數的調用浪潮，整個界面的信息會自動發生改變 —> 使得底層數據和界面保持一致

增長界面修飾內容：

數據顯示

增長屬性對象

3、組件的生命週期

幾個重要的生命週期函數

對應this.props

對應this.state

掛在到#container下

說明組件被框架加載到頁面了

頁面繪製

生命週期順序1-組件生成

getDefaultProps —> getInitialState —> componentWillMount —> render —> componentDidmount

增長頁面樣式

建立子組件Counter，增長display顯示屬性

傳遞值0

變量初始化爲0

增長increase函數

添加函數

shouldComponentUpdate生命週期函數

參數newPros對應的是getDefaultProps函數的rentrun對象

newStae對應的是更新好的count對象

若是返回值是true的話會繼續調用，若是不是就會中止調用後續的生命週期函數

shouldComponentUpdate是個很重要的周期函數，它的邏輯關係到整個生命週期

componentWillUpdate,componentDidUpdate生命週期函數

生命週期順序2-組件調用

getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (true) —> componentWillUpdate (false) —> render —> componentDidUpdate

一個正常的生命週期流程

getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (false)

5時中止調用後續

getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount—> render —> shouldComponentUpdate (true) —> componentWillUpdate (true) —> shouldComponentUpdate (true) —> componentWillUpdate ...

1-4時反覆調用

探索更新週期

componentWillUnmount生命週期：用於結束某些組件

在shouldComponentUpdate中添加拿掉節點的react語句

生命週期順序3-組件消亡：

getDefaultProps —> getInitialState —> componentWillMount —> componentDidmount —> render —> shouldComponentUpdate (true) —> componentWillUpdate (false) —> render —> componentDidUpdate —> shouldComponentUpdate (false) —> componentWillUnmount(定時器組件被拿掉前，作收尾處理)

comentWillReceiveProps生命週期

shouldComponentUpdate生命週期

componentWillUpdate生命週期

接下來調用render

componentDidUpdate生命週期

在組件上設置斷點

點擊+

繼續斷點，以後調用render，把相應的值繪製

生命週期順序總結：

getDefaultProps-getInitialState-componentWillMount-componentDidMount-shouldcomponentUpadate-componentWillReceiveProps-shouldcomponentUpadate-componentWillUpdate-render-componentDidUpate