[react] 描述下在react中無狀態(tài)組件和有狀態(tài)組件的區(qū)別是什么？

1，無狀態(tài)組件主要用來定義模板，接收來自父組件props傳遞過來的數(shù)據(jù)，使用{props.xxx}的表達式把props塞到模板里面。無狀態(tài)組件應(yīng)該保持模板的純粹性，以便于組件復(fù)用。創(chuàng)建無狀態(tài)組件如下：

var Header = (props) = ( <div>{props.xxx}</div> ); export default Header

2.有狀態(tài)組件主要用來定義交互邏輯和業(yè)務(wù)數(shù)據(jù)（如果用了Redux，可以把業(yè)務(wù)數(shù)據(jù)抽離出去統(tǒng)一管理），使用{this.state.xxx}的表達式把業(yè)務(wù)數(shù)據(jù)掛載到容器組件的實例上（有狀態(tài)組件也可以叫做容器組件，無狀態(tài)組件也可以叫做展示組件），然后傳遞props到展示組件，展示組件接收到props，把props塞到模板里面。創(chuàng)建有狀態(tài)組件如下：
?

class Home extends React.Component { constructor(props) { super(props); }; render() { return ( <Header/> //也可以寫成<Header></Header> ) } } export default Home

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的[react] 描述下在react中无状态组件和有状态组件的区别是什么？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。