ui無非就是應用程式的狀態的一種表現形式.
我們已經了解reactdom.render()函式可以掛載或區域性更新dom, 但是我們需要一種更精妙的方式.
每當應用程式狀態有任何更新, 我們就重新整理一次根節點, 這樣是可以的, 畢竟react只會更新變化的節點, 但是整個樹節點都進行一次比對是冗餘的.
我們來看這種不推薦的方式:
import reactdom from 'react-dom';
import from 'react';
let count = 0;
function mytitle() ,
}, `我覺得不行 +$`, ' => ', createelement('button', ,
onclick() ,
}, '+1'));
}function render()
render(); // 立即掛載根節點
根據官網描述, 我們可以只呼叫一次reactdom.render掛載乙個根節點, 那怎麼更新ui呢?
官網還有以下一些論述:
react 元素是不可變物件。一旦被建立，你就無法更改它的子元素或者屬性。乙個元素就像電影的單幀：它代表了某個特定時刻的 ui。
根據我們已有的知識，更新 ui 唯一的方式是建立乙個全新的元素，並將其傳入 reactdom.render()。
react dom 會將元素和它的子元素與它們之前的狀態進行比較，並只會進行必要的更新來使 dom 達到預期的狀態。
react.component類定義了類元件的架構, 其中render()函式負責建立乙個新的react元素, 只要我們遵循以下規則, 就可實現區域性更新:
/**
* 類元件及其狀態與ui的更新與同步
*/import reactdom from 'react-dom';
import from 'react';
class mytitle extends component ;
}render() ,
}, `我覺得不行 +$`, ' => ',
createelement('button', ,
onclick: () => );
// 等價於:
// ++this.state.count && this.forceupdate();
},}, '+1'),);}
}function render()
render(); // 立即掛載根節點
React之UI元件 容器元件以及無狀態元件
1.ui元件 只負責頁面的渲染 2.容器元件 只負責業務邏輯和資料的處理 3.無狀態元件 把ui元件用函式表示 可以省去生命週期函式，優化 二 具體 1.普通元件todolist.js 拆分成todolistui.js ui元件 和todolist.js 容器元件 importreact from ...
react入門系列之如何拆分ui元件和容器元件
元件就是乙個需要借書的人，通過 dispatch 傳達 action 書名 給圖書管理員 store import react,from react import from antd import store from store 引入圖書管理員 store 引入action import from...
CSS3學習筆記2 UI元素狀態偽類選擇器
第3節.ui元素狀態偽類選擇器 part i 這種選擇器的共同特徵 指定的樣式只有當元素處於某種狀態時才起作用，在預設狀態下不起作用 css3中共有11種ui元素狀態偽類選擇器 e hover e active e focus e enable e disable e read only e rea...