React Memo and useMemo and useCallback

React.memo

• Concept of analytical
  • Caches render results of components in the same case
  • When a component comes inpropsIf there is a previous entry after the shallow comparison with the same parameter, the latest result is reused and cached
  • Data comparison, shallow comparison only. If you want to control the comparison process, you need to write your own custom comparison function. Set the pass parameter to the second parameter

  –Please be careful not toshouldComponetUpdateReturn value mixing

Class components can control how they render by comparing data, right?

• React.PureComponent
• shouldComponentUpdate

The hooks useMemo

• Concept of analytical
  • Cached render results for function components
  • You can granulate the current component node
  • Use the second argument to determine whether to update the useMemo callback function
  • The callback function is a required package if created usinguseState, will cache the state value, will not get the real-time update value

The hooks useCallback

• Concept of analytical
  • Returns a function to cache
  • Pass the dependencies that need to be updated. Normally, the data used inside the callback function needs to be added to the dependency
  • To avoid parent/child issues, the child generates new props functions to refresh the child component
    • When a parent component passes a function to a child component, the stateless component regenerates a new props function each time, causing the child component to refresh
  • Generally used in conjunction with the useMemo