在 React 中使用 Context 的两点注意事项

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

  [[419686]]

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

但如果Context的使用上不注意一些细节,使用不当,对应用的性能是有可能造成灾难性影响的。近期在做一个产品的性能优化的时候,总结出来微不足道的两点“常识”。

关于顺序

先来看一张图,我愿称之为世界名画: 

 


这就一演示的界面,没什么东西,我的逻辑也很简单:

  1. import React, {memo, useReducer} from 'react'
  2. import {ConfigProvider, Tooltip} from 'antd'
  3. import ZH_CN from 'antd/lib/locale-provider/zh_CN'
  4. import 'antd/dist/antd.min.css'
  5.  
  6. const Text = ({text}) => { 
  7.     return ( 
  8.         <Tooltip title="Tooltip" placement="top"
  9.             <div>{text}</div> 
  10.         </Tooltip> 
  11.     ); 
  12. }; 
  13.  
  14. const MemoedText = memo(Text); 
  15.  
  16. const ConfigProviderInside = () => { 
  17.     const [counter, inc] = useReducer((v) => v + 11); 
  18.  
  19.     return ( 
  20.         <ConfigProvider locale={ZH_CN}> 
  21.             <div> 
  22.                 <MemoedText text="This is some text." /> 
  23.                 <div>App Counter: {counter}</div> 
  24.                 <button type="button" onClick={inc}> 
  25.                     FORCE UPDATE 
  26.                 </button> 
  27.             </div> 
  28.         </ConfigProvider> 
  29.     ); 
  30. }; 

点一下按钮,整个界面都更新了一遍,是不是也还算正常?那如果做一下“简单”地优化呢: 

 


是不是很酸爽?我干了什么呢:

  1. const ConfigProviderOutside = () => { 
  2.     const [counter, inc] = useReducer((v) => v + 11); 
  3.  
  4.     return ( 
  5.         <div> 
  6.             <MemoedText text="This is some text." /> 
  7.             <div>App Counter: {counter}</div> 
  8.             <button type="button" onClick={inc}> 
  9.                 FORCE UPDATE 
  10.             </button> 
  11.         </div> 
  12.     ); 
  13. }; 
  14.  
  15. render( 
  16.     <ConfigProvider> 
  17.         <ConfigProviderOutside /> 
  18.     </ConfigProvider> 
  19. ); 

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

原因也很简单,antd的ConfigProvider并没有做什么优化,它每一次给Context的value都是一个全新的对象(虽然内容并没有变化),这就会导致所有关联的组件都触发更新(虽然毫无意义)。这在你的系统中的下场就是你拼合地用memo、PureComponent之类的方法优化自己写的组件,但那里面的antd组件们却欢快地渲染到停不下来。

所以第一条经验是:好 好梳理Context的上下关系,把那些理论上不会变的放到最外面,把频繁会变的往里放。

什么是不会变的呢,比如Locale、Constant,以及一些系统级的做依赖注入的,这些往往整个生命周期都不会变。

然后是类似CurrentUser这样系统启动的时候请求一次数据的,会从null变成固定的值,随后就不会变了,这一类也尽量往外放。

最后像是Router这样的,会频繁变化的,要放到最里面,免得因为它的更新把其它不怎么变的Context也带进去。

关于粒度

来看一个非常经典的Context:

  1. const DEFAULT_VALUE = { 
  2.     props: null
  3.     openGlobalModal: () => undefined, 
  4.     closeGlobalModal: () => undefined, 
  5. }; 
  6.  
  7. const GlobalModalContext = createContext(DEFAULT_VALUE); 
  8.  
  9. const GlobalModalContextProvider = ({children}) => { 
  10.     const [props, setProps] = useState(null); 
  11.     const closeGlobalModal = useCallback( 
  12.         () => setProps(null), 
  13.         [] 
  14.     ); 
  15.     const contextValue = useMemo( 
  16.         () => { 
  17.             return { 
  18.                 props, 
  19.                 closeGlobalModal, 
  20.                 openGlobalModal: setProps, 
  21.             }; 
  22.         }, 
  23.         [props, closeGlobalModal, setProps] 
  24.     ); 
  25.      
  26.     return ( 
  27.         <GlobalModalContext.Provider value={contextValue}> 
  28.             {children} 
  29.         </GlobalModalContext.Provider> 
  30.     ); 
  31. }; 

用一个Context来统一地管理全局单例的对话框,也是一种比较常见的玩法。如果你这么用:

  1. const EditUserLabel = ({id}) => { 
  2.     const {openGlobalModal} = useContext(GlobalMoadlContext); 
  3.     const edit = useCallback( 
  4.         () => openGlobalModal({title: '编辑用户', children: <UserForm id={id} />}), 
  5.         [openGlobalModal, id] 
  6.     ); 
  7.  
  8.     return <span onClick={edit}>编辑</span>; 
  9. }; 
  10.  
  11. const columns = [ 
  12.     // ... 
  13.     { 
  14.         title: '操作'
  15.         key: 'action'
  16.         dataIndex: 'id' 
  17.         render: id => <EditUserLabel id={id} />, 
  18.     } 
  19.  
  20. const UserList = ({dataSource}) => ( 
  21.     <Table rowKey="id" dataSource={dataSource} columns={columns} /> 
  22. ); 

在一个表格里每一行放一个“编辑”标签,然后在全局放一个对话框:

  1. const GlobalModal = () => { 
  2.     const {props} = useContext(GlobalMoadlContext); 
  3.      
  4.     return !!props && <Modal visible {...props} />; 
  5. }; 

你就会惊讶地发现, 每当你编辑一个用户(或在其它地方触发对话框),表格中每一行的编辑标签都会更新。

原因很容易分析, 因为当你打开对话框的时候,props是变化的,因而contextValue也变化了,所以虽然编辑标签只用了openGlobalModal这个永远不会变的东西,却也硬生生被带着渲染了起来。

如果想追求更少地渲染,就要关注第二条经验: 一个Context中的东西往往并不一起被使用,将它们按使用场景分开,特别是要将多变的和不变的分开。

像上面的代码,就可以优化成这样:

  1. const GlobalModalPropsContext = createContext(null); 
  2.  
  3. const DEFAULT_ACTION = { 
  4.     openGlobalModal: () => undefined, 
  5.     closeGlobalModal: () => undefined, 
  6. }; 
  7.  
  8. const GlobalModalActionContext = createContext(DEFAULT_ACTION); 
  9.  
  10. const GlobalModalContextProvider = ({children}) => { 
  11.     const [props, setProps] = useState(null); 
  12.     const closeGlobalModal = useCallback( 
  13.         () => setProps(null), 
  14.         [] 
  15.     ); 
  16.     const actionValue = useMemo( 
  17.         () => { 
  18.             return { 
  19.                 closeGlobalModal, 
  20.                 openGlobalModal: setProps, 
  21.             }; 
  22.         }, 
  23.         [closeGlobalModal, setProps] 
  24.     ); 
  25.      
  26.     return ( 
  27.         // 注意第一条经验,变得少的在外面 
  28.         <GlobalModalActionContext.Provider value={actionValue}> 
  29.             <GlobalModalPropsContext.Provider value={props}> 
  30.                 {children} 
  31.             </GlobalModalPropsContext.Provider> 
  32.         </GlobalModalActionContext.Provider> 
  33.     ); 
  34. }; 

只要根据实际的需要,去访问2个不同的Context,就可以做到最优化的属性粒度和最少的渲染。

当然我也建议不要直接暴露Context本身,而是将它按照使用场景暴露成若干个hook,这样你可以在一开始不做特别的优化,当性能出现瓶颈的时候再拆Context,只需要修改hook的实现就能做到对外的兼容。

总结

  1. 关注在应用中使用的Context的顺序,让不变的在外层,多变的在内层。
  2. Context中的内容可以按使用场景和变与不变来拆分成多个更细粒度匠,以减少渲染。

 

 

责任编辑:张燕妮 来源: 知乎
相关推荐

2012-12-27 13:04:17

Android开发SQLite数据库

2009-07-24 13:40:16

使用SilverLig

2009-07-01 02:29:24

临时表T-SQL

2009-07-16 09:25:27

Java常量定义

2018-08-28 06:21:19

网线布线线缆

2010-11-26 16:27:01

MySQL使用变量

2009-02-01 09:06:15

.NET多线程.NET线程管理

2010-01-21 11:30:10

2011-05-26 11:22:04

SEO

2010-01-18 14:25:19

使用C++Builde

2011-07-19 10:16:58

喷墨打印机注意事项

2011-07-28 17:29:22

HBaseShell

2012-03-12 16:46:22

NoSQL数据库

2009-12-30 14:14:39

PPPoA体系

2021-10-08 11:45:33

内存HeapByteBuf堆内

2012-03-02 10:51:06

JavaJDBC

2019-07-05 15:10:44

云计算物联网大数据

2022-02-24 09:00:38

React代码模式

2010-09-16 09:52:49

CSS display

2009-12-22 09:48:58

WCF枚举类型
点赞
收藏

51CTO技术栈公众号