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可以优化减少子组件的重复无用渲染