这是一个创建于 564 天前的主题，其中的信息可能已经有所发展或是发生改变。
每天都会被 React 的渲染机制逼死：
这个世界上这么多 React 应用，
每时每刻，会有多少函数和对象，在一次次的 render 过程被创建又被立马丢弃。
虽然大多数场景下，这种渲染机制并不会在视觉上或性能上造成太多负担。
 |
1
TWorldIsNButThis 2023-05-17 01:11:50 +08:00  8
react 大概是最不环保的前端框架
|
 |
2
AvilCore 2023-05-17 01:55:18 +08:00 via Android 1
做开发大忌过优化，没做性能分析不要 yy 速度快慢
|
 |
3
charlie21 2023-05-17 07:41:27 +08:00 via iPhone
不能克服
|
 |
4
beginor 2023-05-17 07:51:28 +08:00 via Android
其它前段框架也差不多吧，脏值监测都差不多的
|
 |
5
ChefIsAwesome 2023-05-17 08:11:28 +08:00 1
前几年我做手机网页，手机硬件不够强，网页性能都是抠出来的。
render 里放 event handler 是不可能的。传 props ，我都给分类成动态的和静态的，就为了 shouldComponentUpdate 的时候能少比较几个值。 好在 react 设计的好，这些东西一个 higher order component 都能搞定。 |
 |
6
zloong 2023-05-17 09:06:43 +08:00 1
所以我选 vue
|
 |
7
theprimone 2023-05-17 09:18:23 +08:00 7
建议对 React 应用征收碳税
|
 |
8
lizhenda 2023-05-17 09:34:35 +08:00
要么不管，要么换框架
|
 |
9
xiaoxiaoming01 2023-05-17 09:44:56 +08:00 2
建议对每一个 react 开发者征收碳税😑
|
 |
10
serco 2023-05-17 09:57:11 +08:00
如果这么想的，是不是可以快进到抛弃所有高刷屏，反正绝大部分时间 2 帧之间什么都没变
|
 |
11
sjhhjx0122 2023-05-17 10:13:41 +08:00 3
先用 preact 替换 react,然后更进一步直接 soildjs 这样就没焦虑了
|
 |
12
makelove 2023-05-17 10:14:36 +08:00
所以我用 solid-js
类 react api ，但不乱 render,非常低碳环保 |
 |
13
shunia 2023-05-17 10:36:05 +08:00
换成 solidjs 解君忧。但是别用 solid-start 。
|
 |
14
xusanduo2019 2023-05-17 10:45:21 +08:00
react 用不好就是性能吞金兽
|
 |
15
lankunblue 2023-05-17 10:53:01 +08:00
@shunia solid-start 有什么问题吗
|
 |
16
huijiewei 2023-05-17 11:03:42 +08:00
@lankunblue solid-js 的 SSR 很复杂，问题很多，最典型的就是 MDX 的问题。因为这个已弃
|
 |
17
githmb 2023-05-17 11:18:51 +08:00
亲，这边建议使用 useCallback 哦
|
 |
18
yimity 2023-05-17 12:04:49 +08:00
页面一打开一个函数执行 100 多遍。
|
 |
19
calicastle 2023-05-17 12:06:40 +08:00 1
You don't. That's the beauty of it
|
 |
20
auroraccc 2023-05-17 12:12:17 +08:00
用 solidjs ，react 依赖数组真的厌倦了
|
 |
21
ivslyyy 2023-05-17 12:35:57 +08:00
减少重复渲染，用 useCallback
ref 在 react 里直接操作 DOM ，不用 state 那一套 |
 |
22
Track13 2023-05-17 12:52:26 +08:00 via Android
没有感到卡顿就不管。😂
|
 |
23
q307990588 2023-05-17 16:12:33 +08:00
@ivslyyy 还真是个啥都不懂的前端啊
|
|
24
ivslyyy 2023-05-17 16:20:43 +08:00
@q307990588 被发现了，我真的是一个网页代码初学者。
|
 |
25
jswh 2023-05-17 16:36:12 +08:00
不用 react
转行后端 转行运维 转行炒饭 🤣 |
 |
26
Leonard 2023-05-17 16:49:52 +08:00
别想太多，遇到性能瓶颈再考虑优化
|
 |
