Reactjs 无状态组件中的子组件

我在谷歌上搜索了很多，但是找不到答案，这让我觉得自己很愚蠢

在有状态组件中，我通常将一些部分编写为小函数，如

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

renderSmth=（）=>(
...
);

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

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

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

const renderSmth=（）=>(
...
);

eslint警告我没有多重补偿。据我所知，是这样写的

const smth = (
    <div>
        ...
    </div>
);

const smth=(
...
);

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

---

我是否理解无状态组件在每次重新渲染时都会重新计算？最后一种方法合法吗？或者有什么缺点吗？

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

如果你不需要在smth里面使用道具，那就是最好的选择。否则，您可以声明它嵌套在主函数中，如下所示：

renderSmth=（道具）=>{
常量smth=（道具）=>(
...
);
返回(
...
smth（道具）
);
};

这似乎是因为

renderSmth

正在定义一个新组件

smth

仅使用现有组件；例如，它不接受

道具。对于Instance，您可以使用
ignoreStateless