學習React框架-總結

參加了華爲雲的大前端全棧成長計劃學習課程,每次學習一個新的知識後都要總結一下學習的過程,這樣有助於自己的知識整理,內容回顧,加深記憶。從前端基礎Html,CSS,JavaScript的學習,移動端H5開發的學習,到前端框架NodeJs、Vue的學習,現在已經到了最後一個階段了。既然想在技術這個行業成長,那就要時刻保持對新技術和流行技術的敏感性,而React,Vue和Angular已佔領了前端的大部分市場,因此我們也要學習和了解這些主流框架方面的知識。

這篇文章我們主要來總結一下React的學習過程,React是一個聲明式,高效且靈活的用於構建用戶界面的JavaScript庫,主要用來構建UI,是起源於Facebook的一個內部項目。React的生態完善,社區活躍,官方文檔也比較詳細,學起來也比較容易。可以參考官方文檔:React 

創建項目

1.靜態頁面創建

頁面直接引入React,ReactDOM的js文件:react.jsreact-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,打開開發者工具,調試窗口如下圖:

溫馨提示

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章