组件设计模式:聪明组件还是傻瓜组件?

React的本质

react的本质思想是认为,数据和渲染是分离的,而react做的事情就是:

fn=render(data)

组件的本质

当一个组件除了渲染还有逻辑时,就必然的会有逻辑放在哪里的问题。

如果逻辑放在这个组件内部,就是复杂组件。而如果放在外部,组件本身只负责渲染,那么就是傻瓜组件。

以这个思维去分析,那么ui库,其中的组件基本都可以定义为傻瓜组件,而业务组件,在没有拆分的前提下,都是聪明组件。

所以一般这两个组件还有别的称谓:

容器组件还是展示组件

有状态组件还是无状态组件

胖组件还是瘦组件

一些实际编程心智

1 分为容器和展示

容器负责逻辑,展示负责渲染。这里的逻辑指的是需要从外部获的数据或者逻辑,而展示组件除了渲染本身,还会负责一些和ui渲染直接相关的变量维护。当然有些变量,可能会允许外部传入。

2 分为逻辑hook和展示函数组件

不依赖于某个容器组件,而是将可能的可复用的逻辑放在hook中,这个也是现在官方主推的方式。

依赖的心智:

逻辑可复用;变化的数据会导致组件重新渲染;hook使用的前提是函数组件,函数和组件两者缺一不可。

3 分为工具函数和展示组件

与上者不同的是,逻辑共用的范围。上者是函数逻辑只能用在函数组件内,而工具函数可以用在任何位置,可以是函数组件,可以是函数,可以是类组,也可以是任何上下文中。

4 分为store dispatch 和 展示组件

当我们把某个逻辑放在store中,就增加了数据的属性,我们可以使用数据来完成更多的数据管理以及分发的期望。

第一个直接结果就是,任何组件都可以按需获取对应的数据。

第二个直接结果就是,任何组件都可以直接使用这个函数,并在后续的上下文中,跨组件的消费。

还有一个可能不是我们想要的结果,就是数据可能会被不了解store的人发生滥用的行为,导致本该用作特殊场景的数据被污染。

拓展

1 在使用傻瓜组件时,不可避免的会被属性影响重新渲染。

做好组件的性能提升是必要的,可以使用memo来提升基本的渲染性能。

2 当我们需要抽离一段逻辑时,一定要想清楚,这个的使用范围,包括是在应用全局还是部分,是在函数组件还是可能也有纯函数

3 当发现一个组件代码量或者逻辑部分复杂时,建议使用一些傻瓜组件的模式,把渲染以及渲染相关的逻辑单独抽离为傻瓜组件。

4 使用useState 时,要注意使用边界,不需要引发重新渲染的,不要过度使用,尤其在一个组件内包含太多数据或者需要外部传递太多数据,或者外部传入的是一个复杂对象时。

更多

余杭子曰的花园

相关推荐
鬼手点金4 小时前
nanoGPT/nanochat 能做出 DeepSeek/Qwen 这样的大模型吗?
服务器·前端·javascript·bug·openclaw
蛋蛋的就会顺顺的5 小时前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
程序员Sunday5 小时前
TypeScript 的 any、unknown、never 有什么区别?
前端·面试·typescript
朱涛的自习室5 小时前
70 美金的 Beyond Compare,我让 Gemini 4 和 DeepSeek 造个开源免费版(Day 2)
android·前端·人工智能
码艺-Alimjan6 小时前
Tauri 源码备份 · 打包 & 解压 总结,源码收集之路
前端·javascript·vue.js
小马不起床6 小时前
零基础玩转 FastAPI_11:前端后台管理页面
前端·状态模式·fastapi
子非鱼a7 小时前
【文件上传】一个普普通通的edu16
前端
美狐美颜SDK开放平台7 小时前
直播APP如何实现美白滤镜功能?视频美颜SDK技术开发方案详解
前端·数据库·人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk
pride.li8 小时前
第03章 Python 教程-基础语法:注释与变量
服务器·前端·后端·python·算法·计算机视觉
屏什么录8 小时前
电脑如何录屏幕视频和声音?从工具到代码,7 种方案帮你彻底搞定
前端·音视频开发