让我们来看看React.memo

React.memo的使用背景

关于这个使用和使用背景，网上是有清晰的答案的。前提是通常情况下props发生改变时，react就会re-render。也就是说当你的子组件不想被父组件影响重新渲染时，你就需要给子组件一个react.memo包裹起来，使其当props发生改变时 才会re-render。但是什么时候才使用它呢，是不是所有子组件都要使用它，网上没有很清晰的答案。笔者以下将会做出自己的总结。

react.memo

能减少重绘次数，把组件传入的props做一个lodash缓存，每次会做一个浅比较，当props改变时，会与缓存的内容做一个浅比较(当然浅比较也是要消费性能的，memo还是要慎用)也就是说当传入的值时useState定义的内容（useState 是不会在每次重新渲染时都重新初始化的，只有在组件重载时才会初始化，所以引用地址一样），数值，字符串，布尔值时，能避免不必要的re-render。但是因为做了浅比较，这又产生了一个问题。react.memo不生效的情况。

注：react 内部流程，其实跟vue差不多只不过没有双向数据流绑定的这个过程：Data->component->VDOM->DOM
memo比较的其实时虚拟dom,这个过程相对于re-render非常快，所以不用担心效率问题，能很好的阻止页面无效重绘重排

react.memo不生效的情况

复杂数据类型当比较到存储地址不一致时，因为父组件的重新render导致了状态行为重新定义，就会判断不一致从而导致子组件re-render，这里我试验了一些例子：

    const [content, setContent] = useState(0);
    const [other, setOther] = useState(0);
    const [contentObj, setContentObj] = useState([{a: 1}, {a: 2}]);
    const handleClick = () => {
	    console.log('父组件点击');
	    setContent((content) => {
	        return content + 1;
	    })
	    setContentObj([{a: 2}, {a: 4}])
	}
	const otherHandle = () => {
	    setOther(other=>(other+1))
	}
	const obj = useMemo(() => {
        return {a: content}
    }, [content])
    const func = function () {
        console.log('点击点击')
    }
    
	<Button 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20