Preact X 中的新增内容

Preact X 是 Preact 8.x 的一大进步。我们重新考虑了我们代码的每一点一滴，并在这一过程中添加了大量主要特性。同样，也增强了兼容性，以支持更多第三方库。

简而言之，Preact X 是我们一直希望 Preact 成为的样子：一个微小、快速且功能丰富的库。说到大小，你会很高兴地听到，所有新特性和改进的渲染都与 8.x 一样大小！

片段

片段是 Preact X 的一个主要新特性，也是重新考虑 Preact 架构的主要动机之一。它们是一种特殊的组件，可以将子元素与它们的父元素内联渲染，而不需要额外的包装 DOM 元素。最重要的是，它们允许你从 render 返回多个节点。

片段文档 →

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

在 REPL 中运行

componentDidCatch

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

生命周期文档 →

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

在 REPL 中运行

挂钩

挂钩是一种新的方法，可以更轻松地在组件之间共享逻辑。它们代表了现有的基于类的组件 API 的替代方案。在 Preact 中，它们存在于一个附加组件中，可以通过 preact/hooks 导入。

挂钩文档 →

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

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

在 REPL 中运行

createContext

createContext-API 是 getChildContext() 的真正继任者。当你可以绝对确定永远不会更改值时，getChildContext 很好，但当提供者和使用者之间的组件通过返回 false 来阻止更新时，它就会崩溃。使用新的上下文 API，此问题现在已成为过去。这是一个真正的 pub/sub 解决方案，可以将更新传递到树的深处。

createContext 文档 →

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 的最新进步，你可以利用 CSS 变量进行样式设计

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

Compat 存在于核心

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

兼容性层现在称为 preact/compat，并学习了几个新技巧，例如 forwardRef、memo 和无数的兼容性改进。

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

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

许多兼容性修复

这些内容太多，无法一一列出，但我们在 React 生态系统的库的兼容性方面取得了突飞猛进的发展。我们特别确保在我们的测试过程中包含几个流行的包，以确保我们可以保证对它们的完全支持。

如果你遇到一个与 Preact 8 无法很好配合的库，你应该再试一次 X。一切按预期工作的机会很高 ;)