可以在 React 无状态组件中定义 function 吗？

Question

在无状态组件中定义 function（如下例中的handleClick ）是不好的做法吗？ 有人告诉我你应该避免这样做，但我在文档中找不到任何东西来确认它。 如果答案是“是”，那么为什么将 function 定义为 class 会更好？

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>
  );
}

Answer 1

这在 javascript 中通常是一种不好的做法，尤其是在 React 中。 Basically if you declare a function inside a function, every time you call the parent function it will initialize the child function as well and it is a waste of resource. 有关详细信息，您还可以查看： https://code.tutsplus.com/tutorials/stop-nesting-functions-but-not-all-of-them--net-22315

Answer 2

Viet 是正确的，因为这是对资源的浪费。 查看组件树的一个好方法是，您希望在顶部和底部附近处理数据，您的重点仅在于呈现数据。 例如，如果您需要一种操作数据和更新 state 的方法，我建议将挂钩向下传递或转移到 useContext()。 这也将使您的代码更干净，您最终可以使用更高阶的组件来实现类似的功能。