武汉的开发者们注意啦!AI技术战略、框架以及最佳实战尽在Azure OpenAI Day 了解详情
写点什么

Solid.js 就是我理想中的 React

  • 2022-04-12
  • 本文字数:3308 字

    阅读完需:约 11 分钟

Solid.js 就是我理想中的 React

我大约在三年前开始在工作中使用 React。巧合的是,当时正好是 React Hooks 出来的时候。我当时的项目代码库有很多类组件,总让我觉得很笨重。

 

我们来看看下面的例子:一个每秒递增一次的计数器。


class Counter extends React.Component {  constructor() {    super();    this.state = { count: 0 };    this.increment = this.increment.bind(this);  }  increment() {    this.setState({ count: this.state.count + 1 });  }  componentDidMount() {    setInterval(() => {      this.increment();    }, 1000);  }  render() {    return <div>The count is: {this.state.count}</div>;  }}
复制代码


对于一个自动递增的计数器来说要写这么多代码可不算少。更多的模板和仪式意味着出错的可能性更大,开发体验也更差。

Hooks 很漂亮,但是容易出错


当 hooks 出现的时候我非常兴奋。我的计数器可以简化为以下写法:


function Counter() {  const [count, setCount] = useState(0);  useEffect(() => {    setInterval(() => {      setCount(count + 1);    }, 1000);  }, []);  return <div>The count is: {count}</div>;}
复制代码


等等,这其实是不对的。我们的 useEffect hook 在 count 周围有一个陈旧闭包,因为我们没有把 count 包含在 useEffect 依赖数组中。从依赖数组中省略变量是 React hooks 的一个常见错误,如果你忘记了,有一些 linting 规则会警告你的。

 

我稍后会回到这个问题上。现在,我们把缺少的 count 变量添加到依赖数组中:


function Counter() {  const [count, setCount] = useState(0);  useEffect(() => {    setInterval(() => {      setCount(count + 1);    }, 1000);  }, [count]);  return <div>The count is: {count}</div>;}
复制代码


但现在我们遇到了另一个问题,看看应用程序的运行效果:



精通 React 的人们可能知道发生了什么事情,因为你每天都在与这种问题作斗争:我们创建了太多的间隔(每次重新运行效果时都会创建一个新间隔,也就是每次我们增加 count 时间隔都会增加)。可以通过几种方式来解决这个问题:

 

  • 从清除间隔的 useEffect hook 返回一个清理函数

  • 使用 setTimeout 代替 setInterval(还是要使用清理函数)

  • 使用 setCount 的函数形式来避免直接引用当前值

 

事实上哪种办法都行得通。我们在这里实现最后一个选项:


function Counter() {  const [count, setCount] = useState(0);  useEffect(() => {    setInterval(() => {      setCount((count) => count + 1);    }, 1000);  }, []);  return <div>The count is: {count}</div>;}
复制代码


我们的计数器修好了!由于依赖数组中没有任何内容,因此我们只创建了一个间隔。由于我们为计数设置器使用了回调函数,因此永远不会在 count 变量上有陈旧闭包。

 

这是一个人为做出来的例子,但除非你已经使用 React 一段时间,否则它仍然很令人困惑。我们中有许多人每天都会遇到更复杂的情况,即使是最有经验的 React 开发人员也会为之头痛不已。

假的响应性


我思考了很多关于 hooks 的事情,想知道为什么它们感觉不太对劲。结果我通过探索 Solid.js 找到了答案。

 

React hooks 的问题在于 React 并不是真正的响应式设计。如果 linter 知道一个效果(或回调或 memo)hook 何时缺少依赖项,那么为什么框架不能自动检测依赖项并对这些更改做出响应呢?

深入研究 Solid.js


关于 Solid,首先要注意的是它没有尝试重新发明轮子:它看起来很像 React,因为 React 有一些显眼的模式:单向、自上而下的状态;JSX;组件驱动的架构。

 

如果我们用 Solid 重写 Counter 组件,会这样开始:


function Counter() {  const [count, setCount] = createSignal(0);  return <div>The count is: {count()}</div>;}
复制代码


到目前为止我们看到了一个很大的不同点:count 是一个函数。这称为访问器(accessor),它是 Solid 工作机制的重要组成部分。当然,我们这里没有关于按间隔递增 count 的内容,所以下面把它添加进去:


