技術標籤：react

文章目錄

• • • 1. react入門
    • • • 1.1 介紹描述
        • 1.2 React的特點
        • 1.3 React高效的原因
        • 1.4 相關js庫
        • 1.5 虛擬dom與真實dom
        • 1.6 jsx ( JavaScript XML)
        • 1.7 渲染虛擬dom
        • 1.8 案例
    • 2. react 面向元件程式設計
    • • • 2.1 元件三大核心屬性 state props refs
        • • 1. state
          • 2. props
          • 3. refs
        • 2.2 事件處理
        • 2.3 表單資料收集
        • 2.4 元件生命週期
    • 3. 腳手架
    • • • 3.1 元件化編碼流程
    • 4. 路由
    • • • 4.1 SPA
        • 4.2 路由的理解
    • 5. redux
    • 4. 路由
    • • • 4.1 SPA
        • 4.2 路由的理解
    • 5. redux

1. react入門

1.1 介紹描述

1. 用於動態構建使用者介面的 JavaScript 庫(只關注於檢視)

2. 由Facebook開源

1.2 React的特點

1. 宣告式編碼 區別於指令式程式設計,它的特點就是我告訴計算機做什麼,但是沒有告訴你怎麼做.

2. 元件化編碼

3. React Native 編寫原生應用

4. 高效（優秀的Diffing演算法）

1.3 React高效的原因

1. 使用虛擬(virtual)DOM, 不總是直接操作頁面真實DOM。

2. DOM Diff演算法, 最小化頁面重繪。

1.4 相關js庫

1. react.js：React核心庫。

2. react-dom.js：提供操作DOM的react擴充套件庫。

3. babel.min.js：將jsx語法程式碼轉換為js語法程式碼

1.5 虛擬dom與真實dom

// jsx 建立虛擬dom
const VDOM = React.createElement('xx',{id:'xx'},'xx')

1. 虛擬DOM物件最終都會被React轉換為真實的DOM

2. 我們編碼時基本只需要操作react的虛擬DOM相關資料, react會轉換為真實DOM變化而更新界。

1.6 jsx ( JavaScript XML)

1. react定義的一種類似於XML的JS擴充套件語法

2. 作用: 用來簡化建立虛擬DOM

   1. 寫法：var ele =

      Hello JSX!

   2. 注意1：它不是字串, 也不是HTML/XML標籤

   3. 注意2：它最終產生的就是一個JS物件

3. 基本語法規則

   1. 遇到 <開頭的程式碼, 以標籤的語法解析: html同名標籤轉換為html同名元素, 其它標籤需要特別解析

   2. 遇到以 { 開頭的程式碼，以JS語法解析: 標籤中的js表示式必須用{ }包含

1.7 渲染虛擬dom

1. 語法

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

2. 作用: 將虛擬DOM元素渲染到頁面中的真實容器DOM中顯示

3. 引數說明

   1. 引數一: 純js或jsx建立的虛擬dom物件

   2. 引數二: 用來包含虛擬DOM元素的真實dom元素物件(一般是一個div)

1.8 案例

需求: 動態展示如下列表

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-7cRBcgRz-1611125255462)(https://s3.ax1x.com/2021/01/19/s2z2RO.png)]

import React, {Component} from 'react';

class App extends Component {
    constructor(){
        super(...arguments);
        this.state = {
            allContent: ['vue', 'react', 'angular']
        }
    }
    render() {
        return (
            <div>
              <h1>前端js框架列表</h1>
                <ul>
                    {
                        this.state.allContent.map((item, index) => (
                            <li key={index}> {item} </li>
                        ))
                    }
                </ul>
            </div>
        );
    }
}

export default App;

2. react 面向元件程式設計

2.1 元件三大核心屬性 state props refs

1. state

1. state是元件物件最重要的屬性, 值是物件(可以包含多個key-value的組合)

2. 元件被稱為"狀態機", 通過更新元件的state來更新對應的頁面顯示(重新渲染元件)

注意：

​ 1. 元件中render方法中的this為元件例項物件

2. 元件自定義的方法中this為undefined，如何解決？

   a) 強制繫結this: 通過函式物件的bind()

   b) 箭頭函式

3. 狀態資料，不能直接修改或更新

案例：

需求*