javascript - 函数组件中的函数应该放在哪里？

Question

我正在尝试转换这个很酷的 <canvas>我找到的动画here到 React 可重用组件中。看起来该组件需要一个用于 Canvas 的父组件，以及用于 function Ball() 的许多子组件。 .

出于性能原因，将Balls设置为可能会更好。成无状态组件，因为它们有很多。我不太熟悉制作无状态组件，并且想知道应该在哪里定义 this.update()和this.draw function Ball() 中定义的函数.

无状态组件的函数是在组件内部还是外部？换句话说，以下哪一个更好？

1:

const Ball = (props) => {
    const update = () => {
        ...
    }

    const draw = () => {
        ...
    }

    return (
       ...
    );
}

2:

function update() {
     ...
}

function draw() {
     ...
}

const Ball = (props) => {
    return (
       ...
    );
}

每种方法都有哪些优点和缺点，其中一种更适合像我这样的特定用例？

Answer 1

首先要注意的是无状态功能组件不能有方法:您不应该指望调用 update或draw在渲染的 Ball如果是无状态功能组件。

在大多数情况下，您应该在组件函数之外声明函数，这样您只需声明一次，并且始终重用相同的引用。当您在内部声明函数时，每次渲染组件时都会再次定义该函数。

在某些情况下，您需要在组件内定义一个函数，例如，将其分配为事件处理程序，该事件处理程序根据组件的属性表现不同。但您仍然可以在 Ball 之外定义该函数并将其与属性绑定(bind)，使代码更加简洁并使update或draw可重用的函数:

// you can use update somewhere else
const update = (propX, a, b) => { ... };
    
const Ball = props => (
  <Something onClick={update.bind(null, props.x)} />
);

如果您使用 Hook ，则可以使用useCallback确保该函数仅在其任何依赖项发生更改时才重新定义(在本例中为 props.x):

const Ball = props => {
  const onClick = useCallback((a, b) => {
    // do something with a, b and props.x
  }, [props.x]);

  return (
    <Something onClick={onClick} />
  );
}

这是错误的方式:

const Ball = props => {
  function update(a, b) {
    // props.x is visible here
  }
    
  return (
    <Something onClick={update} />
  );
}

当使用useCallback时，定义update useCallback 中的函数钩子(Hook)本身或组件外部成为最重要的设计决策:您应该考虑是否要重用 update和/或如果您需要访问组件闭包的范围，例如读/写状态。就我个人而言，我选择默认将其定义在组件内部，并仅在需要时才使其可重用，以防止从一开始就过度设计。最重要的是，重用应用程序逻辑最好使用更具体的钩子(Hook)来完成，而将组件保留用于演示目的。使用钩子(Hook)时在组件外部定义函数实际上取决于您希望应用程序逻辑与 React 解耦的程度。

另一个common discussion关于useCallback是是否总是将它用于每个功能。也就是说，视为选择加入或始终推荐。我认为始终使用 useCallback :我见过许多由于未将函数包装在 useCallback 中而导致的错误并且在任何情况下这样做都不会以任何方式影响性能或逻辑。在大多数情况下，您希望在依赖项不更改的情况下保留引用，因此您可以使用函数本身作为其他效果、备忘录或回调的依赖项。在许多情况下，回调将作为 props 传递给其他元素，如果您使用 useCallback 来内存它您不会更改 Prop (从而重新渲染)其他组件，无论其成本有多低。我见过组件中声明的数千个函数，但没有一个使用 useCallback 的情况。会有任何不利的一面。另一方面，大多数函数都没有用 useCallback 来内存。如果开发人员没有意识到不这样做的影响，最终将被更改为这样做，从而导致严重的错误或性能问题。 技术上使用 useCallback 会影响性能，就像您将创建和附加函数一样，但与您使用 useCallback 总是必须发生的函数的重新声明相比，它可以忽略不计。与否以及 React 和 JavaScript 的总体足迹。因此，如果您确实关心 useCallback 的性能影响与不使用它相比，您应该问自己 React 是否是适合这项工作的工具。