最近在学习 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 才可以......
1
Select Language