Reactjs 使用useContext钩子时防止重新渲染

我的应用程序中有两种截然不同的上下文——语言和货币。每个上下文都由两个不同的功能组件通过useContext钩子使用。当其中一个上下文值更改时，我希望只调用使用该上下文的功能组件，而不调用另一个。然而，我发现当任一上下文值改变时，这两个功能组件都会被调用。我怎样才能防止这种情况？即使React在协调后没有重新呈现未更改的DOM，我也希望防止实际调用功能组件本身。换句话说，我如何在保持代码组织的同时记忆每个组件或类似的东西，请参见下文

LanguageContext.js

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

export { LanguageContext };

import React from 'react';

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

export { CurrencyContext };

CurrencyContext.js

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

export { LanguageContext };

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 };

欢迎光临

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 };

你需要的是一份备忘录。它很容易实现，请查看文档以应用您的需求。希望能帮助你：

---

是的，看起来useMemo将使事情更加高效，尽管不是在这种特殊情况下，因为渲染中没有复杂的计算。