function Counter() {  const [count, setCount] = createSignal(0);  setInterval(() => {    setCount(count() + 1);  }, 1000);  return <div>The count is: {count()}</div>;}
复制代码


这肯定行不通,对吧?每次组件渲染时不会设置新的间隔吗?

 

没有。它就这么正常运行了。

 

但为什么会这样?好吧,事实证明 Solid 不需要重新运行 Counter 函数来重渲染新的计数。事实上,它根本不需要重新运行 Counter 函数。如果我们在 Counter 函数中添加一个 console.log 语句,就会看到它只运行一次。


function Counter() {  const [count, setCount] = createSignal(0);  setInterval(() => {    setCount(count() + 1);  }, 1000);  console.log('The Counter function was called!');  return <div>The count is: {count()}</div>;}
复制代码


在我们的控制台中,只有一个孤独的日志语句:


"The Counter function was called!"
复制代码


在 Solid 中,除非我们明确要求,否则代码不会多次运行。

但是 hooks 呢?


于是我在 Solid 中解决了 React useEffect hook 的问题,而无需编写看起来像 hooks 的东西。我们可以扩展我们的计数器例子来探索 Solid 效果。

 

如果我们想在每次计数增加时 console.log count 怎么办?你的第一反应可能是在我们的函数中使用 console.log:


function Counter() {  const [count, setCount] = createSignal(0);  setInterval(() => {    setCount(count() + 1);  }, 1000);  console.log(`The count is ${count()}`);  return <div>The count is: {count()}</div>;}
复制代码


但这不起作用。请记住,Counter 函数只运行一次!但我们可以使用 Solid 的 createEffect 函数来获得想要的效果:


function Counter() {  const [count, setCount] = createSignal(0);  setInterval(() => {    setCount(count() + 1);  }, 1000);  createEffect(() => {    console.log(`The count is ${count()}`);  });  return <div>The count is: {count()}</div>;}
复制代码


这行得通!而且我们甚至不必告诉 Solid,说这个效果取决于 count 变量。这才是真正的响应式设计。如果在 createEffect 函数内部调用了第二个访问器,它也会让效果运行起来。

一些更有趣的 Solid 概念

响应性,而不是生命周期 hooks


如果你已经在 React 领域有一段时间的经验了,那么下面的代码更改可能真的会让你大跌眼镜:

const [count, setCount] = createSignal(0);setInterval(() => {  setCount(count() + 1);}, 1000);createEffect(() => {  console.log(`The count is ${count()}`);});function Counter() {  return <div>The count is: {count()}</div>;}
复制代码


并且代码仍然是有效的。我们的 count 信号不需要存在于一个组件函数中,依赖它的效果也不需要。一切都只是响应式系统的一部分,“生命周期 hooks”实际上并没有起到太大的作用。

细粒度的 DOM 更新


前面我主要关注的是 Solid 的开发体验(例如更容易编写没有错误的代码),但 Solid 的性能表现也得到了很多赞誉。其强大性能的一个关键来源是它直接与 DOM 交互(无虚拟 DOM)并执行“细粒度”的 DOM 更新。

 

考虑对我们的计数器进行以下调整:


function Counter() {  const [count, setCount] = createSignal(0);  setInterval(() => {    setCount(count() + 1);  }, 1000);  return (    <div>      The {(console.log('DOM update A'), false)} count is:{' '}      {(console.log('DOM update B'), count())}    </div>  );}
复制代码


运行它会在控制台中获得以下日志:


DOM update ADOM update BDOM update BDOM update BDOM update BDOM update BDOM update B
复制代码


换句话说,每秒更新的唯一内容是包含 count 的一小部分 DOM。Solid 甚至没有重新运行同一 div 中较早的 console.log。

小结


在过去的几年里我很喜欢使用 React;在处理实际的 DOM 时,我总感觉它有着正确的抽象级别。话虽如此,我也开始注意到 React hooks 代码经常变得容易出错。我感觉 Solid.js 使用了 React 的许多符合人体工程学的部分,同时最大程度减少了混乱和错误。本文向你展示的是 Solid 的一些让我惊叹的部分,感兴趣的话我建议你查看https://www.solidjs.com并自己探索这个框架。

 

原文链接:https://typeofnan.dev/solid-js-feels-like-what-i-always-wanted-react-to-be/

2022-04-12 15:3310558

评论 5 条评论

