时间戳

首页 > 解决方案 > React：将函数属性传递给纯子组件 - 重新渲染

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

问题描述

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

像下面的代码一样，创建新定义的函数来传递给 props 通常是个坏主意。这很糟糕，因为每次渲染时将新函数传递给纯组件意味着它总是会看到“新”道具，因此总是重新渲染（不必要地）。当 (a) 接收函数 prop 的子组件是纯的并且 (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”元素？

标签： javascriptreactjs

解决方案

您没有在 Nav 组件上传递新的箭头函数，并且它不会重新渲染，因为您在 a 元素上使用箭头函数即使在元素上使用新函数是一种不好的做法，不是因为 Nav 是render 是针对 React 行为，每次您在组件上提供 props 时，它会自动呈现，以防止您可以将 Pure 组件用于 Class 组件，将 memo 用于功能组件，以及示例以避免使用 memo 重新渲染：

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

推荐阅读