27
Imindzzz 2023-05-17 16:49:55 +08:00 via Android 2
想想游戏都是一秒几十次重绘，会不会好受点？
而且没有被立马抛弃呀，不是都有缓存？ 提 vue solid 的，可能懂点前端，但是不多。 声明式 UI 都得这样。 |
 |
28
n18255447846 2023-05-17 18:10:58 +08:00
这种都要担忧的话，怎么不想想 class 语法开销呢，不如 Function.prototype ；又比如加减乘除，转化为二进制的开销，不如直接位操作符。
React 里只要合理地设置 SCU 和 areEqual ，就能杜绝大部分的重复渲染。 |
 |
29
stroh 2023-05-17 18:35:56 +08:00 1
我以前一个同事去一个神奇的公司，他们公司要求用 react ，面试也是 react ，但他只会 jquery 和 js ，前端就他一个人，然后他就偷偷在 webpack 里加了个 copy 文件到 dist 的插件，项目还是用 jquery 写，然后每次打包的时候就自动到 dist 里，就这样项目做了 2 年，觉得没意思就跳槽了(不知道去哪个公司霍霍了)，等新招的前端接手的时候，整个 react 项目里就是空壳，启动全部走 jquery 的 index ，他每次把项目考进去然后在 jenkins 打包构建，实际都是自己写的 jquery ，老板走之前还夸他项目性能多好多好，还加薪挽留...这件事后我就不对什么 react vue 感冒了，只要完成老板任务就可以
|
|
30
stroh 2023-05-17 18:38:06 +08:00
新招的前端还纳闷，你们公司不是用 react 吗？问了所有研发都说是 react ，还说 react 效率多好多块...说要继承之前前端的遗志把项目按照现有流程好好做下去，那个新来的前端一脸懵逼
|
|
31
beginor 2023-05-17 18:45:12 +08:00 via Android
|
 |
32
fernandoxu 2023-05-17 21:41:04 +08:00 1
Fix the slow render before you fix the re-render
https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render |
 |
33
witcat 2023-05-17 21:42:33 +08:00
好多年前领导说过一句我觉得特别经典的话：没遇到瓶颈就不优化。
|
 |
34
darkengine 2023-05-17 21:51:47 +08:00
记住六个字：又不是不能用
|
 |
35
iPhone15 OP @Imindzzz 每次一定会有立马被抛弃的东西，各种 memo 的逻辑，就是判定是否有缓存，有则返回缓存+丢弃新传入的函数。
比如 useCallback(() => setCount(pre => pre + 1), [])，虽然他返回的永远是首次缓存的函数，但新的函数还是会被创建然后丢弃。 第二次 render 的过程，也就是： 1 、创建函数：() => setCount(pre => pre + 1) 2 、传给 useMemo 3 、发现有缓存函数 4 、返回缓存函数 5 、丢弃刚刚创建的函数 另外 useMemo 是可以减少函数的“执行”，返回上次的”执行结果“，但是也无可避免的会创建新的函数，但被立马丢弃。 当然这都无伤大雅，只是日常总是觉得心里有疙瘩~😂 |
|
36
iPhone15 OP |
|
37
Imindzzz 2023-05-18 01:21:51 +08:00
|
|
38
fernandoxu 2023-05-18 06:42:34 +08:00 1
@iPhone15 即执行 useCallback 和 useMemo 也是成本，和简单的 re-render 都是执行函数，不一定有多少性能差别，re-render 又不一定会更新 dom 。所以无伤大雅的 re-render 没必要处理一下子，fix the slow render before you fix the re-render
|
|
39
stroh 2023-05-18 09:11:44 +08:00
@beginor 听前同事说的，不像假的，而且这种情况在业内不少见，不过很早前 jquery 我也用了 3 年，那时候没 react 也用的好好的
|
 |
40
uaoin 2023-05-18 09:21:15 +08:00
我总是搞不清楚什么时候该使用 React.memo 包裹组件，总觉得每个组件都要包裹，然后又费劲做很多 memoized 的操作。
|
|
41
uaoin 2023-05-18 09:23:16 +08:00
[昨天看到一篇讲 re-renders 的文章分享给大家]( https://www.developerway.com/posts/react-re-renders-guide)
|
Select Language