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

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

在渲染功能之外訪問React Context

在渲染功能之外訪問React Context

繁華開滿天機(jī) 2019-10-09 16:02:55
我正在使用新的React Context API而不是Redux開發(fā)一個(gè)新應(yīng)用,并且在使用之前,例如Redux,當(dāng)我需要獲取用戶列表時(shí),我只是調(diào)用componentDidMount我的操作,但是現(xiàn)在使用React Context,我的操作可以在內(nèi)部進(jìn)行。我的用戶位于我的渲染函數(shù)中,這意味著每次調(diào)用我的渲染函數(shù)時(shí),它將調(diào)用我的操作以獲取用戶列表,但這不好,因?yàn)槲覍?zhí)行許多不必要的請(qǐng)求。那么,如何只能一次調(diào)用動(dòng)作,例如in componentDidMount而不是調(diào)用render?只是為了舉例說明,請(qǐng)看以下代碼:假設(shè)我將所有內(nèi)容包裝Providers在一個(gè)組件中,如下所示:import React from 'react';import UserProvider from './UserProvider';import PostProvider from './PostProvider';export default class Provider extends React.Component {  render(){    return(      <UserProvider>        <PostProvider>          {this.props.children}        </PostProvider>      </UserProvider>    )  }}然后,我將這個(gè)Provider組件包裝了所有應(yīng)用程序,如下所示:import React from 'react';import Provider from './providers/Provider';import { Router } from './Router';export default class App extends React.Component {  render() {    const Component = Router();    return(      <Provider>        <Component />      </Provider>    )  }}現(xiàn)在,以我的用戶視圖為例,它將是這樣的:import React from 'react';import UserContext from '../contexts/UserContext';export default class Users extends React.Component {  render(){    return(      <UserContext.Consumer>        {({getUsers, users}) => {          getUsers();          return(            <h1>Users</h1>            <ul>              {users.map(user) => (                <li>{user.name}</li>              )}            </ul>          )        }}      </UserContext.Consumer>    )  }}我想要的是:import React from 'react';import UserContext from '../contexts/UserContext';export default class Users extends React.Component {  componentDidMount(){    this.props.getUsers();  }  render(){    return(      <UserContext.Consumer>        {({users}) => {          getUsers();          return(            <h1>Users</h1>            <ul>              {users.map(user) => (                <li>{user.name}</li>              )}            </ul>          )        }}      </UserContext.Consumer>    )  }}但是,當(dāng)然上面的示例不起作用,因?yàn)間etUsers不存在于我的用戶視圖中的道具。如果有可能,正確的方法是什么?
查看完整描述

3 回答

?
MMMHUHU

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

隨著v16.8.0中引入react-hooks ,您可以通過使用useContext鉤子在功能組件中使用上下文


const Users = () => {

    const contextValue = useContext(UserContext);

    // rest logic here

}

編輯:從版本16.6.0起。您可以通過使用上下文的生命周期的方法this.context一樣


class Users extends React.Component {

  componentDidMount() {

    let value = this.context;

    /* perform a side-effect at mount using the value of UserContext */

  }

  componentDidUpdate() {

    let value = this.context;

    /* ... */

  }

  componentWillUnmount() {

    let value = this.context;

    /* ... */

  }

  render() {

    let value = this.context;

    /* render something based on the value of UserContext */

  }

}

Users.contextType = UserContext; // This part is important to access context values

在版本16.6.0之前,您可以按以下方式進(jìn)行操作


為了在您的生命周期方法中使用Context,您可以將組件編寫為


class Users extends React.Component {

  componentDidMount(){

    this.props.getUsers();

  }


  render(){

    const { users } = this.props;

    return(


            <h1>Users</h1>

            <ul>

              {users.map(user) => (

                <li>{user.name}</li>

              )}

            </ul>

    )

  }

}

export default props => ( <UserContext.Consumer>

        {({users, getUsers}) => {

           return <Users {...props} users={users} getUsers={getUsers} />

        }}

      </UserContext.Consumer>

)

通常,您將在您的應(yīng)用程序中維護(hù)一個(gè)上下文,并且將以上登錄信息打包在HOC中以便重新使用是有意義的。你可以這樣寫


import UserContext from 'path/to/UserContext';


const withUserContext = Component => {

  return props => {

    return (

      <UserContext.Consumer>

        {({users, getUsers}) => {

          return <Component {...props} users={users} getUsers={getUsers} />;

        }}

      </UserContext.Consumer>

    );

  };

};

然后你可以像這樣使用它


export default withUserContext(User);


查看完整回答
反對(duì) 回復(fù) 2019-10-09
?
ibeautiful

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

好的,我找到了一種有限制的方法。通過該with-context庫(kù),我設(shè)法將我的所有消費(fèi)者數(shù)據(jù)插入到我的組件道具中。


但是,要在同一個(gè)組件中插入多個(gè)使用方很復(fù)雜,您必須使用此庫(kù)創(chuàng)建混合使用方,這會(huì)使代碼不夠美觀且效率低下。


該庫(kù)的鏈接:https : //github.com/SunHuawei/with-context


編輯:實(shí)際上,您不需要使用提供的多上下文api,with-context實(shí)際上,您可以使用簡(jiǎn)單的api并為每個(gè)上下文創(chuàng)建一個(gè)裝飾器,如果您想在組件中使用多個(gè)消費(fèi)者,則只需在類上聲明所需的裝飾數(shù)!


查看完整回答
反對(duì) 回復(fù) 2019-10-09
  • 3 回答
  • 0 關(guān)注
  • 783 瀏覽
慕課專欄
更多

添加回答

舉報(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)