Xeact 0.70.0：现在有了 useState 钩子

Posted on 2023-04-04

Xeact 继续主导前端生态系统。 Xeact 永远改变了行业的方方面面，我们都因此变得更好。今天我非常高兴地介绍最新版本的 Xeact：0.70.0 版。这允许您使用新的useState挂钩跟踪有状态值。

英雄形象单人旅行由 Anything v3 生成的图像 — 1girl，绿色头发，连帽衫，户外，野外呼吸，太空针，行走，长发，高度详细，未来主义

为了帮助说明这一点，我在下面复制了 useState 函数的整个源代码：

 /** * Allows a stateful value to be tracked by consumers. * * This is the Xeact version of the React useState hook. * * @type{function(any): [function(): any, function(any): void]} */ const useState = (value = undefined ) => {  return [() => value , (x) => {    value = x ; }]; };

咪咪，你愿意解释一下吗？

咪咪是咖啡
< Mimi > 这段代码定义了一个名为useState的函数，它返回一个包含两个元素的数组。数组的第一个元素是一个函数，它不接受任何参数，并返回作为参数传递给useState函数的初始值，如果没有给出值，则返回undefined值。此函数充当当前状态值的获取器。数组的第二个元素是一个函数，它接受一个参数并设置value的值。此函数充当状态值的设置器。此代码在 React 中实现了useState钩子的简化版本，React 是 JavaScript 中用于构建用户界面的常用库。
苍井空
< Aoi > 为什么我要使用它而不是普通变量？

您想要使用这样的状态钩子的主要原因是当您编写更复杂的组件时，例如每篇文章底部的Mastodon 共享按钮。在高层次上，从 HTML 元素中提取值需要您在变量中声明每个元素，然后像这个 waifud 管理面板组件一样组装组件：

 // SomeForm.jsx  
export default function SomeForm () {  const input = < input type =" text " placeholder =" words " />;    
  return ( < div > { input } < button onClick ={(e) => alert (input.value)}>Alert</button> </div> ); }

这将创建一个输入框和一个按钮。当您单击该按钮时，它会将您放入框中的任何内容变成一个警报。

然而，我们可以做得更好。

React 中的useState钩子允许您将组件与有状态值相关联，因此您可以像这样编写所有代码：

 // SomeForm.jsx  
import { useState } from " react ";  
export default function SomeForm () {  const [ msg , setMsg ] = useState ("");    
  return ( < div > < input        type =" text "        placeholder =" words "        onInput ={(e) => setMsg (e.target.value)} /> <button onClick={(e) => alert (msg)}>Alert</button> </div> ); }

如您所见，这使您可以在<input>框的oninput处理程序中更新状态，然后在按钮的onclick处理程序中使用。

useState Xeact 挂钩也允许您执行此操作，但有一个显着差异：更新状态容器中的值不会触发使用这些值的相关组件的重绘。这确实限制了 Xeact useState容器的实用性，但我敢打赌，如果这变得相关，我会想出解决办法。

葵是咖啡
< Aoi > 或者你可以像普通人一样使用preact …
马拉很开心
< Mara > 这样做不仅有意义，还意味着我们需要为博客更有创意！
葵是脸蛋
< Aoi > 你们这些人让我震惊。

哦，状态读取器是一个函数而不是一个值：

 // SomeForm.jsx  
import { useState } from " xeact ";  
export default function SomeForm () {  const [ getMsg , setMsg ] = useState ("");    
  return ( < div > < input        type =" text "        placeholder =" words "        onInput ={(e) => setMsg (e.target.value)} /> <button onClick={(e) => alert (getMsg())}> Alert </ button> < / div >  ) ; }

无论哪种方式，我怀疑这将推动 Xeact 实现其获得许多 GitHub star 的目标。我已将此状态挂钩合并到我的博客中，并会在我获得更多实际经验后写更多关于它的内容。

感谢您关注 Xeact 的发展！当我弄清楚我到底应该做什么时，未来肯定会有更多。我也开始意识到我不擅长前端开发，我真正不擅长的是设计，这表现为感觉你不擅长前端开发。

我相信我会弄清楚的。得烧木棍才能生火。

原文： https://xeiaso.net/blog/xeact-0.70.0-useState