React核心概念，搭配webpack基本使用。

虛擬dom（virtual document object model）

diff演算法

element diff:在進行元件對比的時候，如果兩個元件型別相同，則需要進行 元素級別的對比，這叫做 element diff；

建立基本的webpack4.x專案

執行npm init -y 快速初始化專案

在專案根目錄建立src源**目錄和dist產品目錄

在 src 目錄下建立 index.html

使用 cnpm 安裝 webpack ，執行cnpm i webpack webpack-cli -d

注意：webpack 4.x 提供了 約定大於配置的概念；目的是為了儘量減少 配置檔案的體積；

在專案中使用 react

執行cnpm i react react-dom -s安裝包

在index.html頁面中，建立容器：

z

import react from 'react'

import reactdom from 'react-dom'

//  第乙個引數： 字串型別的引數，表示要建立的標籤的名稱

// 第二個引數：物件型別的引數， 表示 建立的元素的屬性節點
// 第三個引數： 子節點
const myh1 = react.createelement('h1', , '你比四環多一環')

// 引數1： 表示要渲染的虛擬dom物件

// 引數2： 指定容器,注意：這裡不能直接放 容器元素的id字串，需要放乙個容器的dom物件

如何啟用 jsx 語法？

module: 

]}

在jsx中混合寫入js 表示式：在 jsx 語法中，要把 js**寫到 中

在 jsx 中 寫注釋：推薦使用為 jsx 中的元素新增class類名：需要使用classname 來替代 class；htmlfor替換label的for屬性

在jsx建立dom的時候，所有的節點，必須有唯一的根元素進行包裹；

在 jsx 語法中，標籤必須 成對出現，如果是單標籤，則必須自閉和！

當 編譯引擎，在編譯jsx**的時候，如果遇到了《那麼就把它當作 html**去編譯，如果遇到了 {} 就把 花括號內部的**當作 普通js**去編譯；

第1種 - 建立元件的方式

// 使用元件並 為元件傳遞 props 資料

// 在建構函式中，使用 props 形參，接收外界 傳遞過來的資料
function hello(props) --- --- 
}

// 開啟 webpack.config.js ，並在匯出的配置物件中，新增 如下節點：

resolve: 
}

class 元件名稱 extends react.component 

}

// 1.在父元件內的子元件上定義需要傳遞內容

// 2.在子元件通過this.props.content 來使用

componentwillmount 元件即將被掛載到頁面上執行

componentdidmount 元件被掛載到頁面上
// props 和 state更改
shoundcomponentupdate 元件被更新之前執行（return false 會阻止更新）
componentwillupdate 元件被更新之前（shoundcomponentupdate 返回true 會執行）
componentdidupdate 元件更新完成之後
// 乙個元件從父元件接受引數
// 只要父元件的render函式被重新執行，子元件這個生命週期會被執行(這個元件第一次存在父元件中，不會執行。如果這個元件之前已經存在父元件中，才會執行)
componentwillreceiveprops
componentwillunmount 當這個元件即將被從頁面上剔除

react中的核心概念

虛擬dom virtual document object model dom的本質 瀏覽器中的概念，用js物件來表示頁面上的元素，並提供了操作 dom 物件的api react中的虛擬dom 是框架中的概念，是程式設計師用js物件來模擬頁面上的 dom 和dom巢狀關係 虛擬dom的目的 為了實現...

React核心概念 狀態提公升

上一節 表單 很多情況下我們使用的多個元件需要對同乙個資料做出對應的反應。在這裡我們推薦把這個共享的狀態提公升到距離這些元件最近的祖先元件。現在讓我們來看看這是怎麼工作的。在本章中，我們將會建立乙個溫度計算器來計算在給定溫度下水是否會沸騰。首先我們現建立乙個boilin erdict元件。它接收乙個...

React 簡介及核心概念

三大框架一大抄 元件化方面 什麼是模組化 是從 的角度來進行分析的 把一些可復用的 抽離為單個的模組 便於專案的維護和開發 什麼是元件化 是從 ui 介面的角度 來進行分析的 把一些可服用的ui元素，抽離為單獨的元件 便於專案的維護和開發 元件化的好處 隨著專案規模的增大，手裡的元件越來越多 很方便...