react hooks后面的JavaScript机制如何工作? [英] How does JavaScript mechanism behind react hooks work?

问题描述

我的问题与使反应挂钩成为可能的Javascript机制有关.

My question relates to Javascript mechanisms that make react hooks possible.

React的最新开发使我们可以创建钩子，即.用于React状态，在简单的函数之内，例如:

Recent development in React allows us to create hooks, ie. for React state, within as simple function like:

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

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

The hook useState returns an array with an accessor and a mutator, and we use them by array decomposition inside our App function.

因此，在幕后，该钩子看起来像(只是一个伪代码):

So under the hood, the hook looks something like (just a pseudocode):

function useState(defaultValue) {
  let value = defaultValue;

  function setValue(val) {
    value = val;
  }

  return [value, setValue];
}

当您在JS中尝试这种方法时，它将无法正常工作-如果您在某处使用setValue，则从数组分解的值将不会更新.即使将value用作对象，也不能使用原始的defaultValue.

When you try this approach in JS it won't work - value decomposed from array will not update if you use setValue somewhere. Even if you use the value as an object, not a primitive defaultValue.

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

My question is how does hook mechanism work in JS?

从我在React中看到的源代码，它使用化简器功能并通过Flow进行类型检查.对于我来说，要理解全局，代码很棘手.

From what I've seen in React sourcecode it uses reducer function and type-checking with Flow. The code is tricky to follow for me to understand the big picture.

这个问题与如何在React中编写自定义钩子有关.

This question is not about how to write custom hooks in React.

在此问题中回答的React状态管理的上下文中，钩子如何在后台运行也不是问题:

It's also not question how hooks work under the hood in context of React state management answered in this question: React Hooks - What's happening under the hood?

推荐答案

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

You have to store the value outside of the function, so that it returns persistent results across calls. Additionally setting the value has to cause a rerender on the component it gets called in:

 // 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将再次被调用，并且将返回新值.

Then when setValue gets called, the component rerenders, useState will get called again, and the new value will get returned.

这篇关于react hooks后面的JavaScript机制如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！