这是关于Redux connect函数的第五篇.随着学习的深入,理解加深了.如果是对于组件渲染的优化有需求的话,这篇文章是第一步. 总结为一句就是:组件要从state中各取所需.不要胡子眉毛一把抓.避免不必要的渲染.
connect这个方法实在是非常的关键,需要好好揣摩其中的代码.
翻译开始
如果你在React的app中正在使用Redux,你可能已经在使用react-redux把你的组件连接到state上. connect方法是一个耍滑头的婊子,尽管只用非常简单的API,但是背后像是变戏法一样(译注:我对Redux的理解实际就是从理解Connect的概念开始的).实施非常容易,尤其是刚开始的时候,仅仅把组件链接到state就完事,没有考虑到其中发生了什么事情.其中最容易犯的迷糊是把state connect到了渲染组件的顶层了.
上面的说法到底是几个意思?我很高兴你你问了这个问题-下面的图标阐述了这个场景.在这个实例中 <Page>组件被连接到了渲染树的最顶层.
state连接到了所有组件的父组件
为什么这很烂?
- 你改变profile image的时候 整个
<Page>在渲染 - 你从列表中删除一个feed的时候 整个
<Page>在渲染 - 你添加一个image的时候,整个
<Page>在渲染
替代连接state到<Page>的方法是.让各个子组件直接连接到state的分片中. 下面是一个示意图
子组件连接到对应的state片段
为什么这么做更好?
- 改变 profile image仅仅渲染
<Profile>组件 - 移除list中的条目,仅仅渲染
<Feed>组件 - 更少的渲染===🌈🌈🐴🐴 (译注:不知道是神马意思)
记住,当你connect你的组件的时候,是告诉React只要组件需要的props已改变就执行渲染过程.每个组件执行自己各自的connect,避免了不必要的渲染过程.
包装起来
我建议任何使用connect的新人花些时间来充分理解connect到一个组件的时候到底发生了什么事情.
返利回来
- 如果你使用Redux,我强烈建议你好好看看reselect.这个组件可以让你为Redux创建更为智能的selector.一个Selector除非是他的参数发生了变化,否则是不会发生重新计算的(译注: memoize,缓存功能),可以避免不必要的渲染(译注:其实功能还更多,列表项的筛选也可以在这里执行).
- 充分阅读react-redux的文档.
connect方法还有很多的选项,不只是mapStateToProps和mapDispatchToProps,包括renderCountProps等,你可以添加到你的组件中用来追踪渲染的次数.
connectrendrCountProps选项可以Debug不必要的debug.
译注:其实f8 APP就是这么做的,当时照猫画虎觉得也很好啊.但是前不久才意识到了组件从整个的state中各取所需的巧妙之处,结合Reselect的功能,就更厉害了.这是性能优化的第一个步. 其实远比这还要有意思,例如用户登录后,后端返回的信息可以放到state中,凡是需要登录状态或信息的组件,只需要selector这一部分就可以了. 登录组件不用考虑怎么给后续添加的逻辑组件传递数据的问题. 后续添加组件,如果有需要就selector登录信息就可以了. 这一点是 React组件之间的相互耦合交织状态走向集中管理的非常重要的一步. 学习Redux其实就是要有这个思维转变的过程.
网友评论