Question

我是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 Component代替“ a”元素？

Answer 1

您没有在Nav组件上传递新的箭头函数，并且它不会重新渲染，因为在元素上使用了箭头函数，但在元素上使用了新函数并不是一种不好的做法，因此每当您在自动渲染的组件上提供道具时，Nav渲染就是针对React行为的，以防止您可以在此处将Pure组件用于Class组件，将备忘录用于功能组件，并避免使用备忘录来重新渲染示例：

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

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

1 个答案: