代码之家 › 专栏 › 技术社区 › hannad rehman

React函数组件在重新呈现时重新初始化本地函数和变量(React Hooks)

react-hooks reactjs javascript

hannad rehman · 技术社区 · 7 年前

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 . 但是有没有人找到更好的方法呢?

3 回复 | 直到 7 年前

Community Mohan Dere 6 年前

当我第一次看到这个提议的时候,我也有同样的担忧,但是这个问题在报告中得到了解决 React Docs Hooks Proposal FAQ

钩子速度慢是因为在render中创建函数吗?

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

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

总的来说,好处可能比坏处更多,这使得钩子值得使用。

Shubham Khatri 7 年前

通过将所需的值作为常量传递,您总是可以简化代码以去掉函数,这样它们就不会总是被初始化。

    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;

Watcharaphat Manosatiankul 7 年前

createOnce 帮助函数来防止重新初始化,但我不确定它是否正确。

import { useMemo } from 'react';

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

SomeComponent.js

...

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

...