參加了華為云的大前端全堆疊成長計劃學習課程，每次學習一個新的知識后都要總結一下學習的程序，這樣有助于自己的知識整理，內容回顧，加深記憶，從前端基礎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=https://www.cnblogs.com/ZHF/archive/2021/10/28/{this.state.userName} onChange={this.handleChange} placeholder="請輸入用戶名" /></div>
<div><input name="userAge" value=https://www.cnblogs.com/ZHF/archive/2021/10/28/{this.state.userAge} onChange={this.handleChange} placeholder="請輸入年齡" /></div>
<div><input onClick={this.handleAddUser} value="https://www.cnblogs.com/ZHF/archive/2021/10/28/添加"/></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，打開開發者工具，除錯視窗如下圖：
溫馨提示
文章內容如果寫的存在問題歡迎留言指出，讓我們共同交流，共同探討，共同進步~~~
文章如果對你有幫助，動動你的小手點個贊，鼓勵一下，給我前行的動力，
作者：zeke
出處：http://zhf.cnblogs.com/
本文著作權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/340405.html
標籤：其他
下一篇：WebGL著色器渲染小游戲實戰