Question

所以我现在开始使用React挂钩。我已经尝试使用API一段时间了。我真的很喜欢将状态引入功能组件的想法。但是有一件事情一直困扰着我，当我尝试使用它时，它在肠道中感觉不正确。我尝试在RFCs上发帖，但现在那里太拥挤了。那里似乎一切都消失了。

这是我示例中的一段代码。

import React, { useState } from "react";

function Counter() {
  const [counterState,incrementCounterState] =  useCommontState(0); 

  function doSomething (){
   // does something and then calls incrementCounterState
   // with the updated state.
  }

   return (
    <div>
      <p>{counterState}</p>
      <button onClick={incrementCounterState}>increase</button>
      ....
      .... // some jsx calling local scoped functions.
      ....
    </div>
    );
}

function useCommontState(defaultValue){
  var [state, setState] = useState(0);
  function increment(){
    setState(defaultValue+=1);
  }
  return [state, increment]
}

export default Counter;

我可以轻松地取出state和setState方法并创建自定义hook，但是我的问题是该组件使用的局部函数。由于状态现在已成为组件的一部分，因此在某些情况下，某些逻辑将决定下一步如何处理状态。

此外，当组件在状态更改时重新呈现时，所有内容都会重新初始化。这是我的问题。我知道useState有自己的处理方式。但是我的问题是我自己的功能。点击处理程序。在更改事件，子组件的回调等上，所有这些都会在每次组件渲染时重新初始化。这对我来说不合适。

是否有任何方法可以解决它。这是一个新的API。我们甚至不确定它是否会变成react 17。但是有人能找到更好的方法吗？

Answer 1

当我第一次看到该提案时，我也有同样的担忧，但这在https://www.alibabacloud.com/help/doc-detail/26621.htm?spm=a2c63.p38356.a3.3.33ae47adUihT06中得到了解决：

由于在渲染器中创建函数，钩子变慢了吗？

不。在现代浏览器中，与封闭类相比，闭包的原始性能没有很大区别，除非在极端情况下。

我的收获是，尽管现在每个渲染器的重复声明中您有额外的开销，但在其他地方还有其他的胜利：

钩子避免了类所需的大量开销，例如在构造函数中创建类实例和绑定事件处理程序的开销。



使用Hooks的惯用代码不需要深层的组件树嵌套，而在使用高阶组件，渲染道具和上下文的代码库中很常见。使用较小的组件树，React的工作量就减少了。

总的好处可能不仅仅是弊端，这使得钩子值得使用。

Answer 2

通过将所需的值作为常量传递，您可以始终简化代码以提取函数，从而使函数不总是被初始化。

    import React, { useState } from "react";

    function doSomething (counterState, incrementCounterState){
       // does something and then calls incrementCounterState
       // with the updated state.
   }
    function Counter() {
      const [counterState,incrementCounterState] =  useCommontState(0); 

       return (
        <div>
          <p>{counterState}</p>
          <button onClick={incrementCounterState}>increase</button>
          ....
          .... // some jsx calling local scoped functions.
          ....
        </div>
        );
    }

    function increment(defaultValue, setState){
        setState(defaultValue + 1);
    }

    function useCommontState(defaultValue){
      var [state, setState] = useState(0);
      return [state, increment]
    }

    export default Counter;

在我看来，所有演示和文档中建议的功能设计是让人们熟悉它，然后考虑重新初始化方面。同样，重新初始化的成本将明显地被它提供的其他好处所抵消。

Answer 3

我正在使用createOnce辅助函数来防止重新初始化，但是我不确定它是否正确。

utils / createOnce.js

import { useMemo } from 'react';

export const createOnce = toCreate => useMemo(() => toCreate, []);

SomeComponent.js

...

const someFunction = createOnce((counter) => {
  // whatever
  return counter + 1;
});

...

React功能组件在渲染时重新初始化局部函数和变量（React Hooks）

3 个答案: