學習React架構-總結

參加了華為雲的大前端全棧成長計劃學習課程，每次學習一個新的知識後都要總結一下學習的過程，這樣有助于自己的知識整理，内容回顧，加深記憶。從前端基礎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的學習旅程。

目錄結構

運作：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 方法，再次渲染元件。這樣就可以實作輸入框的資料綁定。

生命周期

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，打開開發者工具，調試視窗如下圖：

溫馨提示

文章内容如果寫的存在問題歡迎留言指出，讓我們共同交流，共同探讨，共同進步~~~

文章如果對你有幫助，動動你的小手點個贊，鼓勵一下，給我前行的動力。