Preact X 有什么新功能?

Posted code秘密花园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Preact X 有什么新功能?相关的知识,希望对你有一定的参考价值。


https://blog.logrocket.com/whats-new-in-preact-x/ 
授权译者: ConardLi

Preact是一个javascript库,它把自己描述为具有相同APIReact的3kB快速替代方案。与类似的框架相比,它是具有最快的虚拟DOM库之一。你可以直接在你的React/ReactDOM代码中编写Preact,而无需更改工作流程或代码库。

GitHub上有超过24,000个️star,并且有大量活跃的社区成员不断提供支持,在JS中构建高效,小型,高性能,快速的前端应用程序从未如此简单。

自最初发行以来,Preact的维护者已经发布了多个版本,以解决问题并添加功能。在2019年10月,Preact X 发布了一些更新,旨在解决常见的痛点并改善现有功能。

让我们看一下最近的一些更改,并讨论它们如何帮助我们使用 PreactJS 开发更好的应用程序。

Preact X 的新功能和改进

Preact的维护者进行了重大改进,以支持许多最新的React功能。让我们回顾一些最有趣的新功能。

Fragments

Fragments使你可以对子列表进行分组,而无需向DOM添加额外的节点,因为它们不会呈现到DOM。你可以在通常使用包装器的地方使用 div。在使用ListTableCSS flexbox时,它最有用。

观察下面的代码:

class Table extends Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>

);
}
}
class Columns extends Component {
render() {
return (
<div>
<td>One</td>
<td>Two</td>
</div>

);
}
}

这段代码用div包装Columns组件,然后试图在Table<tr>中渲染,显然,渲染的结果将是无效的html

使用 Fragments,你可以在DOM上呈现输出而无需添加任何额外的元素。

class Columns extends Component {
render() {
return (
<>
<td>One</td>
<td>Two</td>
</>
);
}
}

现在,输出将是有效的HTML,因为没有额外的div添加到DOM。 Fragments 可以通过两种方式编写:

BY :
import { Fragment, render } from 'preact';

function TodoItems() {
return (
<Fragment>
<li>A</li>
<li>B</li>
<li>C</li>
</Fragment>

)
}

or

function TodoItems() {
return (
<>
<li>A</li>
<li>B</li>
<li>C</li>
</>
)
}

要了解更多信息,请阅读 Preact X 官方w文章的 “Components”。

Hooks

Hooks是基于类的组件API的替代方法。挂钩允许你组合状态和状态逻辑,并轻松地在组件之间重用它们。Preact X提供了许多开箱即用的Hooks以及创建自定义Hooks的功能。你可以从 preact/hooks 或 preact/compat 导入Hooks

import {useState, useCallback} from 'preact/hooks';
or
import {useState, useCallback} from 'preact/compat';

function Counter() {
const [value, setValue] = useState(0);
const increment = useCallback(() => setValue(value + 1), [value]);

return (
<div>
Counter: {value}
<button onClick={increment}>Increment</button>
</div>

);
}

上面的代码是一个计数器组件,单击后其值会递增。它利用了Preact X API中提供的useStateuseCallback``Hook。如图所示,代码也与你在React中编写的代码相同。

注意,Hooks是可选的,可以与类组件一起使用。

componentDidCatch

Preact X包含对componentDidCatch生命周期方法的更新,该方法在组件渲染之后调用。这允许你处理呈现期间发生的任何错误,包括在生命周期Hook中发生的错误,但不包括任何异步抛出的错误,比如fetch()调用之后的错误。当一个错误被捕获时,你可以使用这个生命周期来对任何错误做出反应,并显示一个良好的错误消息或任何其他反馈内容。

class Catcher extends Component {
state = { errored: false }

componentDidCatch(error) {
this.setState({ errored: true });
}

render(props, state) {
if (state.errored) {
return <p>Something went badly wrong</p>;
}
return props.children;
}
}

在上面的代码中,我们调用componentDidCatch(),它在组件渲染后立即被调用。如果捕获到错误,可以更新组件,让用户知道发生了错误,并将日志记录到日志服务中。

这确保了更清晰的代码库和更容易的错误跟踪。官方文档提供了关于componentDidCatch()的更多信息。

createContext

Context提供了一种通过组件树传递数据的方法,而不必在每个级别手动传递。尽管context对于Preact来说并不新鲜,但是遗留API getChildContext()在向更深层的虚拟DOM树传递更新时,会出现问题。

Context对象是通过createContext(initialValue)函数创建的。它返回一个用于设置上下文值的组件,以及一个从上下文中检索值的组件。

import {useContext} from 'preact/compat';

const Theme = createContext('light');

function DisplayTheme() {
const theme = useContext(Theme);
return <p>Active theme: {theme}</p>;
}

// ...later
function App() {
return (
<Theme.Provider value="light">
<OtherComponent>
<DisplayTheme />
</OtherComponent>
</Theme.Provider>

)
}

更改 Preact 核心

以前,preact-compat是作为单独的包提供的。现在,它与Preact包含在同一包中。使用React生态系统中的库不需要什么额外的安装。

// Preact 8.x
import React from "preact-compat";

// Preact X
import React from "preact/compat";

现在,Preact X还直接支持CSS自定义属性以对Preact组件进行样式设置。Preact团队特别确保在测试过程中包括几个受欢迎的包,以保证对其提供全面支持。

小结

在本文中,我们探索了 Preact X 中引入的一些功能。要查看所有更改的具体列表以及了解有关新版本的更多信息,请确查看 Preact 的 GitHub版本页面:https://github.com/preactjs/preact/releases

以上是关于Preact X 有什么新功能?的主要内容,如果未能解决你的问题,请参考以下文章

前端资讯重磅升级!Preact X 发布!

preact 源码学习:JSX解析与DOM渲染

送书Preact(React)核心原理详解

从 React 到 Preact 迁移指南

JavaScript实用功能代码片段

import h from preact - 啥时候需要