current position:Home>React 16.6 memo()

React 16.6 memo()

2022-04-29 04:26:11baoleilei6


React 16.6.0 Released Mainly updated two new important functions :

  • React.memo()
  • React.lazy(): Use React Suspense Code splitting and lazy loading

Today we will focus on React.memo(), Introduction to the follow-up meeting React.lazy() and Suspense.

React.memo() What is it? ?

React.memo() and PureComponent Very similar , It helps us control when to re render components .

Component only in its props Re render when changes occur . Generally speaking , In the component tree React Components , As long as there is a change, it will go through the rendering process . But by PureComponent and React.memo(), We can just let some components render .

const ToBeBetterComponent = React.memo(function MyComponent(props) {
  // only renders if props have changed

Because only the components that need to be rendered are rendered , So this is a performance improvement .

PureComponent Depend on class Can be used . and React.memo() You can talk to functional component Use it together .

import React from 'react';

const MySnowyComponent = React.memo(function MyComponent(props) {
  // only renders if props have changed!

// can also be an es6 arrow function
const OtherSnowy = React.memo(props => {
  return <div>my memoized component</div>;

// and even shorter with implicit return
const ImplicitSnowy = React.memo(props => (
  <div>implicit memoized component</div>

Package existing components

because React.memo() It's a high-level component , You can use it to wrap an existing functional component:

const RocketComponent = props => <div>my rocket component. {props.fuel}!</div>;

// create a version that only renders on prop changes
const MemoizedRocketComponent = React.memo(RocketComponent);

Why is it called memo?

That's what Wikipedia says :

In the field of computer , Memorization is an optimization technology scheme mainly used to improve the speed of computer programs . It stores the returned results of expensive function calls , When the same input occurs again , The cached data is returned , So as to improve the computational efficiency .

notes : stay 《JavaScript Ninja Secret 》 Of 3.2.2 In the festival 「 Self memory function 」 There is such an introduction in : Memorization is a process of constructing functions , Be able to remember the last calculation result . In this shell , When the function calculates the result, the result is stored according to the parameters . In this way , If another call uses the same parameters , We can directly return the last stored result instead of calculating it again . Avoiding repetitive and complex calculations like this can significantly improve performance .

This is it. React.memo() The things that were done , So it's called memo It also makes sense . It checks whether the next rendering is the same as the previous one , If the two are the same , Then the last rendering result will be retained .

There are also people in Twitter I've asked in the newspaper Dan This problem ,Dan Explains why it's called memo Not like it PureComponent like that , Is called memo

Memoized component. There was a lot of feedback on the RFC which we agree with — "pure" naming is confusing because memoization (which is what memo does) has nothing to do with function "purity".


It's a good idea React Very useful new features , Because we could only use class component To take advantage of PureComponent Performance advantages . And now , We have it. React.memo(), You can use functional component 了

author : Coke front end
link :
source : Simple books
The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .

copyright notice
author[baoleilei6],Please bring the original link to reprint, thank you.

Random recommended