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

Question

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

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