react無狀態元件

乙個普通元件只有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關鍵字建立出來的元件 用的最多 無狀態元件 用建...