react hook 的一个问题, useEffect 内部,为什么 可以调用 setxxx 方法?
資深大佬 : yazoox 3
最近在学习 react hook 经常看到这样的写法:
import { getname } from "..."; my_component = (props) => { const [name, setName] = useState("yazoox"); clickme = () => { const newname = getname(); setName(newname); } useEffect(() => { // call API getname,每次调用,都会随机拿一个名字 const newname = getname(); setName(newname); }, [name]); return ( <div>{name}</div> <div> <button onclick={clickme()} >click me</button> </div> ); }
useEffect 是在 component mount 后调用的(相当于 componentDidMount/DidUpdate)。
两个问题:
- mount 完成后,useEffect 触发了,调用 getname 得到了新的名字,再用 setName 更新这个 state,那就是说 UI 又要 update 。这样的话,不会再触发 useEffect 么?再 setName 一次,dependency – name 又变化了,这个 effect 就会再触发啊。……
注:这种情况,我能想到的实际场景,就是打开网站,界面先画出来,但是图片还在后台加载。等图片加载完成了,继续画。
- 另外一个例子,我点击 button,刷新了一次 name,userEffect 会不会触发啊?
还是说,react hook 设计上,保证了在 useEffect 内部,setXXX 即使是 dependency,也不会重复触发?
谢谢!
p.s. 有没有 react 可以 online 编辑 /实践的网站? codepen.io 需要 VIP 才可以……
大佬有話說 (17)