Question

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

这就是团队的一个成员想要使用它的方式：

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)

他们使用的参数之一是，通过将函数移到Component之外，您可以轻松地对其进行单元测试。但是我们不应该将组件视为一个单元吗？同样在文档中，我看不到任何与功能组件内部的方法有关的坏消息。

请让我知道您的想法。

最好的问候

Answer 1

我认为前者比后者更合适。没错，测试时应将组件视为一个单元。

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

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

1 个答案: