第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何不使用 Redux 傳遞 props?

如何不使用 Redux 傳遞 props?

元芳怎么了 2021-11-18 16:33:26
我剛剛了解到我們可以使用 redux 降低 React 項(xiàng)目的復(fù)雜性。使用單一的真實(shí)來(lái)源(存儲(chǔ)),我們不需要將狀態(tài)傳遞給不需要它們的組件。我正在努力理解這個(gè)聲明。假設(shè)我有三個(gè)組件,A、B 和 C。A 是一個(gè)容器,其狀態(tài)稱為text. B 是自定義按鈕,C 僅顯示文本。每當(dāng)單擊 B 時(shí),它都會(huì)更新 A 中的狀態(tài)。然后 C 將顯示更新后的文本。  A / \C   B我試過(guò)將redux應(yīng)用到app上,發(fā)現(xiàn)還是需要把props傳下來(lái)。唯一的區(qū)別是我正在傳遞this.props.text而不是this.state.text.我看不出 redux 如何使這樣的應(yīng)用程序受益。應(yīng)用程序.jsimport React, { Component } from "react";import { connect } from 'react-redux'; import MyButton from "./MyButton";import { handleClick } from "./actions"; import Display from "./Display"class App extends Component {  render() {    return (      <div className="App">        <MyButton onClick={()=>this.props.handleClick(this.props.text)} />        <Display text={this.props.text} />      </div>    );  }}const mapStateToProps = state => ({    text: state.text.text})const mapDispatchToProps = dispatch => ({  handleClick: (text) => dispatch(handleClick(text))})export default connect(mapStateToProps, mapDispatchToProps)(App)另外,如果我們有另一個(gè)具有如下結(jié)構(gòu)的應(yīng)用程序。假設(shè) B 不關(guān)心 A 的狀態(tài),但 C 需要它來(lái)顯示文本。我們可以跳過(guò) B 而讓 C 使用 A 的狀態(tài)嗎?A|B|C
查看完整描述

2 回答

?
滄海一幻覺(jué)

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊

我想我找到了解決方案。我只是創(chuàng)建了一個(gè)文件 stores.js 并導(dǎo)出了商店。所以我可以在子組件需要它時(shí)通過(guò)調(diào)用 store.getState() 來(lái)導(dǎo)入它并檢索狀態(tài)。


你不應(yīng)該那樣做。


相反,您應(yīng)該對(duì)需要訪問(wèn)商店屬性的每個(gè)組件使用 connect 函數(shù),在結(jié)構(gòu)中的任何地方。


但是,如果您只有三個(gè)組件,您可能不需要 Redux 或應(yīng)用程序狀態(tài)的全局存儲(chǔ)。


Redux 對(duì)如何處理旨在保護(hù)數(shù)據(jù)流的全局狀態(tài)提出了很多意見。


否則,如果您只需要避免 prop 鉆取(即通過(guò)多個(gè)級(jí)別傳遞 props,如在您的第二個(gè)示例中),您可以使用本機(jī) React 上下文 API 來(lái)做到這一點(diǎn):reactjs.org/docs/context.html


用一個(gè)例子編輯事情應(yīng)該更清楚:


import React, { Component } from "react";

import { connect } from 'react-redux'; 


import MyButtonCmp from "./MyButton";

import DisplayCmp from "./Display"


import { handleClick } from "./actions"; 


// I am doing the connect calls here, but tehy should be done in each component file

const mapStateToProps = state => ({

    text: state.text.text

})

const Display = connect(mapStateToProps)(DisplayCmp)


const mapDispatchToProps = dispatch => ({

  onClick: (text) => dispatch(handleClick(text))

})

const MyButton =  connect(null, mapDispatchToProps)(MyButtonCmp)


class App extends Component {

  render() {

    return (

      <div className="App">

        {/* No need to pass props here anymore */}

        <MyButton />

        <Display />

      </div>

    );

  }

}


// No need to connect App anymore

// export default connect(mapStateToProps, mapDispatchToProps)(App)


export default App


查看完整回答
反對(duì) 回復(fù) 2021-11-18
?
慕后森

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

在這個(gè)例子中,你可以使用 redux 將應(yīng)用狀態(tài)映射到 props。

我不明白為什么您會(huì)以這種方式(使用 redux)處理信息,除非您計(jì)劃在應(yīng)用程序的多個(gè)部分使用數(shù)據(jù)并希望重新使用操作代碼。

查看更多:https : //react-redux.js.org/using-react-redux/connect-mapstate

第二個(gè)問(wèn)題

另外,如果我們有另一個(gè)具有如下結(jié)構(gòu)的應(yīng)用程序。假設(shè) B 不關(guān)心 A 的狀態(tài),但 C 需要它來(lái)顯示文本。我們可以跳過(guò) B 而讓 C 使用 A 的狀態(tài)嗎?

在 Redux 中,是的。

使用 React Hooks,是的。


查看完整回答
反對(duì) 回復(fù) 2021-11-18
  • 2 回答
  • 0 關(guān)注
  • 178 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)