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

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

当我初次看到该提案时，我也有同样的担忧，但这在React Docs Hooks提案常见问题解答中得到了解决：

挂钩是否由于在render中创建函数而变慢？

不。在现代浏览器中，闭包的原始性能与类相比，除极端情况外没有显着差异。

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

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

• 使用Hooks的惯用语代码不需要使用高阶组件，渲染道具和上下文的代码库中普遍存在的深层组件树嵌套。使用较小的组件树，React要做的工作更少。

总体而言，其好处可能不只是弊端，这使得钩子值得使用。