一文搞定react性能优化（代码方向）

今天写一篇关于react性能优化的文章啦。我们知道react有个痛点，就是会频繁触发不必要的render渲染，只要触发了setState改变state，就会可能导致多次不必要的render（console.log就可以发现）。那么他本身也提供了对应的api方法来解决这个问题。
废话不多说，开搞，我将组件分为两个情况：
一、class组件
类组件有两种方法来解决：一个是生命周期中的shouldComponentUpdate方法
shouldComponentUpdate(nextProps, nextState)
通过下一个props和下一个state，分别对比当前的props和state，判断值是否相同，返回一个布尔值来确定是否更新组件，true时候更新组件重新render，false不更新。
例如：

shouldComponentUpdate(nextProps, nextState) {
return this.state.currentNumber !== nextState.currentNumber 
}

另一个更快的方法是使用React.PureComponent组件（推荐），它和React.Component普通组件没啥区别，但能自动使用shouldComponentUpdate做对比。相当于简单写法，可以这么理解~~~
但是这两个种都只能做浅对比，不完美，就是如果state的一个值是object或者arrary时候对比就有困难啦。那就放着吧好好写你的业务代码去吧，类组件上已经够了
二、Hook组件
父组件用useEffect的第二个参数来控制组件是否需要更新。写法：

useEffect(()=>{
 // 只要参数变化我就变化做该做的事
  function(){
    console.log("敌动我不动，敌动我就跟着动")
 }
},[ 我是一个参数])

这里主要介绍子组件（因为通常父组件更新，它的子组件也会跟着更新，不讲武德）：
这个就强大啦，react的亲手制造升级的儿子，它有三个方法用来做优化分别是：

 memo  //和PureComponent一样，做简单数据类型比较，比如是字符串、数字、布尔值
useMemo  //都说了它是升级的儿子，所以可以用来比较复杂数据类型，Object、Arrary
useCallback  //升级版，那肯定连传递函数时候是否要更新组件可以控制啦

使用方法：
memo给子组件包裹

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

const MemoChildComp = memo(ChildComp);

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;

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性能造成不必要的多次渲染。

这里补充一个应用场景：
[hooks解决组件频繁刷新的问题]https://www.jianshu.com/p/822e061d960f

一文搞定react性能优化（代码方向）

推荐阅读更多精彩内容