React - 功能组件内部的内部功能答案

【问题标题】：React - Inner functions inside functional componentsReact - 功能组件内部的内部功能
【发布时间】：2020-12-10 13:30:44
【问题描述】：

我们的团队就功能组件和内部方法进行了讨论。让我给你看例子

这将是团队中的一部分人想要使用它的方式：

const ShowMeComponent = () => {
  const [isVisible, setVisible] = useState(false);
  const onClick = () => setVisible(!isVisible)
  return (
    <div>
      <button onClick={onClick}>Toggle Visibility</button>
      {isVisible && <div>I am visible!</div>}
    </div>
  );
};

这是团队其他成员希望的方式：

const onClick = (isVisible: boolean, setVisible: YouHaveToTypeIt) => (e: ClickEvent) => setVisible(!isVisible)

const ShowMeComponent = () => {
  const [isVisible, setVisible] = useState(false);
  const onClickClosure = onClick(isVisible,setVisible)
  return (
    <div>
      <button onClick={onClickClosure}>Toggle Visibility</button>
      {isVisible && <div>I am visible!</div>}
    </div>
  );
};

所以在我看来，代码的可读性越来越差，而且您还有更多工作要做，因为您必须键入要移出组件的函数。我看不出这样做的任何不利之处 const onClick = () => setVisible(!isVisible)

他们使用的一个论点是，通过在组件之外移动函数，您可以轻松地对它们进行单元测试。但是我们不应该将组件视为一个单元吗？同样在文档中，我看不到与功能组件中的方法相关的任何不良内容。

请告诉我你的想法。

最好的问候

【问题讨论】：

好吧，setVisible(!isVisible) 甚至不是根据当前状态更改状态的正确方法。您需要使用回调版本setVisible(visible => !visible)。 :) 这种方法将允许您将突变功能移到组件 const toggle = visible => !visible 之外并对其进行单元测试。一般来说，你不应该改变你的代码来测试它。通常您不想测试组件内部状态和处理程序等实现细节，您想测试组件行为：即用户单击 div 切换。
我完全同意更改测试代码并使其可读性降低是愚蠢的。所以你同意我们应该将组件视为单元？
完全。但是，如果状态更改功能足够复杂以使其成为一个单独的单元，您可以从组件中提取它并进行测试。

标签： reactjs jestjs react-hooks

【解决方案1】：

我认为前者比后者更合适。你是对的，一个组件在测试时应该被视为一个单元。

后者不仅可读性差，而且消除歧义，如果处理得不好，会导致内存泄漏问题。毕竟，你是在使用一个类的 setVisible 方法而不是创建它的对象。

【讨论】：

你能告诉我更多关于内存泄漏的信息吗？
您在声明它的组件之外使用 setVisible。这样，任何人都可以通过该方法手动分配值，并会导致灾难。这就是为什么在从类本身内部调用 setVisible 方法之前，工作会很危险。这不是一个好的做法，并且从不建议您考虑这个风险因素。