Question

我在Google上搜索了很多，但是找不到答案，这让我感到很愚蠢。

在有状态组件中，我通常将某些部分编写为小功能，例如

previous_event_id

，然后在主渲染方法中通过调用使用它。

对于无状态组件，当我以相同的方式编写子部分时，即

created_at

eslint给我有关no-multi-comp的警告。据我了解，以这种方式编写

renderSmth = () => (
    <div>
        ...
    </div>
);

应该给出相同的结果，只是用法会略有不同-而不是函数调用。

我是否理解正确，无状态组件会在每次重新渲染时重新计算？最后一种方法是合法的还是有缺点？

Answer 1

区别在于，如果您将smth声明为变量而不是函数，则将无法访问props。

如果您不需要在smth内使用道具，那就是要走的路。否则，您可以将其声明为嵌套在主函数中，如下所示：

renderSmth = (props) => {
  const smth = (props) => (
    <div>...</div>
  );

  return (
    <div>
      ...
      smth(props)
    </div>
  );
};

无状态组件中的子组件

1 个答案: