[英]React: Pass function property down to pure child component - Rerendering
I am new to React.我是 React 的新手。 I was reading about pure components ("Pure React" is that book I am reading) and came across this example that got me confused.
我正在阅读有关纯组件的内容(“Pure React”是我正在阅读的那本书)并且遇到了这个让我感到困惑的示例。 The book says:
书上说:
It's generally a bad idea to create newly define functions to pass into props like the code below.
像下面的代码一样,创建新定义的函数来传递给 props 通常是个坏主意。 It's bad because passing a new function down to a pure component every time it renders means that it will always see “new” props, and therefore always re-render (needlessly).
这很糟糕,因为每次渲染时将新的 function 传递给纯组件意味着它将始终看到“新”道具,因此总是重新渲染(不必要地)。 Avoid creating a new function in render when (a) the child component receiving the function prop is pure and (b) you expect the parent component to re-render often.
当(a)接收 function 属性的子组件是纯的并且(b)您希望父组件经常重新渲染时,请避免在渲染中创建新的 function。
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>
);
I am confused because we are not passing a newly-defined function down to another React component.我很困惑,因为我们没有将新定义的 function 传递给另一个 React 组件。 We are defining a new function on the "a" element's onClick property.
我们在“a”元素的 onClick 属性上定义了一个新的 function。 So, for the code above, would we have extra re-renders that we don't want?
那么,对于上面的代码,我们会不会有我们不想要的额外重新渲染? It wouldn't re-render needlessly because I am not passing "() => onTabChange(1)" as a prop to a React pure child component, right?
它不会不必要地重新渲染,因为我没有将“() => onTabChange(1)”作为道具传递给 React 纯子组件,对吧?
Is the author of the book trying to make us imagine that there is a Pure React Component in place of the "a" element in the above code?这本书的作者是否试图让我们想象有一个 Pure React 组件来代替上面代码中的“a”元素?
You are not passing a new arrow function on the Nav Component and it does not re-render because you are using the arrow function on the a element eventho use new functions on the element is a bad practice is not for that reason that the Nav is render is for the React behavior every time that you provide a props on a component it's render automatically, for prevent that you can use Pure component for Class component and memo for functional component here and example to avoid the re-render using memo:您没有在导航组件上传递新箭头 function 并且它不会重新渲染,因为您在元素上使用箭头 function 即使在元素上使用新功能是一种不好的做法,并不是因为导航是render 是针对 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>
);
});
The React doc is: https://reactjs.org/docs/react-api.html#reactmemo React 文档是: https://reactjs.org/docs/react-api.html#reactmemo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.