[React] useMemo and React.memo
As a beginner of React, might have the confuses with 'useMemo' and 'React.memo':
'useMemo':
When using functional components in React we may run into situations where we are performing expensive calculations multiple times, even though the values passed in to the functional component hasn't changed.
This is where useMemo
hook comes in. In this lesson we are going to learn how to use useMemo
hook to optimize an expensive (in this example - highly expensive operation of adding two numbers together, for simplicity) operation so that its result is recalculated only when it's necessary - that is, when the input arguments have changed. Otherwise, we are going to use an optimized, memoized result.
'useMemo' is a high order function, which is used to improve expansive operations. It memos the input of function, if inputs are the same, then it won't run the function, but return the memo one:
import React, { Component, useMemo } from "react"; const expensiveOperation = (first, second) => { console.log("Whoah, that's expensive"); return first + second; }; const ExpensiveComponent = ({ first, second }) => { const optimized = useMemo(() => expensiveOperation(first, second), [second]); return <div>Sum: {optimized}</div>; };
'React.memo':
Class components can bail out from rendering when their input props are the same using PureComponent
or shouldComponentUpdate
. Since React 16.6 you can do the same with function components by wrapping them in React.memo.
'React.memo' is a High order component, which prevent component get rerender if props doesn't change.
import React, { Component, memo } from "react"; const Header = memo(({ text }) => { console.log("render"); return <div>{text}</div>; });
相关文章
- react开发教程(六)React与DOM
- React系列——websocket群聊系统在react的实现
- [React] Asynchronously Load webpack Bundles through Code-splitting and React Suspense
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React Native] Error Handling and ActivityIndicatorIOS
- [React] React Fundamentals: Owner Ownee Relationship
- React + Redux 入门(一):抛开 React 学 Redux
- React/React Native 的ES5 ES6写法对照表
- create-react-app 使用详解
- [React] State and Callbacks Don’t Mix Well in React
- [React Typescript 2022] Refactor a React Component using TypeScript
- [React Testing] Test a Custom React Hook with React’s Act Utility and a Test Component
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React] Override webpack config for create-react-app without ejection
- [GraphQL] Fetch Server Data and Client-side State in One Query using React Apollo + GraphQL
- [ReactVR] Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR
- [React] Create a queue of Ajax requests with redux-observable and group the results.
- [React Intl] Use a react-intl Higher Order Component to format messages
- [React Intl] Install and Configure the Entry Point of react-intl
- [React] Break up components into smaller pieces using Functional Components
- [React Native] Using the Image component and reusable styles
- [Webpack 2] Optimize React size and performance with Webpack production plugins
- [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer
- [Redux] Generating Containers with connect() from React Redux (FooterLink)
- []H5、React Native、Native应用对比分析
- js对象的引用传递在react中的使用注意事项
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- 003-and design-在create-react-app项目中使用antd