react 中的無狀態函式式元件

無狀態函式式元件，顧名思義，無狀態，也就是你無法使用state，也無法使用元件的生命週期方法，這就決定了函式元件都是展示性元件，接收props，渲染dom，而不關注其他邏輯。

其實無狀態函式式元件也是官方比較推薦的一種方式，盡量讓底層的元件變成無狀態函式式元件，也即元件盡量只用來顯示資料，把資料操作的邏輯都放在頂層，然後從頂層把資料傳到底層

嗯，看個例子，使用類元件和無狀態函式式元件兩種方法進行對比

頂層關鍵**：

import react, from 'react';  

import reactdom from 'react-dom'; 
import bottom from './component/props' 
reactdom.render( 
, document.getelementbyid('root') 
)

底層**，使用無狀態函式式元件實現

import react, from 'react';  

export default function bottom(props) = props 
const sayhi = () => `); 
} return ( 
say hi
) }

然後看類式元件的實現方法

import react, from 'react';  

export default class bottom extends component 
sayhi() = this.props 
console.log(`hi $`); 
} render() = this.props 
let =this; 
return( 
say hi
) }
}

對比下來，確實無狀態函式元件**量少（輕量），最重要的是，函式式元件簡單啊，類式元件一不小心就出錯了。

函式式元件更容易理解。當你看到乙個函式元件時，你就知道它的功能只是接收屬性，渲染頁面，它不執行與ui無關的邏輯處理，它只是乙個純函式。而不用在意它返回的dom結構有多複雜。

不需要宣告類，可以避免大量的譬如extends或者constructor這樣的**

不需要顯示宣告this關鍵字，在es6的類宣告中往往需要將函式的this關鍵字繫結到當前作用域，而因為函式式宣告的特性，我們不需要再強制繫結

無狀態元件不支援 "ref"

有一點遺憾的是無狀態元件不支援 "ref"。原理很簡單，因為在 react 呼叫到無狀態元件的方法之前，是沒有乙個例項化的過程的，因此也就沒有所謂的 "ref"。

react 中的無狀態元件

其實 有一些 元件 不需要我們做任何 邏輯處理 和 狀態管理 僅僅只是用來展示 ui介面的話 這樣的元件 叫做無狀態元件 舉乙個很簡單的例子 而且無狀態元件 可以直接有乙個函式 封裝 不用 class 繼承component 同時無狀態元件執行起來 效能也比較好 事件 和 資料 都是由父元件傳遞過來...

react無狀態元件

乙個普通元件只有render函式的時候，我們完全可以通過乙個無狀態元件來替換掉這個普通元件。無狀態元件相對於這個普通函式的優勢如下 無狀態元件的效能比較高。因為無狀態元件就是乙個函式。而普通元件是js裡面的乙個類，而這個類生成的物件裡還有生命週期函式，他執行起來既要執行生命週期函式，還要執行rend...

React之UI元件 容器元件以及無狀態元件

1.ui元件 只負責頁面的渲染 2.容器元件 只負責業務邏輯和資料的處理 3.無狀態元件 把ui元件用函式表示 可以省去生命週期函式，優化 二 具體 1.普通元件todolist.js 拆分成todolistui.js ui元件 和todolist.js 容器元件 importreact from ...