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

Question

我正在构建我自己的自定义 React 渲染器，它渲染到我自己的自定义引擎中，而不是 DOM。它可以工作，但理想情况下我想将我的较低引擎层移动到它自己的流程/网络 worker 中。然而，现在这将使对引擎的所有操作都需要异步调用。
是否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);
  });
}

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

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

另外， ref将通过这个 promise 。像这样使用它:

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

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

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

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