Question

注意：此问题与how to write custom hooks in React无关。

React的最新开发使我们能够创建钩子，即。对于React状态，在简单的函数之内，例如：

function App () {
  const [someVar, setSomeVar] = useState('someVarDefaultValue');
  return (
    <div 
      onClick={() => setSomeVar('newValue')}>{someVar}
    </div>
  );
}

钩子useState返回带有访问器和变量的数组，我们通过App函数内部的数组分解来使用它们。

因此，在幕后，该钩子看起来像（只是一个伪代码）：

function useState(defaultValue) {
  let value = defaultValue;

  function setValue(val) {
    value = val;
  }

  return [value, setValue];
}

当您在JS中尝试这种方法时，它将无法工作-从数组中分解出来的值将不会在您在某处使用setValue时更新，即使您将值用作对象而不是直接使用默认值也是如此。

我的问题是挂钩机制在JS中如何工作？

根据我在React sourcecode中看到的内容，它使用了reducer函数并使用Flow进行类型检查。对于我来说，要理解全局，代码很棘手。

Answer 1

您必须将值存储在函数外部，以便在调用之间返回持久结果。另外，设置该值必须在其调用的组件上重新渲染：

 // useState must have a reference to the component it was called in:
 let context;

 function useState(defaultValue) {
   // Calling useState outside of a component won't work as it needs the context:
   if(!context) throw new Error("Can only be called inside render");
   // Only initialize the context if it wasn't rendered yet (otherwise it would re set the value on a rerender)
   if(!context.value)
    context.value = defaultValue;
   // Memoize the context to be accessed in setValue
   let memoizedContext = context;
   function setValue(val) {
      memoizedContext.value = val;
      // Rerender, so that calling useState will return the new value
      internalRender(memoizedContext);
   }

  return [context.value, setValue];
 }

// A very simplified React mounting logic:
function internalRender(component) {
   context = component;
   component.render();
   context = null;
}



 // A very simplified component
 var component = {
  render() {
    const [value, update] = useState("it");
    console.log(value);
    setTimeout(update, 1000, "works!");
  }
};

internalRender(component);

然后，当调用setValue时，该组件将重新呈现，useState将再次被调用，并且新值将被返回。

反应挂钩背后的机制如何发挥作用？

1 个答案: