当我们在写 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不会触发组件的重新渲染