React hooks 中的函数组件中的函数 - 性能 [英] Function inside functional component in React hooks - Performance

问题描述

需要关于在 React Hooks 中的功能组件中具有功能的建议.

Need suggestion on having function within a functional component in react Hooks.

据我研究，很多人说这是不好的做法因为每次我们调用重新渲染时它都会创建嵌套/内部函数.经过一番分析，

As far as I researched, many are saying it is bad practice because it creates nested/inner function every time we call re-render. After doing some analysis,

我发现我们可以在元素上使用 onClick={handleClick.bind(null, props)} 并将函数放在函数组件之外.

I found we can use onClick={handleClick.bind(null, props)} on the element and place the function outside the functional component.

示例:

const HelloWorld = () => {
  function handleClick = (event) => {
    console.log(event.target.value);
  }

  return() {
    <>
        <input type="text" onChange={handleClick}/>
    </>
  }
}

请告知是否有任何替代方法.

Please advise if there is any alternative way.

提前致谢.

推荐答案

别担心

不要担心在每次渲染时创建新函数.只有在边缘情况下才会妨碍您的表现.设置 onClick 处理程序不是其中之一，因此只需在每次渲染时创建一个新函数即可.

Don't worry about it

Don't worry about creating new functions on each render. Only in edge cases does that impede your performance. Setting onClick handlers are not one of those, so just create a new function on each render.

然而，当你需要确保每次都使用相同的函数时，你可以使用 使用回调

However, when you need to make sure you use the same function every time, you can use useCallaback

这就是为什么您不应该为 onClick 处理程序(和大多数其他事件处理程序)使用 useCallback 的原因.

Here is a reason why you shouldn't bother with useCallback for onClick handlers (and most other event handlers).

考虑以下代码片段，其中一个没有 useCallback:

Consider the following code snippets, one without useCallback:

function Comp(props) {
  return <button onClick={() => console.log("clicked", props.foo)}>Text</Button>
}

和 useCallback 之一:

and one with useCallback:

function Comp(props) {
  const onClick = useCallback(() => {
    console.log("clicked", props.foo)
  }, [props.foo])

  return <button onClick={onClick}>Text</Button>
}

后者的唯一区别是 React 确实有如果 props.foo 保持不变，则更改按钮上的 onClick.改变回调是一个非常便宜的操作，而且根本不是值得让您的代码复杂化，以提高其理论性能.

The only difference in the latter is that React doen's have to change the onClick on your button if props.foo remains the same. Changing the callback is a very cheap operation, and it's not at all worth complicating your code for the theoretical performance improvement it gives.

另外，值得注意的是每次渲染时仍会创建一个新函数即使您使用 useCallback，但 useCallback 将返回旧的只要作为第二个参数传递的依赖项不变.

Also, it's worth noting that a new function is still created on every render even when you use useCallback, but useCallback will return the old one as long as the dependencies passed as the second argument are unchanged.

使用 useCallback 的意义在于，如果您将两个函数与引用进行比较等式，fn === fn2 只有当 fn 和 fn2 指向内存中的同一个函数时才为真.功能是否做相同并不重要.

The point of using useCallback is that if you compare two functions with reference equality, fn === fn2 is true only if fn and fn2 point to the same function in memory. It doesn't matter if the functions do the same.

因此，如果您有记忆或仅在函数更改时运行代码，使用 useCallback 再次使用相同的函数会很有用.

Thus, if you have memoisation or otherwise only run code when the function changes, it can be useful to use useCallback to use the same function again.

例如，React hooks 比较新旧依赖项，可能 使用 对象.是.

As an example, React hooks compare old and new dependencies, probably using Object.is.

另一个例子是 React.PureComponent，它只会在道具或状态已更改.这对于使用大量资源进行渲染的组件很有用.通过例如每次渲染时对 PureComponent 的新 onClick 将导致它每次重新渲染.

Another example is React.PureComponent, which will only re-render when props or state have changed. This can be useful for components that use a lot of resources to render. Passing e.g. a new onClick to a PureComponent on each render will cause it to re-render every time.

这篇关于React hooks 中的函数组件中的函数 - 性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！