10

所以我现在开始使用 React hooks。我已经用 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. 但是有没有人遇到过更好的方法呢？

4

3 回答 3

7

当我第一次看到该提案时，我也有同样的担忧，但在React Docs Hooks Proposal FAQ中解决了这个问题：

由于在渲染中创建函数，Hooks 会变慢吗？

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

我的收获是，虽然您现在在每次渲染的重复声明中有额外的开销，但您在其他地方有额外的胜利：

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

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

总体而言，好处可能不仅仅是使钩子值得使用的缺点。

于 2018-11-06T19:09:56.840 回答
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;

同样在我看来，所有演示和文档中建议的功能设计是为了让人们熟悉它，然后考虑重新初始化方面。此外，重新初始化的成本将大大超过它提供的其他好处。

于 2018-11-06T18:02:52.490 回答
1

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

实用程序/createOnce.js

import { useMemo } from 'react';

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

SomeComponent.js

...

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

...
于 2018-11-08T10:51:30.617 回答