将 React ES6 class 转换为功能组件 - 私有方法使用什么？

Question

我正在将 React ES6 类样式组件转换为功能组件。 我有点不确定的一件事是如何最好地转换私有 class 方法。 据我所知，我应该将它们转换为功能组件 function 中的函数，因为它们需要在那里才能访问组件的 state。 然而，这大概意味着在每次重新渲染时，function 将被重新创建：

前

class Game extends React.Component {

    handleClick(i) { if (this.state.foo) { ... } }

}

后

function Game {

    function handleClick(i) { if (foo) { ... } }

}

这是性能方面的问题吗？如果是，有什么方法可以改善它吗？

此外，我读过的大多数指南都建议将箭头函数分配给变量，而不仅仅是声明函数，例如。

function Game {

    const handleClick = (i) => { if (foo) { ... } }

}

这是纯粹的风格，还是有其他理由在常规嵌套 function 定义上使用分配的箭头函数？

Answer 1

您可以使用通过function关键字或箭头 function 语法定义的函数。 在这种情况下，它并没有真正的区别。 但是，使用箭头语法，函数不会被提升，如果在定义之前使用 function，则可能会导致 linter 报告警告。

然而，这大概意味着在每次重新渲染时，function 将被重新创建

你是对的，如果你以任何一种方式定义函数，它们将在每次重新渲染时重新创建。 这是否是一个问题将取决于您的用例。

如果您在useEffect回调中使用这样的 function 并将其添加到其依赖数组中，则效果将在每次重新渲染时重新运行（这可能不是您想要的）。 如果您将这样的 function 作为prop传递给任何子组件，则该组件也将重新渲染。

您可以使用useCallback React.memo这些作为props接收的任何子组件。 但是，您现在正在用重新渲染组件的成本来换取存储和比较props的成本（React 会这样做，而不是您）。

所以真的，这取决于你的应用程序。 如果有问题的组件下面有一个大的组件树，那么使用useCallback和React.memo可能是值得的。