React中useCallback useMemo使用方法快速精通

	// 贴上代码片利于复制
	import { React, useState, useMemo, useCallback } from "react";
	export default function TestPage() {
	  const callBack = useCallback(() => {
	    console.log(1);
	  }, []);
	  const memo = useMemo(() => 123, []);
	  console.log("callback", callBack);
	  console.log("memo是", memo);
	  return (
	    <div>
	      <div>一个专门用于vue测试的页面</div>
	    </div>
	  );
}

	import { React, useState, useMemo, useCallback } from "react";
	export default function TestPage() {
	  const [data, updateData] = useState(1);
	  const getComplicatedValue = () => {
	    console.log("开始计算一个复杂的value值啦！");
	    let total = 0;
	    for (let i = 0; i < 100; i++) {
	      total += i;
	    }
	    return total;
	  };
	  const changeData = () => {
	    updateData((oldValue) => oldValue + 1);
	  };
	  return (
	    <div>
	      <div>一个专门用于vue测试的页面</div>
	      <div>这是一个复杂函数计算出来的值{getComplicatedValue()}</div>
	      <div>这是一个简简单单的data值{data}</div>
	      <button onClick={changeData}>点击我改变data值</button>
	    </div>
	  );
	}

	import { React, useState, useMemo, useCallback } from "react";
	export default function TestPage() {
	  const [data, updateData] = useState(1);
	  const getComplicatedValue = useMemo(() => {
	    console.log("开始计算一个复杂的value值啦！");
	    let total = 0;
	    for (let i = 0; i < 100; i++) {
	      total += i;
	    }
	    return total;
	  },[]);
	  const changeData = () => {
	    updateData((oldValue) => oldValue + 1);
	  };
	  return (
	    <div>
	      <div>一个专门用于vue测试的页面</div>
	      <div>这是一个复杂函数计算出来的值{getComplicatedValue}</div>
	      <div>这是一个简简单单的data值{data}</div>
	      <button onClick={changeData}>点击我改变data值</button>
	    </div>
	  );
	}

const memo = useMemo(() => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->},[依赖项数组])

	import { React, useState, useMemo, useCallback } from "react";
	import TestSonComp from "./testSonComp";
	export default function TestPage() {
	  const [data, updateData] = useState(1);
	  const getValue = () => {
	    console.log("我是父组件的一个函数");
	  };
	  const changeData = () => {
	    updateData((oldValue) => oldValue + 1);
	  };
	  return (
	    <div>
	      <div>一个专门用于vue测试的页面</div>
	      <div>这是一个简简单单的data值{data}</div>
	      <button onClick={changeData}>点击我改变data值</button>
	      <TestSonComp getValue={getValue} />
	    </div>
	  );
}

	import { React, memo } from "react";
	const TestSonComp = (props) => {
	  console.log("子组件render函数执行了");
	  return <div>一个子组件</div>;
	};
	export default TestSonComp;

	  const getValue = useCallback(() => {
	    console.log("我是父组件的一个函数");
	  }, []);

export default memo(TestSonComp);

const callback = useCallback(() => {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->},[依赖项数组])