Question

我对反应没有经验。想知道每个人在非类组件中声明函数包装的想法。我已经读过，该函数将在每次重新渲染时重新声明，这可能会导致性能问题。使用React Hooks的“ useCallback”，可以通过存储“缓存的”回调来克服，这会阻止包装器函数被重新声明吗？

例如

function myComponent(props){
    const callBack = () => {// do something};
    return <SomeComponent callback={callBack} />;
}

VS

function myComponent(props){
    const callBack = useCallback(() => 
      {// do something}, [// dependencies]);
    return <SomeComponent callback={callBack} />;
}

Answer 1

不必太担心在每个渲染器上创建函数，这几乎不会成为React应用程序的性能瓶颈（这实际上取决于您的项目）。

您可以检查指向react docs的链接以供参考：https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

如果确实需要，您可以取消渲染此功能，然后执行以下操作：

getContext()

使用这种方法，您的函数将仅创建一次，但是再次，不必为此担心太多。在某些情况下，这样做比较困难，例如，在渲染项目列表时，您仍然需要为每个项目创建一个函数：

function doStuff(a) { ... }

function MyComponent(props) {
  return (
    // call doStuff(props.a) somewhere
  );
}

即使function doStuff(item) { ... } function MyComponent(props) { return ( <div> { props.items.map(function(item, index) { return ( <OtherComponent key={index} data={item} onClick={() => doStuff(item)} /> ); }) } </div> ); }函数仅被创建一次，您仍将为每个项doStuff prop创建一个函数。再次很好，这几乎不会成为您的React应用程序的性能瓶颈。

注意：即使使用onClick，您仍在每个渲染上创建一个新的箭头功能，但是useCallback可以提高性能，因为它不会运行如果依存关系没有改变，请再次运行。

React Hooks：在组件中声明函数包装器

1 个答案: