最近在学习 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)。
两个问题:
注:这种情况,我能想到的实际场景,就是打开网站,界面先画出来,但是图片还在后台加载。等图片加载完成了,继续画。
还是说,react hook 设计上,保证了在 useEffect 内部,setXXX 即使是 dependency,也不会重复触发?
谢谢!
p.s. 有没有 react 可以 online 编辑 /实践的网站? codepen.io 需要 VIP 才可以......
1
star7th 2020-11-05 15:09:11 +08:00
提供一下原教程链接看看。谁知道这是源码还是经过你加工出来的问题代码
|
2
syfless 2020-11-05 15:12:10 +08:00
这段 useEffect 里的代码意义不明,本来就是 name 变化之后执行 useEffect 里的副作用,但 useEffect 又放了无条件改变 name 的代码,这就死循环了,不过好像 useEffect 里面会自动检测会不会死循环,顶多是执行几十次就停了
codesandbox.io 可以 |
3
shenyu1996 2020-11-05 15:12:29 +08:00
[name] => []
|
4
CptDoraemon 2020-11-05 15:13:53 +08:00 via Android
setState's identity is guaranteed to be stable over components's life cycle. 文档里说的
|
5
easonHHH 2020-11-05 15:21:52 +08:00
当 name 发生变化后,然后就从 api 获取一个 new name 然后赋值到 name ?
|
6
anjianshi 2020-11-05 15:31:01 +08:00
按上面的代码,useEffect 确实没啥用,而且会死循环
|
7
u6pM63mMZ34z32cE 2020-11-05 15:39:31 +08:00
<button onclick={clickme()} >click me</button>
这行代码没看懂 clickme()不是 undefined 吗 |
8
dartabe 2020-11-05 15:48:33 +08:00
建议多看看好点的教程 有点不知所云
写 Hooks 的时候把 eslint 用起来 |
9
zhuweiyou 2020-11-05 15:49:57 +08:00
1. 你这段 useEffect 多余, 可以删了.
2. onclick={clickme()} 应该改成 onclick={clickme} |
10
xingguang 2020-11-05 16:11:41 +08:00
感觉不太对,我觉着这里不应该依赖 name,这里应该是要给个默认值吧。把依赖去掉比较合理
|
11
alexkuang 2020-11-05 16:45:03 +08:00
codepen 免费版可以用 react 的,通过 cdn 导入
|
12
onfuns 2020-11-05 16:51:00 +08:00
你这个无限循环了,如果只 mount 后进入执行赋值 name,那么依赖设置空数组即可。如果对 name 监听,可以再写一个 useEffect 对 name 监听,要么定义一个变量控制
|
13
KuroNekoFan 2020-11-05 18:02:17 +08:00
可以用 codesandbox...
|
14
auroraccc 2020-11-05 18:15:38 +08:00
你那个 useEffect 内部都没有使用 name 为什么要依赖 name,依赖应该是[]
|
15
TabGre 2020-11-05 20:09:32 +08:00 1
|
16
azcvcza 2020-11-06 09:10:24 +08:00
你这和原先 componentWillRecieveProps 里把 拿来的 props 赋值给 state 引起无限循环差不多
|
17
jingcoco 2020-11-06 13:57:06 +08:00
3 楼靠谱.....useEffect 的第二个参数
|