Javascript React：将函数属性传递给纯子组件-重新排序

我是新来的。我在读纯组件（“纯反应”是我正在读的那本书），遇到了这个让我困惑的例子。书上说：

一般来说，创建新定义的函数以传递到诸如 代码如下。这很糟糕，因为每次将新函数传递给纯组件都意味着 它将始终看到“新”道具，因此总是重新渲染（不必要）。避免在以下情况下在渲染中创建新函数：（a）接收函数道具的子组件处于禁用状态： 纯和（b）您希望父组件经常重新渲染

类应用程序扩展组件{
// ...
renderContent（）{
开关（this.state.activeTab）{
违约：
案例0：退货项目；
案例1：退货车；
}
}
render（）{
让{activeTab}=this.state；
返回(
{this.renderContent（）}
);
}
}
const Nav=（{activeTab，onTabChange}）=>(


onTabChange（0）}>项


onTabChange（1）}>购物车


);

我很困惑，因为我们没有将新定义的函数传递给另一个React组件。我们正在“a”元素的onClick属性上定义一个新函数。那么，对于上面的代码，我们会有我们不想要的额外的重新渲染吗？它不会不必要地重新渲染，因为我没有将“（）=>onTabChange（1）”作为道具传递给React纯子组件，对吗

---

这本书的作者是否试图让我们想象有一个纯反应成分代替了“a”元素？

您没有在Nav组件上传递新的箭头函数，并且它不会重新渲染，因为您正在a元素上使用箭头函数。如果在元素上使用新函数是一种不好的做法，并不是因为这个原因，Nav的渲染是针对每次提供道具时的React行为一个自动渲染的组件，为了防止类组件使用纯组件，功能组件使用备注，此处和示例避免使用备注重新渲染：

const NavMemo = React.memo(({ activeTab, onTabChange }) => {
  console.log('Render');
  return (
    <nav className="App-nav">
      <ul>
        <li className={`App-nav-item ${activeTab === 0 && 'selected'}`}>
          <a onClick={() => onTabChange(0)}>Items</a>
        </li>
        <li className={`App-nav-item ${activeTab === 1 && 'selected'}`}>
          <a onClick={() => onTabChange(1)}>Cart</a>
        </li>
      </ul>
    </nav>
  );
});

const NavMemo=React.memo（{activeTab，onTabChange}）=>{
console.log（'Render'）；
返回(


我看不出上面的代码有任何错误。正如您所说的
我们不会将新定义的函数传递给另一个React组件
。看看作者的意思。
const NavMemo = React.memo(({ activeTab, onTabChange }) => {
  console.log('Render');
  return (
    <nav className="App-nav">
      <ul>
        <li className={`App-nav-item ${activeTab === 0 && 'selected'}`}>
          <a onClick={() => onTabChange(0)}>Items</a>
        </li>
        <li className={`App-nav-item ${activeTab === 1 && 'selected'}`}>
          <a onClick={() => onTabChange(1)}>Cart</a>
        </li>
      </ul>
    </nav>
  );
});