React：将函数属性传递给纯子组件 - 重新渲染答案

【问题标题】：React: Pass function property down to pure child component - RerenderingReact：将函数属性传递给纯子组件 - 重新渲染
【发布时间】：2019-11-04 09:01:16
【问题描述】：

我是 React 新手。我正在阅读有关纯组件的内容（“Pure React”是我正在阅读的那本书）并且遇到了这个让我感到困惑的示例。书上说：

创建新定义的函数来传递给像下面的代码。这很糟糕，因为每次渲染时将新函数传递给纯组件意味着它总是会看到“新”道具，因此总是重新渲染（不必要地）。当 (a) 接收函数 prop 的子组件是 pure 并且 (b) 您希望父组件经常重新渲染。

class App extends Component {
// ...
    renderContent() {
        switch(this.state.activeTab) {
           default:
           case 0: return <span>Items</span>;
           case 1: return <span>Cart</span>; 
        }
    }

    render() {
        let {activeTab} = this.state;
        return (
           <div className="App">
              <Nav activeTab={activeTab} onTabChange={this.handleTabChange} />
              <main className="App-content">
              {this.renderContent()}
              </main>
           </div>
    );
    }
}

const Nav = ({ activeTab, onTabChange }) => (
    <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>
);

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

这本书的作者是不是想让我们想象上面代码中有一个 Pure React 组件来代替“a”元素？

【问题讨论】：

我在上面的代码中没有看到任何错误。正如你所说的we are not passing a newly-defined function down to another React component。不明白本书作者的意思。

标签： javascript reactjs

【解决方案1】：

您没有在导航组件上传递新的箭头函数并且它不会重新渲染，因为您在 a 元素上使用箭头函数即使在元素上使用新函数是一种不好的做法，不是因为这个原因导航是渲染用于 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>
  );
});

React 文档是： https://reactjs.org/docs/react-api.html#reactmemo

【讨论】：