React Categories

前情提要

在逛技术社区的过程中遇到这么一个问题：为什么获取createRef的结果需要多一层current呢？再回答完题主的问题后，便决定水一篇文章。
注：内容比较简单，如果喜欢点个赞，不喜勿喷。欢迎在评论区内交流。如果本人观点有错误的地方，恳请大佬多多指点，感谢🙏。再注：文中所有观点都是我个人理解，没有查阅ECMAScript官方文档。欢迎大佬在评论区内指点交流。

先看下题主的问题：

// 一直搞不明白这个API的设计，这里要多一层current是什么用意，
// 难道除了current外还有别的用法吗？
// 如果只有获取值的用法，为什么不直接简化成myRef1.value拿呢？
const Test: React.FC = () => {
  const myRef1 = React.useRef();
  const onClick = React.useCallback(() => {
    console.log('myRef1', myRef1.current.value)
  }, [])
  return <>
    <input ref={myRef1} type="text" placeholder='点击提示createRef'/>
    <button onClick={onClick}>点击获取ref</button>
  </>
}

1
2
3
4
5
6
7
8
9
10
11
12
13

题主的核心问题是为什么要多一层current？把current去掉，直接用myRef1.value不行吗？要想聊明白这个问题，就得聊聊JavaScript中的基本数据类型和引用数据类型。

十号 2022-08-10 react

从createRef方法来理解js的内存操作

前情提要

先看下题主的问题：

// 一直搞不明白这个API的设计，这里要多一层current是什么用意，
// 难道除了current外还有别的用法吗？
// 如果只有获取值的用法，为什么不直接简化成myRef1.value拿呢？
const Test: React.FC = () => {
  const myRef1 = React.useRef();
  const onClick = React.useCallback(() => {
    console.log('myRef1', myRef1.current.value)
  }, [])
  return <>
    <input ref={myRef1} type="text" placeholder='点击提示createRef'/>
    <button onClick={onClick}>点击获取ref</button>
  </>
}

1
2
3
4
5
6
7
8
9
10
11
12
13

十号 2022-07-18 react

React中一次性能优化之旅

技术栈提示

背景中所描述的场景使用的技术栈为: React + antd + umi生态, 只说明一次，后文中不再出现
文中所描述的一些示例地址在github，如果对示例感兴趣的同学可以动动手指点个start

# 背景

在一次业务开发中需要使用表格来编辑一些数据，于是乎便用了antd周边生态的ProTable，ProTable中有提供EditProTable的组件和示例代码。EditProTable是针对表格编辑的场景下封装的编辑表格组件，如果在编辑数据不需要受控的情况下，那么EditProTable是没有问题的。如果在数据需要受控，并根据编辑的数据信息去额外计算一些数据渲染到表格的某一行某一列中，那么EditProTable提供的编辑组件，在用户的角度来使用是及其卡顿的。数据量稍微大一些的情况下都有可能直接渲染崩溃。为什么EditProTable在数据受控模式时会这么卡顿呢？遇到这种情况，应该怎么去优化性能？让我们带着疑问去阅读这篇React性能优化之旅的文章

# React中的性能优化该怎么优化？

可能有些小伙伴有阅读过一些react性能优化的文章或者指南，通常这些文章会占用极大的篇幅来介绍React底层原理，最后几句话来概括react性能优化的方式。了解原理是很重要的，但是我比较直接，所以我直接用一句话来概括react的性能优化。那么这句话则是: 尽可能的减少render渲染

尽可能的减少render渲染，是因为react、vue等框架都是数据驱动视图更新。那么如果在一个有几百上千的列表视图下，列表中的某一行的数据更新了，是一次性重新渲染这几百上千条列表数据？还是只单独更新数据改变这一行DOM节点？答案显而易见，当然会选择只更新一行DOM节点的方式。

可惜，antd周边生态提供的Table、EditProTable组件都是一次性重新渲染表格。

这里稍微提一嘴，如果单独去对比React框架和vue框架的性能，那么Vue的性能是好于react的。其原因是vue使用的<Template>开发方式，在vue编译的过程中是可以对<Template>做很多性能优化的判断。而react的性能表现之所以不如vue，是因为react的JSX开发方式太灵活了，很难去针对JSX做单独的性能优化判断。react不是没有尝试去优化过框架的性能表现，但最终是没有对JSX做性能优化，而是提出了Fiber概念来优化框架的性能表现。Fiber的原理一句话概括: 将JS的长任务切割为一个个微任务，在浏览器FPS的时候去执行微任务。解决了并不会因为该js长任务执行时间过长而阻塞后续任务

十号 2021-07-19 reactweb性能优化