乙個普通元件只有render函式的時候,我們完全可以通過乙個無狀態元件來替換掉這個普通元件。
無狀態元件相對於這個普通函式的優勢如下:
無狀態元件的效能比較高。
因為無狀態元件就是乙個函式。而普通元件是js裡面的乙個類,而這個類生成的物件裡還有生命週期函式,他執行起來既要執行生命週期函式,還要執行render,效能是一定比不上無狀態元件的。
普通元件如下:
無狀態元件://這是ui元件,只負責渲染頁面,不負責邏輯處理
import react, from 'react';
import "antd/dist/antd.css";
import from "antd";
//這是無狀態元件:(無狀態元件就是乙個函式)
class todolistui extends component }
>
)}/>);}
}export default todolistui;
//這是ui元件,只負責渲染頁面,不負責邏輯處理
import react, from 'react';
import "antd/dist/antd.css";
import from "antd";
const todolistui = (props) => }
>
)}/>
);}export default todolistui;
react 中的無狀態元件
其實 有一些 元件 不需要我們做任何 邏輯處理 和 狀態管理 僅僅只是用來展示 ui介面的話 這樣的元件 叫做無狀態元件 舉乙個很簡單的例子 而且無狀態元件 可以直接有乙個函式 封裝 不用 class 繼承component 同時無狀態元件執行起來 效能也比較好 事件 和 資料 都是由父元件傳遞過來...
React之UI元件 容器元件以及無狀態元件
1.ui元件 只負責頁面的渲染 2.容器元件 只負責業務邏輯和資料的處理 3.無狀態元件 把ui元件用函式表示 可以省去生命週期函式,優化 二 具體 1.普通元件todolist.js 拆分成todolistui.js ui元件 和todolist.js 容器元件 importreact from ...
有狀態元件和無狀態元件
react 基礎知識 有狀態元件和無狀態元件 注意 使用class關鍵字建立的元件,有自己的私有資料 this.state 和生命週期函式 注意 使用function建立的元件,只有props,沒有自己的私有資料和生命週期函式 有狀態元件 用class關鍵字建立出來的元件 用的最多 無狀態元件 用建...