在React无状态组件中定义函数是否可行？

Question

在无状态组件中定义函数（例如下面示例中的handleClick）是不良实践吗？我被告知应该避免这样做，但是我无法在文档中找到任何证明。如果答案是“是”，那么为什么在类中定义一个函数会更好呢？

function MiniPalette(props) {
  const {classes } = props;
  

  function handleClick() {
    history.push(`palette/${id}`);
  }

  return (
    <div className={classes.root} onClick={handleClick}>
      <div className={classes.colors}>{miniColorBoxes}</div>
      <h5 className={classes.title}>
        {paletteName}
        <span className={classes.emoji}>{emoji}</span>
      </h5>
    </div>
  );
}

- Karim K

---

没问题。这份文档里有很多类似的例子。 - dpwr

Answer 1

在javascript中，将函数声明在另一个函数内通常是不好的实践，这不仅适用于React。因为如果你在一个函数内声明了另一个函数，每次调用父函数时都会初始化子函数，从而浪费资源。有关详细信息，您还可以查看这个网址：https://code.tutsplus.com/tutorials/stop-nesting-functions-but-not-all-of-them--net-22315

- Viet

Answer 2

越南的看法是正确的，这是一种资源浪费。组件树的一个好方法是，在顶部处理数据，在底部附近，你只关注呈现数据。例如，如果你需要一种方法来操纵数据并更新状态，我建议向下传递钩子或转到useContext（）。这也会使您的代码更清洁，最终您可以使用高阶组件进行类似功能的操作。

- Kota