[React] Use React.memo with a Function Component to get PureComponent Behavior

1285 단어
A new Higher Order Component (HOC) was recently released in React v16.6.0 called  React.memo . This behavior of the HOC is similar to what you’d get when using  React.PureComponent  or  shouldComponentUpdate  in a React Class Component. However, now with the introduction of  React.memo , you can leverage this behavior for React Function Components. The end result is that React will skip rendering the component if the props have not changed and will reuse the last rendered result.
 
To prevent extra rendering, we can use 'shouldComponentUpdate' in the past, new API 'React.memo' is a high order component which is doing the same things with cleaner API:
const Greeting = React.memo(({ text }) => {
  console.log("I'm in Greeting");
  return 

Hello, {text}!

; });

If the 'text' prop doesn't change, then the Greeting component won't be re-rendered

좋은 웹페이지 즐겨찾기