Preact X 的新增功能

¥What's new in Preact X

Preact X 是 Preact 8.x 的一大进步。我们重新考虑了代码的每一个位和字节，并在此过程中添加了大量主要功能。兼容性增强以支持更多第三方库也是如此。

¥Preact X is a huge step forward from Preact 8.x. We've rethought every bit and byte of our code and added a plethora of major features in the process. Same goes for compatibility enhancements to support more third-party libraries.

简而言之，Preact X 就是我们一直希望 Preact 成为的样子：一个小型、快速且功能丰富的库。说到尺寸，你会很高兴听到所有新功能和改进的渲染都适合与 8.x 相同的尺寸足迹！

¥In a nutshell Preact X is what we always wanted Preact to be: A tiny, fast and feature-packed library. And speaking of size, you'll be happy to hear that all the new features and improved rendering fit into the same size footprint as 8.x!

片段

¥Fragments

Fragments 是 Preact X 的一项主要新功能，也是重新思考 Preact 架构的主要动机之一。它们是一种特殊的组件，可以将子元素与其父元素内联渲染，而无需额外的封装 DOM 元素。最重要的是，它们允许你从 render 返回多个节点。

¥Fragments are a major new feature of Preact X, and one of the main motivations for rethinking Preact's architecture. They are a special kind of component that renders children elements inline with their parent, without an extra wrapping DOM element. On top of that they allow you to return multiple nodes from render.

片段文档 →

¥Fragment docs →

function Foo() {
  return (
    <>
      <div>A</div>
      <div>B</div>
    </>
  )
}

Run in REPL

componentDidCatch

我们都希望我们的应用中不会发生错误，但有时错误确实会发生。借助 componentDidCatch，现在可以捕获并处理 render 等生命周期方法中发生的任何错误，包括组件树深处的异常。这可用于显示用户友好的错误消息，或将日志条目写入外部服务，以防出现问题。

¥We all wish errors wouldn't happen in our applications, but sometimes they do. With componentDidCatch, it's now possible to catch and handle any errors that occur within lifecycle methods like render, including exceptions deep in the component tree. This can be used to display user-friendly error messages, or write a log entry to an external service in case something goes wrong.

生命周期文档 →

¥Lifecycle docs →

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;
  }
}

Run in REPL

钩子

¥Hooks

Hooks 是一种使组件之间共享逻辑更容易的新方法。它们代表了现有的基于类的组件 API 的替代方案。在 Preact 中，它们位于一个插件内，可以通过 preact/hooks 导入

¥Hooks are a new way to make sharing logic easier between components. They represent an alternative to the existing class-based component API. In Preact they live inside an addon which can be imported via preact/hooks

钩子文档 →

¥Hooks Docs →

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

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

Run in REPL

createContext

createContext-API 是 getChildContext() 的真正继承者。虽然当你绝对确定永远不会更改值时 getChildContext 很好，但一旦提供者和消费者之间的组件在返回 false 时阻止通过 shouldComponentUpdate 进行更新，它就会崩溃。有了新的上下文 API，这个问题现在已经成为过去。这是一个真正的发布/订阅解决方案，可以在树的深处提供更新。

¥The createContext-API is a true successor for getChildContext(). Whereas getChildContext is fine when you're absolutely sure to never change a value, it falls apart as soon as a component in-between the provider and consumer blocks an update via shouldComponentUpdate when it returns false. With the new context API this problem is now a thing of the past. It is a true pub/sub solution to deliver updates deep down the tree.

创建上下文文档 →

¥createContext Docs →

const Theme = createContext('light');

function ThemedButton(props) {
  return (
    <Theme.Consumer>
      {theme => <div>Active theme: {theme}</div>}
    </Theme.Consumer>
  );
}

function App() {
  return (
    <Theme.Provider value="dark">
      <SomeComponent>
        <ThemedButton />
      </SomeComponent>
    </Theme.Provider>
  );
}

CSS 自定义属性

¥CSS Custom Properties

有时，小事情会产生巨大的影响。随着 CSS 的最新进展，你可以利用 CSS 变量进行样式设置：

¥Sometimes it's the little things that make a huge difference. With the recent advancements in CSS you can leverage CSS variables for styling:

function Foo(props) {
  return <div style={{ '--theme-color': 'blue' }}>{props.children}</div>;
}

Compat 位于核心

¥Compat lives in core

尽管我们一直热衷于添加新功能并推动 Preact 向前发展，但 preact-compat 包并没有受到那么多的喜爱。到目前为止，它一直存在于一个单独的存储库中，这使得协调跨越 Preact 和兼容层的大型更改变得更加困难。通过将 compat 移至与 Preact 本身相同的包中，无需安装任何额外组件即可使用 React 生态系统中的库。

¥Although we were always keen on adding new features and pushing Preact forward, the preact-compat package didn't receive as much love. Up until now it has lived in a separate repository making it harder to coordinate large changes spanning Preact and the compatibility layer. By moving compat into the same package as Preact itself, there's nothing extra to install in order to use libraries from the React ecosystem.

兼容性层现在被称为 preact/compat，并且学到了一些新技巧，例如 forwardRef、memo 和无数的兼容性改进。

¥The compatibility layer is now called preact/compat, and has learned several new tricks such as forwardRef, memo and countless compatibility improvements.

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

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

许多兼容性修复

¥Many compatibility fixes

这些内容太多，无法列出，但我们在与 React 生态系统的库的兼容性方面已经取得了突破和飞跃。我们特别确保在我们的测试过程中包含几个流行的软件包，以确保我们能够保证对它们的全面支持。

¥These are too many to list, but we've grown bounds and leaps on the compatibility front with libraries from the React ecosystem. We specifically made sure to include several popular packages in our testing process to make sure that we can guarantee full support for them.

如果你发现某个库不能很好地与 Preact 8 配合使用，你应该再次尝试使用 X。一切按预期进行的可能性很高；）

¥If you came across a library that didn't work well with Preact 8, you should give it another go with X. The chances are high that everything works as expected ;)