The last post said I was going to write an article on performance tuning, and here it is

The Hooks component replaces the class component

ShouldComponentUpdate and PureComponent should not come to mind. In my opinion, using the class component to write components has become obsolete. In my opinion, using the class component to write components has become obsolete.

Avoid duplicate rendering

  • React. Memo: Allows React to compare the props before updating the component. If the props remain unchanged, the component is not updated.
const Demo: React.FC<IDemoProps> = React.memo(
  (props: IDemoProps) = > {
      return  <div />});export default Demo;
Copy the code
  • UseMemo: Taking advantage of useMemo’s ability to cache computed results, if useMemo returns a component’s virtual DOM, the Render phase of the component will be skipped while useMemo dependencies remain unchanged. This method is similar to react. memo, but has the following advantages over React.memo:
  • It is more convenient. The react. Memo needs to wrap the component once to generate a new component. UseMemo, on the other hand, only needs to be used where performance bottlenecks exist, without modifying components
  • More flexible. UseMemo does not consider all Props of the component, but only the values used in the current scenario. UseDeepCompareMemo [24] can also be used for deep comparison of the values used
  • If the parent component passes methods to the child component, you need to work with useCallback or usePersistFn1, because the React.Memo optimization will fail if the derived state or function passed to the child component is a new reference every time. So you need to use useMemo and useCallback to generate stable values

export default function App() {
  const getFc = usePersistFn((value) = >{});const fc = (value) = >{};const Child= useMemo(() = > {
    return <Child name="Using useMemo as children" fc={getFc} />
  }, [getFc,name])

  return (
    <div className="App">
      <Child name="Directly as children" fc={fc} />
      {Child}
    </div>)}Copy the code

Publisher subscribers skip the intermediate component Render process

The publisk-subscribe mode is adopted to avoid the deep nesting of multi-level props delivery. UseContext and useReducer are used at the page level. Redux, MOBx or scaffolding have their own global state management. If you are just reading props, then just use creatContext in conjunction with useContext.

Constants refer to global definitions to prevent re-creation with component rendering in a similar way

The utils directory contains enum and constant values in enum. Ts.

Debounce and Throttle optimize callbacks that are frequently triggered

Ahooks are recommended. There are a number of hooks that work well with Rax

May you also be able to be like Chen 11, not forget the original heart, heart to the sun

  1. From ahooks: ↩