让我们来看看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 

你可能感兴趣的:(React,react.js,javascript,前端)