写点什么

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:3312069

评论 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
回复
没有更多了
发现更多内容

美团二面:Redis与MySQL双写一致性如何保证?

捡田螺的小男孩

数据库 面试 一致性 缓存;

架构实战营模块四作业

薛定谔的指南针

架构实战营

实战|教你用Python玩转Mysql

Python研究者

Python MySQL MySQL 运维

SAP ABAP的权限检查跟踪(Authorization trace)工具使用步骤介绍

汪子熙

SAP abap Authorization Authentication

一种不通过UI给C4C自定义BO创建测试数据的方式

汪子熙

CRM SAP C4C Cloud for Customer

第四次作业 设计千万级学生管理系统的考试试卷存储方案

函数方程

架构训练营模块四作业

Geek_e0c25c

架构训练营

模块4 学习总结

TH

架构实战营

Scrum Team不等于Development Team——《Scrum指南》重读有感(2)

Bruce Talk

Scrum 敏捷 随笔 Agile

千万级考试管理系统的考试试卷存储方案

白发青年

架构实战营

为什么有的系统的事务码BSP_WD_CMPWB看不见Enhance Component这个按钮

汪子熙

CRM SAP abap

模块 4 - 千万级学生管理系统的考试试卷存储方案

小遵

模块四作业 - 考试试卷存储方案

张大彪

【Flutter 专题】123 图解简易 GroupList 二级分组列表

阿策小和尚

5月日更 Flutter 小菜 0 基础学习 Flutter Android 小菜鸟

Java Elasticsearch 使用

Java elasticsearch

Kafka-详细笔记

ninetyhe

分布式 高并发系统设计 消息系统 Kafk

千万级学生管理系统的考试试卷存储方案

颜培攀

架构实战营

架构实战营 - 模块4- 作业

笑春风

如何处理错误信息 Pricing procedure could not be determined

汪子熙

CRM SAP

同时开左右两个SAPGUI编辑器显示同一段ABAP代码

汪子熙

SAP abap SAPGUI

python-运算函数-sum

Geek_6370d5

模块4作业 千万级学生管理系统考试试卷存储方案

TH

架构实战营

谣言粉碎机 - 极短时间内发送两个Odata request,前一个会自动被cancel掉?

汪子熙

JavaScript SAP SAP UI5

架构实战营 模块四:学习总结

👈

架构实战营

【架构实战营】第 4 模块作业

swordman

架构实战营

数据科学指南#基础篇 Matplotlib 入门

Lev

Python 数据科学 matplotlib data-science

HBase常见问题

数据社

大数据 HBase 5月日更

Flink的Time与Window

五分钟学大数据

大数据 5月日更

Flume知识点总结

大数据技术指南

flume 5月日更

第四次作业

Geek_9cf7b5

SAP CRM 和 Cloud for Customer 的 Document flow API 介绍

汪子熙

CRM SAP abap C4C documentFlow

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