现在的位置: 首页 > 编程语言 > 正文

Preact X 有什么新功能

2020年02月29日 编程语言 ⁄ 共 2841字 ⁄ 字号 暂无评论

  Preact 是一个 JavaScript 库,它把自己描述为具有相同 API 的 React的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 。在使用 List , Table 或 CSS flexbox 时,它最有用。

  观察下面的代码:

  class Table extends Component {

  render() {

  return (

  

  

  

  

  

  );

  }

  }

  class Columns extends Component {

  render() {

  return (

  

   One

   Two

  

  );

  }

  }

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

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

  class Columns extends Component {

  render() {

  return (

  

   One

   Two

  

  );

  }

  }

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

  BY :

  import { Fragment, render } from 'preact';

  function TodoItems() {

  return (

  

  

  • A
  •   

  • B
  •   

  • C
  •   

      )

      }

      or

      function TodoItems() {

      return (

      

      

  • A
  •   

  • B
  •   

  • C
  •   

      )

      }

      要了解更多信息,请阅读 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 (

      

      Counter: {value}

      

      

      );

      }

      上面的代码是一个计数器组件,单击后其值会递增。它利用了 Preact X API 中提供的 useState 和 useCallback``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

      Something went badly wrong

      ;

      }

      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

    Active theme: {theme}

    ;

      }

      // ...later

      function App() {

      return (

      

      

      

      

      

      )

      }

      更改 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 团队特别确保在测试过程中包括几个受欢迎的包,以保证对其提供全面支持。

    抱歉!评论已关闭.