是什么让 React 库需要 preact-compat？

Question

我注意到某些库（例如 classnames）在 Preact 中很容易使用，但其他库（例如 styled-components）需要 preact-compat。

是什么让 React 库在 preact 中不受本机支持而需要使用 preact-compat？

Answer 1

免责声明：我在做 preact。

react 中有几个 API 是 preact 不需要的。但是因为已经为这些 API 开发了现有的第三方库，所以我们发布了 preact-compat，它在 preact 之上重新实现了它们。

一些例子：

Children-API:

这个 API 特别有趣，因为 preact 根本不需要它。对于preact，children 属性始终是一个数组。

// React
Children.forEach(props.children, child => ...);
Children.map(props.children, child => ...);
Children.count(props.children);

// Preact
props.children.forEach(child => ...);
props.children.map(child => ...);
props.children.length;

unmountComponentAtNode:

这是 preact 不需要的另一个 API，因为我们可以通过渲染 null 简单地卸载任何树：

import { render } from "preact";
import App from "./app";

// Render App into dom
render(<App />, document.getElementById("root"));

// Unmount tree
render(null, document.getElementById("root"));

如果您想删除子树而不是根节点，您可以通过从组件返回 null 来实现。基本上null 总是被视为一个 empty 值。

findDOMNode:

// React
const element = React.findDOMNode(componentInstance);

// In Preact that's just a property
const element = componentInstance.base;

在我们的例子中，这甚至适用于函数组件。请注意，几乎在所有情况下，refs 都比 findDOMNode 更受欢迎。

总结： preact-compat 主要包含第三方库的填充程序，期望与 react 完全 API 兼容。