參加了華為雲的大前端全棧成長計划學習課程，每次學習一個新的知識后都要總結一下學習的過程，這樣有助於自己的知識整理，內容回顧，加深記憶。從前端基礎Html，CSS，JavaScript的學習，移動端H5開發的學習，到前端框架NodeJs、Vue的學習，現在已經到了最后一個階段了。既然想在技術這個行業成長，那就要時刻保持對新技術和流行技術的敏感性，而React，Vue和Angular已占領了前端的大部分市場，因此我們也要學習和了解這些主流框架方面的知識。
這篇文章我們主要來總結一下React的學習過程，React是一個聲明式，高效且靈活的用於構建用戶界面的JavaScript庫，主要用來構建UI，是起源於Facebook的一個內部項目。React的生態完善，社區活躍，官方文檔也比較詳細，學起來也比較容易。可以參考官方文檔：React
創建項目
1.靜態頁面創建
頁面直接引入React，ReactDOM的js文件：react.js，react-dom.js，
頁面CDN引入：
React：https://cdn.bootcdn.net/ajax/libs/react/16.14.0/umd/react.development.js
ReactDOM：https://cdn.bootcdn.net/ajax/libs/react-dom/16.14.0/cjs/react-dom.development.js
2.通過腳手架創建
全局安裝：npm install -g create-react-app
創建項目：create-react-app react-demo
有了vue的基礎，我們直接通過腳手架創建項目，開始我們React的學習旅程。
目錄結構
react-demo --node_modules // 項目依賴包 --public // 公共資源文件，如：圖片，json文件等 --src // 項目頁面組件，樣式，腳本文件，路由等 --package.json // 項目webpack配置和包管理文件 --README.md // 項目說明文件
運行：npm run start
項目模板的初始頁面就可以訪問了：http://localhost:3000/
渲染組件
文件 src/index.js
可以看到 ReactDOM.render() ，渲染組件（App），把模板轉換成html語言並插入到指定的節點。
導入 react（import React from 'react'），react-dom（import ReactDOM from 'react-dom'）
文件src/App.js
這里使用了JSX語法寫html頁面，遇到html標簽（例如：<>）就用html解析，遇到代碼塊（例如：{ }）就用javascript規則解析。
可以嘗試修改里面的內容，預覽效果。
數據綁定
React里面沒有像Vue里面那么簡單的數據綁定功能，這里需要我們自己去完成表單控件的數據綁定的功能。
使用狀態 state 存儲輸入控件的值，使用 onChange 的回調函數，通過 this.setState 修改 state 里面的值，每次修改完會自動調用 this.render 方法，再次渲染組件。這樣就可以實現輸入框的數據綁定。
import React, { Component } from 'react'
export default class AddUser extends Component {
// 定義狀態
state = {
userName: "",
userAge: ""
}
// 定義表單控件輸入框事件
handleChange = (event)=>{
// 獲取控件名稱 name
const name = event.target.name;
this.setState({
[name]: event.target.value // 獲取控件的值
});
}
// 定義按鈕事件
handleAddUser = () => {
console.log("用戶名和年齡：", this.state)
}
render() {
return (
<div>
<div><input name="userName" value={this.state.userName} onChange={this.handleChange} placeholder="請輸入用戶名" /></div>
<div><input name="userAge" value={this.state.userAge} onChange={this.handleChange} placeholder="請輸入年齡" /></div>
<div><input onClick={this.handleAddUser} value="添加"/></div>
</div>
)
}
}
生命周期
React中組件的生命周期分為三個狀態，Mounting是已經插入真實DOM，Updating是正在被重新渲染，Unmounting是已移出真實DOM。每個狀態都有兩種處理函數，will函數是進入狀態之前，did函數是進入狀態之后，共有五個函數如下：
componentWillMount()
componentDidMount()，一般會在這個里面請求數據
componentWillUpdate(object nextProps,object nextState)
componentWillUpdate(object prevState, object prevState)
componentWillUnMount()，這里面一般會清除定時器，清空對象
唯一ID生成器
nanoid是一個非常小巧，安全友好的JavaScript唯一ID生成器，比 uuid 更可靠和易用，源碼地址：https://github.com/ai/nanoid
在模擬添加數據的時候，一般都會需要一個唯一ID值，那么我們就使用 nanoid 來生成這個ID值。
安裝：npm install nanoid --save
導入：import { nanoid } from 'nanoid'
使用：const id = nanoid();
其它使用方法參考文檔：https://www.npmjs.com/package/nanoid
Props
Props 是只讀的，不能修改自身的props，父子組件傳值就要通過 props 來完成。
Props 驗證使用 propTypes，它可以保證我們的應用組件被正確使用。參考：https://www.npmjs.com/package/prop-types
安裝：npm install prop-types --save
發布訂閱（pubsub-js）
React的父子組件之間可以通過props傳遞值，如果組件和組件之間需要傳值的話要借助它們的父組件進行傳值，這樣父組件需要定義state和寫好多回調函數。如果想在任意組件傳遞數據可以使用 pubsub-js 來完成。
安裝：npm install pubsub-js --save
導入：import PubSub from 'pubsub-js'
使用：
PubSub.publish('name', param) // 發布訂閱，name: 發布的消息名，param：提供給訂閱者的參數
PubSub.subscribe('name', func) // 訂閱消息，name: 發布的消息名，func：事件的監聽函數
var func = function(msg, data) {
console.log(msg,data);
}
PubSub.unsubscribe('name') // 取消訂閱
有關 pubsub-js 的其它用法，可以參考文檔：https://www.npmjs.com/package/pubsub-js
調試工具
谷歌瀏覽器安裝插件：react developer tools，打開開發者工具，調試窗口如下圖：
溫馨提示
文章內容如果寫的存在問題歡迎留言指出，讓我們共同交流，共同探討，共同進步~~~
文章如果對你有幫助，動動你的小手點個贊，鼓勵一下，給我前行的動力。