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" placement="top"> {text}- );
- };
- const MemoedText = memo(Text);
- const ConfigProviderInside = () => {
- const [counter, inc] = useReducer((v) => v + 1, 1);
- return (
"This is some text." /> App Counter: {counter}- FORCE UPDATE
- );
- };
点一下按钮,整个界面都更新了一遍,是不是也还算正常?那如果做一下“简单”地优化呢:
是不是很酸爽?我干了什么呢:
- const ConfigProviderOutside = () => {
- const [counter, inc] = useReducer((v) => v + 1, 1);
- return (
"This is some text." /> App Counter: {counter}- FORCE UPDATE
- );
- };
- render(
- );
我把antd的ConfigProvider放到了外面,就这一行代码。
原因也很简单,antd的ConfigProvider并没有做什么优化,它每一次给Context的value都是一个全新的对象(虽然内容并没有变化),这就会导致所有关联的组件都触发更新(虽然毫无意义)。这在你的系统中的下场就是你拼合地用memo、PureComponent之类的方法优化自己写的组件,但那里面的antd组件们却欢快地渲染到停不下来。
所以第一条经验是:好 好梳理Context的上下关系,把那些理论上不会变的放到最外面,把频繁会变的往里放。
什么是不会变的呢,比如Locale、Constant,以及一些系统级的做依赖注入的,这些往往整个生命周期都不会变。
然后是类似CurrentUser这样系统启动的时候请求一次数据的,会从null变成固定的值,随后就不会变了,这一类也尽量往外放。
最后像是Router这样的,会频繁变化的,要放到最里面,免得因为它的更新把其它不怎么变的Context也带进去。
关于粒度
来看一个非常经典的Context:
- const DEFAULT_VALUE = {
- props: null,
- openGlobalModal: () => undefined,
- closeGlobalModal: () => undefined,
- };
- const GlobalModalContext = createContext(DEFAULT_VALUE);
- const GlobalModalContextProvider = ({children}) => {
- const [props, setProps] = useState(null);
- const closeGlobalModal = useCallback(
- () => setProps(null),
- []
- );
- const contextValue = useMemo(
- () => {
- return {
- props,
- closeGlobalModal,
- openGlobalModal: setProps,
- };
- },
- [props, closeGlobalModal, setProps]
- );
- return (
- {children}
- );
- };
用一个Context来统一地管理全局单例的对话框,也是一种比较常见的玩法。如果你这么用:
- const EditUserLabel = ({id}) => {
- const {openGlobalModal} = useContext(GlobalMoadlContext);
- const edit = useCallback(
- () => openGlobalModal({title: '编辑用户', children:
}), - [openGlobalModal, id]
- );
- return 编辑;
- };
- const columns = [
- // ...
- {
- title: '操作',
- key: 'action',
- dataIndex: 'id'
- render: id =>
, - }
- ]
- const UserList = ({dataSource}) => (
"id" dataSource={dataSource} columns={columns} />
- );
在一个表格里每一行放一个“编辑”标签,然后在全局放一个对话框:
- const GlobalModal = () => {
- const {props} = useContext(GlobalMoadlContext);
- return !!props &&
; - };
你就会惊讶地发现, 每当你编辑一个用户(或在其它地方触发对话框),表格中每一行的编辑标签都会更新。
原因很容易分析, 因为当你打开对话框的时候,props是变化的,因而contextValue也变化了,所以虽然编辑标签只用了openGlobalModal这个永远不会变的东西,却也硬生生被带着渲染了起来。
如果想追求更少地渲染,就要关注第二条经验: 一个Context中的东西往往并不一起被使用,将它们按使用场景分开,特别是要将多变的和不变的分开。
像上面的代码,就可以优化成这样:
- const GlobalModalPropsContext = createContext(null);
- const DEFAULT_ACTION = {
- openGlobalModal: () => undefined,
- closeGlobalModal: () => undefined,
- };
- const GlobalModalActionContext = createContext(DEFAULT_ACTION);
- const GlobalModalContextProvider = ({children}) => {
- const [props, setProps] = useState(null);
- const closeGlobalModal = useCallback(
- () => setProps(null),
- []
- );
- const actionValue = useMemo(
- () => {
- return {
- closeGlobalModal,
- openGlobalModal: setProps,
- };
- },
- [closeGlobalModal, setProps]
- );
- return (
- // 注意第一条经验,变得少的在外面
- {children}
- );
- };
只要根据实际的需要,去访问2个不同的Context,就可以做到最优化的属性粒度和最少的渲染。
当然我也建议不要直接暴露Context本身,而是将它按照使用场景暴露成若干个hook,这样你可以在一开始不做特别的优化,当性能出现瓶颈的时候再拆Context,只需要修改hook的实现就能做到对外的兼容。
总结
- 关注在应用中使用的Context的顺序,让不变的在外层,多变的在内层。
- Context中的内容可以按使用场景和变与不变来拆分成多个更细粒度匠,以减少渲染。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容猜你喜欢
AI推送时光机Python中Enum使用的几点注意事项
后端开发2024-04-02C/C++浮点数使用的两个注意事项详解
后端开发2023-02-06在SpringBoot中使用lombok的注意事项
后端开发2024-04-02React中style的使用方法及注意事项是什么
后端开发2023-07-05使用react框架需要注意哪些事项
后端开发2023-06-05React中需要注意的事项有哪些
后端开发2024-04-02Springboot中@RequestBody注解使用的注意事项
后端开发2023-06-29在CCNA考试中需要注意的几点事项
后端开发2024-04-18Js中parseInt的使用及注意事项
后端开发2023-01-03单例模式在PHP项目中的使用与注意事项
后端开发2023-10-21PHP使用PHPMailer发送邮件时注意事项和注意点
后端开发2023-05-21在python中使用集合时需要注意的事项
后端开发2023-06-14React forwardRef的使用方法及注意点
后端开发2024-04-02咦!没有更多了?去看看其它编程学习网 内容吧