useMemo \u4f60\u5c31\u628a\u5b83\u5f53\u6210：\u201c\u7f13\u5b58\u4e00\u4e2a\u8ba1\u7b97\u7ed3\u679c\/\u7f13\u5b58\u4e00\u4e2a\u5f15\u7528\u201d，\u53ea\u6709\u4f9d\u8d56\u53d8\u4e86\u624d\u91cd\u65b0\u7b97\u3002\u5b83\u89e3\u51b3\u4e24\u7c7b\u6700\u5e38\u89c1\u95ee\u9898：\u6027\u80fd \u548c \u5f15\u7528\u53d8\u5316\u5bfc\u81f4\u7684\u91cd\u590d\u89e6\u53d1\u3002<\/p>\n<\/p>\n
const value = useMemo(() => computeExpensive(x), [x])<\/p>\n
React \u5148\u7b97\u4e00\u6b21 computeExpensive(x)，\u628a\u7ed3\u679c \u8bb0\u4f4f<\/p>\n<\/li>\n
\u4e4b\u540e\u7ec4\u4ef6\u6bcf\u6b21\u91cd\u65b0\u6e32\u67d3：<\/p>\n<\/p>\n
\u5982\u679c x \u6ca1\u53d8：\u76f4\u63a5\u7528\u65e7\u7ed3\u679c，\u4e0d\u91cd\u65b0\u7b97<\/p>\n<\/li>\n
\u5982\u679c x \u53d8\u4e86：\u91cd\u65b0\u7b97\u4e00\u6b21\u5e76\u66f4\u65b0\u7f13\u5b58<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u4e00\u53e5\u8bdd：\u4f9d\u8d56\u4e0d\u53d8 \u2192 \u590d\u7528\u65e7\u7ed3\u679c；\u4f9d\u8d56\u53d8\u5316 \u2192 \u91cd\u65b0\u8ba1\u7b97\u3002<\/p>\n<\/p>\n
const doubled = useMemo(() => slowDouble(number), [number])<\/p>\n
\u6548\u679c：<\/p>\n<\/p>\n
\u6539 number \u2192 \u9700\u8981\u91cd\u65b0\u7b97（\u5408\u7406）<\/p>\n<\/li>\n
\u5207\u6362\u4e3b\u9898 dark \u2192 \u4e0d\u7528\u91cd\u65b0\u7b97（\u7701\u6389\u5361\u987f）<\/p>\n<\/li>\n<\/ul>\n
\u2705 \u4ec0\u4e48\u65f6\u5019\u503c\u5f97\u7528？<\/p>\n<\/p>\n
\u8ba1\u7b97\u771f\u7684\u6162（\u5927\u5faa\u73af\u3001\u590d\u6742\u8fc7\u6ee4\u6392\u5e8f\u3001\u56fe\u8868\u6570\u636e\u5904\u7406\u3001\u52a0\u5bc6\/\u54c8\u5e0c\u3001\u590d\u6742\u683c\u5f0f\u5316）<\/p>\n<\/li>\n
\u6216\u8005\u8ba1\u7b97\u91cf\u968f\u6570\u636e\u89c4\u6a21\u53d8\u5927\u5f88\u660e\u663e（\u6bd4\u5982 1w \u6761\u5217\u8868\u7684 filter + sort）<\/p>\n<\/li>\n<\/ul>\n
JS \u91cc\u5bf9\u8c61\/\u6570\u7ec4\u6bd4\u8f83\u7684\u662f \u5f15\u7528\u5730\u5740，\u4e0d\u662f\u5185\u5bb9\u3002<\/p>\n<\/p>\n
const themeStyle = { color: dark ? "white" : "black" }<\/p>\n
useEffect(() => {
\n console.log("theme changed")
\n}, [themeStyle])<\/p>\n
\u6bcf\u6b21\u6e32\u67d3\u90fd\u4f1a\u521b\u5efa\u4e00\u4e2a\u65b0\u5bf9\u8c61 {…}，\u5f15\u7528\u6c38\u8fdc\u4e0d\u4e00\u6837 \u2192 effect \u6bcf\u6b21\u90fd\u89e6\u53d1\u3002<\/p>\n<\/p>\n
const themeStyle = useMemo(
\n () => ({ color: dark ? "white" : "black" }),
\n [dark]
\n)<\/p>\n
\u8fd9\u6837\u53ea\u6709 dark \u53d8，themeStyle \u7684\u5f15\u7528\u624d\u53d8，effect \u624d\u4f1a\u89e6\u53d1\u3002<\/p>\n<\/p>\n
\u4f60\u6ca1\u7406\u89e3\u7684\u70b9\u5176\u5b9e\u5c31\u4e00\u4e2a：useEffect \u7684\u4f9d\u8d56\u6bd4\u8f83\u65b9\u5f0f\u3002<\/p>\n<\/p>\n
React \u5224\u65ad\u4f9d\u8d56\u53d8\u6ca1\u53d8，\u4e0d\u662f\u770b\u201c\u5185\u5bb9\u4e00\u6837\u4e0d\u4e00\u6837\u201d，\u800c\u662f\u770b\u662f\u4e0d\u662f\u540c\u4e00\u4e2a\u5f15\u7528（\u5185\u5b58\u5730\u5740）\u3002<\/p>\n<\/p>\n
const config = { chainId, address }
\nuseEffect(() => {
\n console.log("run")
\n}, [config])<\/p>\n
\u5173\u952e：{ chainId, address } \u8fd9\u4e00\u884c \u6bcf\u6b21\u6e32\u67d3\u90fd\u4f1a\u521b\u5efa\u4e00\u4e2a\u5168\u65b0\u7684\u5bf9\u8c61\u3002<\/p>\n<\/p>\n
\u5373\u4f7f chainId \u548c address \u90fd\u6ca1\u53d8，config \u4e5f\u662f\u201c\u65b0\u5bf9\u8c61\u201d\u3002<\/p>\n<\/p>\n
\u4f60\u53ef\u4ee5\u60f3\u8c61\u6210\u8fd9\u6837：<\/p>\n<\/p>\n
\u7b2c1\u6b21\u6e32\u67d3：config \u6307\u5411 0xAAA<\/p>\n<\/li>\n
\u7b2c2\u6b21\u6e32\u67d3：\u53c8 new \u4e86\u4e00\u4e2a\u5bf9\u8c61，config \u6307\u5411 0xBBB<\/p>\n<\/li>\n
\u7b2c3\u6b21\u6e32\u67d3：\u53c8 new \u4e86\u4e00\u4e2a\u5bf9\u8c61，config \u6307\u5411 0xCCC<\/p>\n<\/li>\n<\/ul>\n
React \u770b\u4f9d\u8d56 [config]：<\/p>\n
\u201c\u54a6，\u5f15\u7528\u4ece 0xAAA \u53d8\u6210 0xBBB \u4e86 \u2192 \u4f9d\u8d56\u53d8\u4e86 \u2192 effect \u6267\u884c\u3002\u201d<\/p>\n<\/p>\n
\u6240\u4ee5\u4f60\u4f1a\u770b\u5230：\u53ea\u8981\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\u4e00\u6b21（\u54ea\u6015\u56e0\u4e3a theme\u3001\u8f93\u5165\u6846\u3001\u522b\u7684 state），effect \u5c31\u4f1a\u8dd1\u4e00\u6b21\u3002<\/p>\n<\/p>\n
const config = useMemo(() => ({ chainId, address }), [chainId, address])<\/p>\n
useEffect(() => {
\n console.log("run only when chainId\/address changes")
\n}, [config])<\/p>\n
useMemo \u505a\u7684\u4e8b：\u7f13\u5b58\u4e0a\u4e00\u6b21\u521b\u5efa\u7684\u5bf9\u8c61\u3002<\/p>\n<\/p>\n
\u5982\u679c chainId\/address \u6ca1\u53d8：useMemo \u76f4\u63a5\u628a\u4e0a\u4e00\u6b21\u90a3\u4e2a\u5bf9\u8c61\u8fd4\u56de\u7ed9\u4f60（\u5f15\u7528\u4e0d\u53d8）<\/p>\n<\/li>\n
\u5982\u679c chainId\/address \u53d8\u4e86：useMemo \u624d\u4f1a\u521b\u5efa\u65b0\u5bf9\u8c61（\u5f15\u7528\u6539\u53d8）<\/p>\n<\/li>\n<\/ul>\n
\u6240\u4ee5\u53d8\u6210：<\/p>\n<\/p>\n
\u7b2c1\u6b21\u6e32\u67d3：config \u6307\u5411 0xAAA<\/p>\n<\/li>\n
\u7b2c2\u6b21\u6e32\u67d3（theme \u53d8\u4e86，\u4f46 chainId\/address \u6ca1\u53d8）：useMemo \u8fd4\u56de\u65e7\u7684 0xAAA<\/p>\n<\/li>\n
\u7b2c3\u6b21\u6e32\u67d3（\u522b\u7684 state \u53d8\u4e86）：\u8fd8\u662f 0xAAA<\/p>\n<\/li>\n
\u76f4\u5230\u67d0\u6b21 chainId\/address \u53d8\u4e86：\u624d\u751f\u6210 0xBBB<\/p>\n<\/li>\n<\/ul>\n
React \u770b\u4f9d\u8d56 [config]：<\/p>\n
\u201c\u5f15\u7528\u6ca1\u53d8 \u2192 \u4f9d\u8d56\u6ca1\u53d8 \u2192 effect \u4e0d\u6267\u884c\u3002\u201d<\/p>\n<\/p>\n
\u6ca1\u6709 useMemo：\u6bcf\u6b21\u6e32\u67d3\u90fd\u201cnew \u4e00\u4e2a config\u201d \u2192 useEffect \u89c9\u5f97\u4f9d\u8d56\u53d8\u4e86 \u2192 \u6bcf\u6b21\u90fd\u8dd1<\/p>\n<\/li>\n
\u6709 useMemo：\u53ea\u6709\u5f53 chainId\/address \u53d8\u65f6\u624d\u201cnew config\u201d \u2192 useEffect \u53ea\u5728\u771f\u6b63\u53d8\u5316\u65f6\u8dd1<\/p>\n<\/li>\n<\/ul>\n
\u5bf9，\u8fd9\u4e2a\u95ee\u9898\u95ee\u5f97\u5f88\u5bf9\u3002<\/p>\n<\/p>\n
\u5f88\u591a\u65f6\u5019\u6700\u7b80\u5355\u5c31\u662f\u8fd9\u6837：<\/p>\n
useEffect(() => {
\n console.log("run only when chainId\/address changes")
\n}, [chainId, address])<\/p>\n
\u90a3\u4e3a\u4ec0\u4e48\u8fd8\u8981 config + useMemo？<\/p>\n
\u5e38\u89c1\u539f\u56e0：<\/p>\n<\/p>\n
\u4f60\u4e0b\u6e38\u9700\u8981\u4e00\u4e2a config \u5bf9\u8c61\u4f20\u7ed9\u522b\u7684 hook \/ \u5b50\u7ec4\u4ef6（\u6bd4\u5982 wagmi\/viem）<\/p>\n<\/li>\n
\u4f9d\u8d56\u9879\u5f88\u591a，\u4f60\u60f3\u7edf\u4e00\u6253\u5305\u6210\u4e00\u4e2a\u5bf9\u8c61（\u65b9\u4fbf\u7ef4\u62a4）<\/p>\n<\/li>\n
\u5b50\u7ec4\u4ef6\u662f React.memo，\u4f60\u9700\u8981\u4fdd\u8bc1 props \u5f15\u7528\u7a33\u5b9a<\/p>\n<\/li>\n
\u6ca1\u6709 useMemo：\u4f60\u6bcf\u6b21\u6e32\u67d3\u90fd\u201c\u91cd\u65b0\u6253\u5370\u4e00\u5f20\u8eab\u4efd\u8bc1\u201d，\u8eab\u4efd\u8bc1\u53f7\u7801\u5f53\u7136\u53d8 \u2192 \u7cfb\u7edf\u8ba4\u4e3a\u6362\u4eba\u4e86 \u2192 effect \u89e6\u53d1<\/p>\n<\/li>\n
\u6709 useMemo：\u53ea\u8981\u4fe1\u606f\u6ca1\u53d8，\u4f60\u5c31\u4e00\u76f4\u7528\u540c\u4e00\u5f20\u8eab\u4efd\u8bc1 \u2192 \u7cfb\u7edf\u8ba4\u4e3a\u8fd8\u662f\u540c\u4e00\u4e2a\u4eba \u2192 effect \u4e0d\u89e6\u53d1<\/p>\n<\/li>\n<\/ul>\n<\/p>\n
useMemo：\u7f13\u5b58\u201c\u503c\u201d<\/p>\n<\/li>\n
useCallback：\u7f13\u5b58\u201c\u51fd\u6570\u201d<\/p>\n
\u5176\u5b9e\u4f60\u53ef\u4ee5\u7406\u89e3\u4e3a：<\/p>\n<\/li>\n<\/ul>\n
useCallback(fn, deps) === useMemo(() => fn, deps)<\/p>\n
\u4e00\u4e2a\u7f13\u5b58\u7ed3\u679c，\u4e00\u4e2a\u7f13\u5b58\u51fd\u6570\u5f15\u7528\u3002<\/p>\n<\/p>\n
\u4e0b\u9762\u4ecb\u7ecd\u00a06 \u4e2a\u771f\u5b9e\u9879\u76ee\u91cc\u6700\u5e38\u89c1\u3001\u800c\u4e14\u201c\u7528\u4e0d\u7528 useMemo \u5dee\u522b\u975e\u5e38\u660e\u663e\u201d\u7684\u4f8b\u5b50（\u6bcf\u4e2a\u90fd\u8bf4\u660e：\u4e0d\u7528\u4f1a\u600e\u6837，\u7528\u4e86\u4f1a\u600e\u6837）\u3002<\/p>\n<\/p>\n
\u4e0d\u7528 useMemo（\u4f1a\u91cd\u590d\u8bf7\u6c42）<\/p>\n
const params = { address, chainId }<\/p>\n
useEffect(() => {
\n fetchBalance(params) \/\/ \u53ef\u80fd\u6bcf\u6b21\u6e32\u67d3\u90fd\u8bf7\u6c42
\n}, [params])<\/p>\n
\u53ea\u8981\u7ec4\u4ef6\u56e0\u4e3a\u522b\u7684 state \u6539\u4e86（\u4e3b\u9898\u3001\u8f93\u5165\u6846\u3001\u5f39\u7a97），params \u5c31\u662f\u65b0\u5bf9\u8c61 \u2192 effect \u53c8\u8dd1 \u2192 \u53c8\u8bf7\u6c42\u3002<\/p>\n<\/p>\n
\u7528 useMemo（\u53ea\u5728 address\/chainId \u53d8\u65f6\u8bf7\u6c42）<\/p>\n
const params = useMemo(() => ({ address, chainId }), [address, chainId])<\/p>\n
useEffect(() => {
\n fetchBalance(params)
\n}, [params])<\/p>\n
\u5f88\u591a Web3 hook \u5185\u90e8\u4f1a\u770b config \u662f\u5426\u53d8\u5316\u6765\u91cd\u5efa watcher\u3002<\/p>\n<\/p>\n
\u4e0d\u7528 useMemo（\u53ef\u80fd\u53cd\u590d\u91cd\u5efa watcher \/ \u91cd\u8dd1）<\/p>\n
const config = { address, abi, functionName: "balanceOf", args: [user] }
\nuseReadContract(config)<\/p>\n
\u7528 useMemo（config \u7a33\u5b9a，\u53ea\u6709\u5173\u952e\u53c2\u6570\u53d8\u624d\u91cd\u5efa）<\/p>\n
const config = useMemo(() => ({
\n address,
\n abi,
\n functionName: "balanceOf",
\n args: [user],
\n}), [address, abi, user])<\/p>\n
useReadContract(config)<\/p>\n
\u4e0d\u7528 useMemo（\u4efb\u4f55\u72b6\u6001\u53d8\u5316\u90fd\u91cd\u65b0 filter\/sort）<\/p>\n
const visibleTxs = txs
\n .filter(tx => tx.chainId === chainId)
\n .sort((a,b) => b.time – a.time)<\/p>\n
\u4f60\u4e00\u5207\u6362 theme\u3001\u6253\u5f00\u5f39\u7a97\u3001\u8f93\u5165\u641c\u7d22\u6846，\u90fd\u4f1a\u91cd\u65b0\u8dd1\u8fd9\u5957\u903b\u8f91 \u2192 \u5361\u3002<\/p>\n<\/p>\n
\u7528 useMemo（\u53ea\u5728 txs \u6216 chainId \u53d8\u65f6\u91cd\u7b97）<\/p>\n
const visibleTxs = useMemo(() => {
\n return txs
\n .filter(tx => tx.chainId === chainId)
\n .sort((a,b) => b.time – a.time)
\n}, [txs, chainId])<\/p>\n
\u4e0d\u7528 useMemo（\u5b50\u7ec4\u4ef6\u6bcf\u6b21\u90fd\u6e32\u67d3）<\/p>\n
const columns = [
\n { key: "hash", title: "Hash" },
\n { key: "status", title: "Status" },
\n]<\/p>\n
return <Table columns={columns} \/> \/\/ Table \u5373\u4f7f memo，\u4e5f\u4f1a\u56e0\u4e3a columns \u5f15\u7528\u53d8\u800c\u91cd\u6e32<\/p>\n
\u7528 useMemo（columns \u5f15\u7528\u7a33\u5b9a，Table \u4e0d\u4f1a\u4e71\u6e32）<\/p>\n
const columns = useMemo(() => ([
\n { key: "hash", title: "Hash" },
\n { key: "status", title: "Status" },
\n]), [])<\/p>\n
return <Table columns={columns} \/><\/p>\n
\u6bd4\u5982\u521d\u59cb\u5316\u4e00\u4e2a chart\/\u64ad\u653e\u5668\/websocket SDK\u3002<\/p>\n<\/p>\n
\u4e0d\u7528 useMemo（effect \u6bcf\u6b21 render \u90fd cleanup + init）<\/p>\n
const options = { theme: dark ? "dark" : "light", locale }<\/p>\n
useEffect(() => {
\n const chart = createChart(options)
\n return () => chart.destroy()
\n}, [options])<\/p>\n
\u7528 useMemo（\u53ea\u5728 theme\/locale \u771f\u53d8\u65f6\u91cd\u5efa）<\/p>\n
const options = useMemo(() => ({
\n theme: dark ? "dark" : "light",
\n locale,
\n}), [dark, locale])<\/p>\n
useEffect(() => {
\n const chart = createChart(options)
\n return () => chart.destroy()
\n}, [options])<\/p>\n
\u4e0d\u7528 useMemo（args \u6bcf\u6b21 render \u90fd\u662f\u65b0\u6570\u7ec4）<\/p>\n
const args = [spender, amount]<\/p>\n
useEffect(() => {
\n prepareTx(args)
\n}, [args])<\/p>\n
\u7528 useMemo（args \u7a33\u5b9a）<\/p>\n
const args = useMemo(() => [spender, amount], [spender, amount])<\/p>\n
useEffect(() => {
\n prepareTx(args)
\n}, [args])<\/p>\n<\/p>\n
\u2705 \u7528\u5728\u8fd9\u4e24\u7c7b\u4e0a\u6700\u503c：<\/p>\n<\/p>\n
\u4f60\u628a\u5bf9\u8c61\/\u6570\u7ec4\/\u51fd\u6570\u653e\u8fdb\u4f9d\u8d56\u6570\u7ec4（useEffect\/useMemo\/useCallback deps）<\/p>\n<\/li>\n
\u4f60\u505a\u4e86\u91cd\u8ba1\u7b97（filter\/sort\/map \u5927\u6570\u636e\/\u590d\u6742\u8f6c\u6362）<\/p>\n<\/li>\n
\u274c \u522b\u7528\u5728：<\/p>\n<\/p>\n
\u7b80\u5355\u8ba1\u7b97（a+b\u3001\u62fc\u5b57\u7b26\u4e32）<\/p>\n<\/li>\n
\u6ca1\u6709\u4f9d\u8d56\u95ee\u9898\u4e5f\u6ca1\u6709\u5361\u987f\u95ee\u9898\u7684\u5730\u65b9<\/p>\n<\/li>\n
useMemo \u4e0d\u662f\u201c\u8d8a\u591a\u8d8a\u597d\u201d，\u5b83\u672c\u8eab\u4e5f\u6709\u5f00\u9500（\u8981\u7ef4\u62a4\u7f13\u5b58\u3001\u6bd4\u8f83 deps）\u3002<\/p>\n
\u522b\u7528\u5728：<\/p>\n<\/p>\n
\u8ba1\u7b97\u5f88\u8f7b（a+b\u3001\u7b80\u5355 map）<\/p>\n<\/li>\n
\u4f60\u6839\u672c\u6ca1\u9047\u5230\u6027\u80fd\u95ee\u9898\/\u91cd\u590d\u89e6\u53d1\u95ee\u9898<\/p>\n<\/li>\n
deps \u5199\u4e0d\u5bf9\u53cd\u800c\u66f4\u96be debug<\/p>\n<\/li>\n<\/ul>\n<\/p>\n
useMemo = \u7f13\u5b58\u4e00\u4e2a\u503c（\u5c24\u5176\u662f\u6162\u8ba1\u7b97\u7ed3\u679c \u6216 \u9700\u8981\u7a33\u5b9a\u5f15\u7528\u7684\u5bf9\u8c61\/\u6570\u7ec4），\u4f9d\u8d56\u4e0d\u53d8\u5c31\u590d\u7528\u3002<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
useMemo \u4f60\u5c31\u628a\u5b83\u5f53\u6210：\u201c\u7f13\u5b58\u4e00\u4e2a\u8ba1\u7b97\u7ed3\u679c\/\u7f13\u5b58\u4e00\u4e2a\u5f15\u7528\u201d，\u53ea\u6709\u4f9d\u8d56\u53d8\u4e86\u624d\u91cd\u65b0\u7b97\u3002\u5b83\u89e3\u51b3\u4e24\u7c7b\u6700\u5e38\u89c1\u95ee\u9898：\u6027\u80fd \u548c \u5f15\u7528\u53d8\u5316\u5bfc\u81f4\u7684\u91cd\u590d\u89e6\u53d1\u30021) useMemo \u5230\u5e95\u505a\u4e86\u4ec0\u4e48？const value useMemo(() > computeExpensive(x), [x])React \u5148\u7b97\u4e00\u6b21 computeExpensive(x)，\u628a\u7ed3\u679c \u8bb0\u4f4f\u4e4b\u540e\u7ec4\u4ef6\u6bcf\u6b21\u91cd\u65b0\u6e32\u67d3：\u5982\u679c x \u6ca1\u53d8&#<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[187,724,87,885,190],"topic":[],"class_list":["post-68864","post","type-post","status-publish","format-standard","hentry","category-server","tag-javascript","tag-reactjs","tag-87","tag-885","tag-190"],"yoast_head":"\n