使用 useContext 挂钩时防止重新呈现

Question

我的应用程序中有两个不同的上下文 - 语言和货币。这些上下文中的每一个都通过 useContext 挂钩由两个不同的功能组件使用。当其中一个上下文值发生变化时，我希望 React 仅调用使用该上下文的功能组件，而不调用另一个。但是我发现当任一上下文值更改时，两个功能组件都会被调用。我怎样才能防止这种情况发生？即使 React 在协调后没有重新渲染 DOM 我想阻止实际调用功能组件 itself.In 换句话说，我如何记住每个组件（或类似的东西）同时仍然保持我的代码组织（见下文）？

LanguageContext.js

import React from 'react';
const LanguageContext = React.createContext({ lang: 'english', changeLang: (lang) => { } });

export { LanguageContext };

CurrencyContext.js

import React from 'react';

const CurrencyContext = React.createContext({ cur: '$', changeCur: (cur) => { } });

export { CurrencyContext };

ContextRoot.js

import React, { useState } from 'react';
import { LanguageContext } from '../context/LanguageContext';
import { CurrencyContext } from '../context/CurrencyContext';

const ContextRoot = (props) => {
    const [lang, setLang] = useState('english');
    const [cur, setCur] = useState('$');

    const changeLang = (lang) => {
        setLang(lang);
    }

    const changeCur = (cur) => {
        setCur(cur);
    }

    const langCtx = {
        lang,
        changeLang
    };

    const curCtx = {
        cur,
        changeCur
    };

    return (
        <LanguageContext.Provider value={langCtx}>
            <CurrencyContext.Provider value={curCtx}>
                {props.children}
            </CurrencyContext.Provider>
        </LanguageContext.Provider>
    );
}

export { ContextRoot };

App.js

import React from 'react';
import { Header } from './Header';
import { Welcome } from './Welcome';
import { Currency } from './Currency';
import { ContextRoot } from './ContextRoot';

const App = (props) => {
    return (
        <ContextRoot>
            <div>
                <Header />
                <Welcome />
                <Currency />
            </div>
        </ContextRoot>
    );
}

export { App };

Header.js

import React, { useContext } from 'react';
import { LanguageContext } from '../context/LanguageContext';
import { CurrencyContext } from '../context/CurrencyContext';

const Header = (props) => {
    const { changeLang } = useContext(LanguageContext);
    const { changeCur } = useContext(CurrencyContext);

    const handleLangClick = (lang) => {
        changeLang(lang);
    };

    const handleCurClick = (cur) => {
        changeCur(cur);
    };

    return (
        <div>
            <h2>Select your language: <button onClick={e => handleLangClick('english')}>English </button> <button onClick={e => handleLangClick('spanish')}>Spanish</button></h2>
            <h2>Select your Currency: <button onClick={e => handleCurClick('$')}>Dollars </button> <button onClick={e => handleCurClick('€')}>Euros</button></h2>
        </div>
    );
};

export { Header };

Welcome.js

import React, { useContext } from 'react';
import { LanguageContext } from '../context/LanguageContext';

const Welcome = (props) => {
    console.log('welcome..');
    const { lang } = useContext(LanguageContext);
    return (
        <div>
            <h1>{lang === 'english' ? 'Welcome' : 'Bienvenidos'}</h1>
        </div>

    );

};

export { Welcome };

Currency.js

import React, { useContext } from 'react';
import { CurrencyContext } from '../context/CurrencyContext';

const Currency = () => {
    console.log('currency..');
    const { cur } = useContext(CurrencyContext);
    return (
        <h2>Your chosen currency: {cur}</h2>
    )
}

export { Currency };

Answer 1

您需要的是useMemo。它很容易实现，查看文档以应用您的需求。希望对你有帮助:)

https://reactjs.org/docs/hooks-reference.html#usememo

使用 useContext 挂钩时防止重新呈现

Prevent re-renders while using useContext hooks

reactjs

react-context

react-hooks