每次点击=》状态发生改变会执行Example()函数,
useEffect会执行吗?只有数组里传了count才会执行,没有的话不会执行(但页面中的state还是响应式的,只是不会执行useEffect里面的内容)。
useEffect里所执行的大多都是副作用方法,操作dom,监听事件,请求数据等
import React, {useState, useEffect} from 'react';function Example() {const [count, setCount] = useState(0);console.log('ooo')// 使用 effect 获取数据或进行副作用操作useEffect(() => {console.log('Data fetching or side effect');document.title = `You clicked ${count} times`;}, [count]); // 当 count 变化时重新执行return (<div><p>You clicked {count}times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
useMemo的侧重点在缓存昂贵的计算,这点很像computed用法,如果不指定依赖,就不会执行,此时定义的sum也变成了响应式的了
import React, {useMemo, useState, useEffect} from "react";
function Example() {const [a, setA] = useState(0);const [b, setB] = useState(0);const [c, setC] = useState(0);const sum = useMemo(() => {for (let i = 0; i < 1000000; i++) {Math.sqrt(i);}console.log("Sum computed!");return a + b;}, [a, b]);console.log(sum);return (<div><div><button onClick={() => setA(a + 1)}>Increment A</button><button onClick={() => setB(b + 1)}>Increment B</button><button onClick={() => {setC(c + 1)}}>C Increment</button></div><div>Sum: {sum}</div></div>);
}
export default Example;