react hook性能優化使用memo、useCallback、useMemo

hooks在寫hook組件的時候才有

 父組件用useEffect的第二個參數來控制組件是否需要更新。寫法：

useEffect(()=>{
 // 只要參數變化我就變化做該做的事
  function(){
    console.log("敵動我不動，敵動我就跟着動")
 }
},[ 我是一個參數])

這里主要介紹子組件（因為通常父組件更新，它的子組件也會跟着更新，不講武德）：
這個就強大啦，react的親手制造升級的兒子，它有三個方法用來做優化分別是：

 

 memo  //和PureComponent一樣，做簡單數據類型比較，比如是字符串、數字、布爾值 useMemo //都說了它是升級的兒子，所以可以用來比較復雜數據類型，Object、Arrary useCallback //升級版，那肯定連傳遞函數時候是否要更新組件可以控制啦

 使用方法：
1、memo給子組件包裹

// 子組件
const ChildComp = () => {
  console.log('ChildComp...');
  return (<div>ChildComp...</div>);
};

const MemoChildComp = memo(ChildComp);

2、useMemo給復雜數據類型使用

import React, { memo, useState } from 'react';

// 子組件
const ChildComp = (info:{info:{name: string, age: number}}) => {
  console.log('ChildComp...');
  return (<div>ChildComp...</div>);
};

const MemoChildComp = memo(ChildComp);

// 父組件
const Parent = () => {
  const [count, setCount] = useState(0);
  const [info] = useState({ name:'名字', age:35 });

  return (
    <div className="App">
      <div>hello world {count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>點擊增加</div>
      <MemoChildComp info={useMemo(()=> info,[info])}/>
    </div>
  );
};

export default Parent;

3、useCallback給傳遞函數時候使用

import React, { memo, useCallback, useMemo, useState } from 'react';

// 子組件
const ChildComp = (props) => {
  console.log('ChildComp...');
  return (<div>ChildComp...</div>);
};

const MemoChildComp = memo(ChildComp);

// 父組件
const Parent = () => {
  const [count, setCount] = useState(0);
  const [name] = useState('jack');
  const [age] = useState(11);
  const info = useMemo(() => ({ name, age }), [name, age]);
  const changeName = useCallback(() => {
    console.log('輸出名稱...');
  }, []);

  return (
    <div className="App">
      <div>hello world {count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>點擊增加</div>
      <MemoChildComp info={info} changeName={changeName}/>
    </div>
  );
};

export default Parent;

如上，我們就可以非常簡潔明了地控制組件的渲染次數，保證了react性能造成不必要的多次渲染。

 

注意：react官方提出未來可能自動創建useCallback、useMemo的第二個參數數組成為可能。

 

 

總結：1、在使用到值的時候，直接使用memo包裹子組件即可，最簡單。

2、當子組件用到父組件的函數時候（有傳函數）使用useCallback包裹函數即可，可以理解為每次父組件上面的參數發生變化時候，傳入子組件的函數也會重新生成，造成子組件重新渲染。這時候需要優化使用useCallback，它的依賴的第二個參數變化時候才會重新生成這個函數。然后使子組件重新渲染。

 

3、當父組件傳值給子組件時候，例如對象：{name:我是名字}加上useMemo可以優化減少子組件的重復無用渲染