ReactHooks——useEffect的使用细节

123 阅读1分钟

当我们在写 useEffect 时,我们在做什么?

useEffect这一hook方法主要用来管理副作用,比如网络请求,操作DOM,计时器等等。

useEffect 的无限循环

具体看代码 codesandbox.io/s/infinite-… 运行后发现count不受控的自增。
这问题在于useEffect的使用方式:

useEffect(() => setCount(count + 1))

这会造成组件重新渲染,重新渲染后又使得 useEffect 执行回调函数。

如何解决?

正确使用 useEffect 的第二个参数—— dependencies

const [value, setValue] = useState('')
const [count, setCount] = useState(0)
useEffect(() => setCount(count + 1), [value])

学会使用useRef

const [value, setValue] = useState("");
const countRef = useRef(0);

useEffect(() => countRef.current++);
const onChange = ({ target }) => setValue(target.value);

思路是更新Ref不会触发组件的重新渲染