Context是个好东西，先不论代数效应之类纯实际的概念，能在组件树上无视深度地透传形状确实能给开发带来很大的便利。

但假设Context的运用上不留意一些细节，运用不当，对运用的功用是有能够形成灾难性影响的。近期在做一个产品的功用优化的时分，总结出来微乎其微的两点“常识”。

关于顺序

先来看一张图，我愿称之为世界名画：

这就一演示的界面，没什么东西，我的逻辑也很复杂：

import React, {memo, useReducer} from 'react'; 

import {ConfigProvider, Tooltip} from 'antd'; 

import ZH_CN from 'antd/lib/locale-provider/zh_CN'; 

import 'antd/dist/antd.min.css'; 

 

const Text = ({text}) => { 

    return ( 

        <Tooltip title="Tooltip" placement="top"> 

            <div>{text}</div> 

        </Tooltip> 

    ); 

}; 

 

const MemoedText = memo(Text); 

 

const ConfigProviderInside = () => { 

    const [counter, inc] = useReducer((v) => v + 1, 1); 

 

    return ( 

        <ConfigProvider locale={ZH_CN}> 

            <div> 

                <MemoedText text="This is some text." /> 

                <div>App Counter: {counter}</div> 

                <button type="button" onClick={inc}> 

                    FORCE UPDATE 

                </button> 

            </div> 

        </ConfigProvider> 

    ); 

}; 

点一下按钮，整个界面都更新了一遍，是不是也还算正常？那假设做一下“复杂”地优化呢：

是不是很酸爽？我干了什么呢：

const ConfigProviderOutside = () => { 

    const [counter, inc] = useReducer((v) => v + 1, 1); 

 

    return ( 

        <div> 

            <MemoedText text="This is some text." /> 

            <div>App Counter: {counter}</div> 

            <button type="button" onClick={inc}> 

                FORCE UPDATE 

            </button> 

        </div> 

    ); 

}; 

 

render( 

    <ConfigProvider> 

        <ConfigProviderOutside /> 

    </ConfigProvider> 

); 

我把antd的ConfigProvider放到了外面，就这一行代码。

(责任编辑：admin)