发布
用户头像
关于取消virtual DOM, 直接操作 DOM,这样不会带来性能开销吗?我的理解是虚拟DOM是轻量级的纯内存操作,性能好,所以才可以放心做高频次的刷新,只有发现了真正有改动了才会同步去DOM。取消虚拟DOM是省事了,可是高刷新场景下的性能是不是被牺牲了?
2022-04-17 14:00
回复
众所周知,性能最快的是原生
2022-04-18 10:34
回复
用户头像
生态怎么样,有组件库吗
2022-04-13 17:32
回复
用户头像
闭包问题 可以用ref解决 countRef.current = count
2022-04-12 16:29
回复
但是这个真的很赞
2022-04-12 16:31
回复
没有更多了
发现更多内容

石原子科技荣登「2024 中国企业服务云图」,引领数据价值在线化革命,助力企业省心省钱更安全

StoneDB

MySQL 数据库 HTAP StoneDB

人工智能 | 数据闭环构建技巧:确保模型稳定性和数据质量

测吧(北京)科技有限公司

测试

2024年API安全趋势预测

互联网工科生

API API 安全

人工智能发展脉络:从专家系统到机器学习的历史演进

测吧(北京)科技有限公司

测试

在线教育如何通过小程序打造业务新引擎

Geek_2305a8

人工智能与智能化测试Workshop

测吧(北京)科技有限公司

测试

人工智能 | 优化模型训练的利器——训练集、验证集和测试集

测吧(北京)科技有限公司

测试

构建卓越的人工智能产品:全方位的质量保障与测试

测吧(北京)科技有限公司

测试

分布式基础概念-分布式缓存[3]

派大星

分布式 Java 面试题

灵活易用的即时通讯组件设计思路和最佳实践

融云 RongCloud

ios 设计 即时通讯 API Global IM UIkit

人工智能 | 精准数据划分:提升模型性能的关键一步

测吧(北京)科技有限公司

测试

人工智能 | 自学习:数据科学的新潮流

测吧(北京)科技有限公司

测试

融云 CEO 董晗获评甲子光年「2023 中国数字经济创新人物」

融云 RongCloud

互联网 通信 数字经济 wicc 光年20

人工智能 | 精细解读人工智能评估指标——深入了解模型的强项与弱项

测吧(北京)科技有限公司

测试

人工智能 | Spark在分布式造数工具中的应用:构建大规模测试数据的新境界

测吧(北京)科技有限公司

测试

人工智能产品测试的挑战与应对策略

测吧(北京)科技有限公司

测试

Docker镜像构建:技术深度解析与实践

树上有只程序猿

Docker 镜像

又一次了,该认真考虑“混合多云”了!

京东科技开发者

云计算 云服务 混合多云

掌握这些,轻松管理BusyBox:如何交叉编译和集成BusyBox

EquatorCoco

嵌入式 嵌入式应用 busybox

人工智能 | 深入理解评估指标——优化模型性能的关键

测吧(北京)科技有限公司

测试

人工智能 | 优化模型性能的关键一步——深入理解训练集、验证集和测试集

测吧(北京)科技有限公司

测试

StoneDB-8.0-V2.2.0 企业版正式发布!性能优化,稳定性提升,持续公测中!

StoneDB

MySQL 数据库 HTAP StoneDB

Go语言很难吗?为什么 Go 岗位这么少?

伤感汤姆布利柏

Go 后端 低代码 Go 面试题 面经 后端 大厂

如何使用京东商品详情 API 获取用户评价最多的商品详情?

技术冰糖葫芦

API 开发

人工智能 | 数据与特征:解析模型如何依赖信息解决实际问题

测吧(北京)科技有限公司

测试

高效微调大模型的新方法

百度开发者中心

nlp 大模型 #人工智能

基于DotNetty实现一个接口自动发布工具 - 通信实现

EquatorCoco

git Netty WPF

诚邀报名|谭中意邀您共论“大模型应用开发之道”

开放原子开源基金会

Java 开源 程序员 开发者 算法

人工智能 | 分布式造数工具中的Spark应用实践:快速生成大规模测试数据

测吧(北京)科技有限公司

测试

别让错误的SQL变更毁了你的数据!那该如何审核变更SQL?

NineData

sql 数据 开发 变更 NineData

大模型训练的得力助手

百度开发者中心

大模型 #人工智能 LLM

Solid.js 就是我理想中的 React_大前端_Nick Scialli_InfoQ精选文章