useCallback、useMemo、memo用法和区别

memo

当父组件发生改变时，子组件不需要改变（没有依赖父组件的函数和值）时想要父组件不刷新子组件不刷新

const Parent = () => {
		const [num,setBum] = useState(0)
		return (
			<View>
				<Button onClick={()=> setNum(num+1)} >
				<Child />
			</View>
		)
	}
	
	const Child = memo(() => {
		console.log('child load')
		return (
			<View>child text</View>
		)
	})

---

useCallback

缓存函数，在特定变量改变时才执行函数，如果父组件传了一个函数给子组件，而不希望子组件更新可以用useCallback

const clickBtn = useCallback(() => {
			setNum(num+1)
		},[依赖]) 

---

const Parent = () => {
		const [num,setBum] = useState(0)
		
		const clickBtn = useCallback(() => {
			setNum(num+1)
		},[]) //[]可选填依赖项，不填里面的num是不会更新的，永远都是0
		
		return (
			<View>
				<Button onClick={clickBtn} >
				<Child call={clickBtn} />
			</View>
		)
	}
	
	const Child = memo((call) => {
		console.log('child load')
		return (
			<View onClick={call}>child text</View>
		)
	})

---

useMemo

useMemo传入两个参数，回调函数（需要有返回值） 和依赖参数
类似计算属性，可以对返回值进行操作，只有依赖改变时才会执行，如果当子组件用了memo时父组件向子组件传值但是又不希望子组件改变可以配合useMemo使用

export const Child = memo(
  (props: { userInfo: { name: string; age: number } }) => {
    const { userInfo } = props;
    console.log("渲染了", userInfo);
    return (
      <>
        <div>名字： {userInfo.name}</div>
        <div>年龄：{userInfo.age}</div>
      </>
    );
  }
);

export const Parent = () => {
  const [count, setCount] = useState(0);
  // const [userInfo, setUserInfo] = useState({ name: "小明", age: 18 });
  const increment = () => setCount(count + 1);
  const userInfo = useMemo(() => ({ name: "小明", age: 18 }), []);

  return (
    <div>
      <button onClick={increment}>点击次数：{count}</button>
      <Child userInfo={userInfo} />
    </div>
  );
};