Question

我正在构建自己的自定义 React 渲染器，该渲染器渲染到我自己的自定义引擎中，而不是 DOM。它可以工作，但理想情况下我想将我的较低引擎层移动到它自己的流程/网络工作者中。但是，现在这将使对引擎的所有操作都需要异步调用。

react-reconciler HostConfig 是否支持异步方法？如果是这样，到什么程度以及如何？

Answer 1

我将尝试在我的知识范围内使用示例来回答这个问题。我假设您了解 react-reconciler 的基础知识。

react-reconciler 不支持传统方式的异步方法。但是；

当调用像 createInstance 这样的渲染器方法时，reconciler 期望立即得到结果。但结果如何取决于你，只要它是独一无二的。它可以是对象、指针、整数、Promise、DOMElement、字符串。您可以充分利用这一点。

例如，假设您正在为浏览器创建一个渲染器，它会在 1 秒后创建一个 DOMElement。然后你会写 createInstance 方法（非常简单的例子）：

createInstance(type) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(document.createElement(type)), 1000);
  });
}

但是，请注意，此承诺将传递给其他协调器方法。因此，您必须编写其他协调器方法，例如：

commitUpdate(instance, payload) {
  instance.then((val) => {
    val.attribute = payload; // Do your thing
  });
}

此外，ref 将通过此承诺。像这样使用它：

function App() {
  const [ref, setRef] = useState();

  useEffect(() => {
    ref.then((el) => {
      el.value = 'Hello world';
    });
  }, [ref]);

  return <input ref={ref} />;
}

在我的示例中，我使用了 Promise。但是您可以使用指针（也许您有一个本地对象）、一个整数（也许您在队列中有一个索引）、一个字符串（也许是一个散列键）。唯一的限制是它必须是唯一的。

带有异步协调器方法的自定义 React 渲染器

1 个答案: