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

我正在尝试将我找到的这个很酷的<canvas>动画here转换为Reaction可重用组件。此组件似乎需要一个父组件用于画布，多个子组件用于function Ball()。

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

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

1：

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

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

    return (
       ...
    );
}

2：

function update() {
     ...
}

function draw() {
     ...
}

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

每种都有什么优缺点，哪一种更适合我这样的特定用例？

---

解决方案

首先要注意的是，无状态功能组件不能有方法，如果呈现的Ball是无状态功能组件，则不应指望调用update或draw。

在大多数情况下，您应该在组件函数外部声明函数，以便只声明一次，并且始终重用相同的引用。当您在内部声明函数时，每次呈现组件时都将重新定义该函数。

在某些情况下，您需要在组件内定义一个函数，例如，将其指定为基于组件属性行为不同的事件处理程序。但是，您仍然可以在Ball外部定义函数，并将其与属性绑定，从而使代码更加简洁，并使update或draw函数可重用。

// You can use update somewhere else
const update (propX, a, b) => { ... };

const Ball = props => (
  <Something onClick={update.bind(null, props.x)} />
);

如果您使用的是钩子，则可以使用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时，在useCallback挂接中定义update函数在组件外部成为最重要的设计决策，您应该考虑是否要重用update和/或是否需要访问组件闭包的作用域，例如读/写状态。就我个人而言，我选择在默认情况下在组件中定义它，并且仅在需要时才使其可重用，以防止从一开始就过度工程。最重要的是，重用应用程序逻辑最好使用更具体的挂钩，而将组件留作表示目的。在使用挂钩时在组件外部定义函数实际上取决于您希望应用程序逻辑与Reaction分离的级别。