react中的核心概念

2021-09-25 19:43:46 字數 827 閱讀 7675

虛擬dom(virtual document object model)

dom的本質:瀏覽器中的概念,用js物件來表示頁面上的元素,並提供了操作 dom 物件的api;

react中的虛擬dom:

是框架中的概念,是程式設計師用js物件來模擬頁面上的 dom 和dom巢狀關係;

虛擬dom的目的:

為了實現頁面中dom 元素的高效更新

dom和虛擬dom的區別:

dom:瀏覽器中,提供的概念;用js物件,表示頁面上的元素,並提供了操作元素的api;

虛擬dom:是框架中的概念;而是開發框架的程式設計師,手動用js物件來模擬dom元素和巢狀關係;

本質: 用js物件,來模擬dom元素和巢狀關係;

目的:就是為了實現頁面元素的高效更新;

diff演算法

tree diff:新舊兩棵dom樹,逐層對比的過程,就是 tree diff; 當整棵dom逐層對比完畢,則所有需要被按需更新的元素,必然能夠找到;

component diff:在進行tree diff的時候,每一層中,元件級別的對比,叫做 component diff;

如果對比前後,元件的型別相同,則暫時認為此元件不需要被更新;

如果對比前後,元件型別不同,則需要移除舊元件,建立新元件,並追加到頁面上;

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

React核心概念 狀態提公升

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

React 簡介及核心概念

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

React 5大核心概念

mycomponent extends react component render mycomponent extends react component p parentcomponent extends react component class childcomponent extends ...