react 性能优化之：react.memo 有效阻止父组件更新带来的子组件也重新渲染的问题。

前言:

如果父组件的state发生变化，那么就需要重新render。其下的子组件即使没有用到此state，也会跟着重新render。性能受影响。
现有方法 react.memo 能实现，只有当子组件的 props里的数据发生变化后，才会重新render。

注： react.memo 此方法是浅比较。

父组件

父组件的input框输入的时候，会引起 inp_value 的变化。必然引起父组件的重新render。但是此时并没有引起子组件的render

案例中，我使用了usecallback，第二个参数传递空数组，生成了一个不会随着任何state变化而变化的函数 fa_callback ，此函数传递给子组件。
同理test_value一个当父组件更新时不会变化的普通state，传递给子组件。

export default function Reactuse() {
	const [inp_value, setinp_value] = useState('123');
    const [test_value, settest_value] = useState('456');

// 这个函数没有依赖项，不会被更新。即使此组件重新渲染
	const fa_callback = useCallback(() => {
		console.log('父组件的useCallback函数 ------------ ');
	}, []);
		useEffect(() => {
		console.log(inp_value, 'inp_value变了');
	}, [inp_value]);
	return (
		<div>
		   <input
				type="text"
				value={inp_value}
				onChange={(e) => {
					setinp_value(e.target.value);
				}}
			/>
			//一个不会发生变化的函数fa_callback       和      一个未变化的 数据test_value
			<Test3 fa_callback={fa_callback}  test_value ={test_value}/>
		</div>
	);
}

子组件

import React, { useState, useEffect } from 'react';
import eventEmmiter from '../config/tools';

function Test3(props) {
//下面这句执行就说明，子组件重新渲染了
	console.log('组件3  didupdata -----------');

	useEffect(() => {
		console.log('组件3  didmount -----------');
	}, []);
	return (
		<div style={{ backgroundColor: 'pink', width: '300px', height: '200px' }}>
			子组件3 ！！！
			<button
				onClick={() => {
					props.fa_callback();
				}}
			>
				点击执行父组件的方法
			</button>
		</div>
	);
}
//下面是重点！！！
export default React.memo(Test3);

如图我在输入框里输入文字，inp_value变化了，但是组件3并没有重新render

下图是没使用 memo的情况

React.memo的第二个参数！

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

总结

借用大佬的话

useCallback 是要配合子组件的 shouldComponentUpdate 或者 React.memo
一起来使用的，否则就是反向优化。

参考文献