未分類
3 11 月 2020

react hook 的一个问题， useEffect 内部，为什么 可以调用 setxxx 方法？

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)。

两个问题：

  1. mount 完成后，useEffect 触发了，调用 getname 得到了新的名字，再用 setName 更新这个 state，那就是说 UI 又要 update 。这样的话，不会再触发 useEffect 么？再 setName 一次，dependency – name 又变化了，这个 effect 就会再触发啊。……

注：这种情况，我能想到的实际场景，就是打开网站，界面先画出来，但是图片还在后台加载。等图片加载完成了，继续画。

  1. 另外一个例子，我点击 button，刷新了一次 name，userEffect 会不会触发啊？

还是说，react hook 设计上，保证了在 useEffect 内部，setXXX 即使是 dependency，也不会重复触发？

谢谢！

p.s. 有没有 react 可以 online 编辑 /实践的网站？ codepen.io 需要 VIP 才可以……

大佬有話說 (17)

  • 資深大佬 : star7th

    提供一下原教程链接看看。谁知道这是源码还是经过你加工出来的问题代码

  • 資深大佬 : syfless

    这段 useEffect 里的代码意义不明，本来就是 name 变化之后执行 useEffect 里的副作用，但 useEffect 又放了无条件改变 name 的代码，这就死循环了，不过好像 useEffect 里面会自动检测会不会死循环，顶多是执行几十次就停了
    codesandbox.io 可以

  • 資深大佬 : shenyu1996

    [name] => []

  • 資深大佬 : CptDoraemon

    setState’s identity is guaranteed to be stable over components’s life cycle. 文档里说的

  • 資深大佬 : easonHHH

    当 name 发生变化后，然后就从 api 获取一个 new name 然后赋值到 name ？

  • 資深大佬 : anjianshi

    按上面的代码，useEffect 确实没啥用，而且会死循环

  • 資深大佬 : mebtte

    <button onclick={clickme()} >click me</button>
    这行代码没看懂 clickme()不是 undefined 吗

  • 資深大佬 : dartabe

    建议多看看好点的教程 有点不知所云

    写 Hooks 的时候把 eslint 用起来

  • 資深大佬 : zhuweiyou

    1. 你这段 useEffect 多余, 可以删了.
    2. onclick={clickme()} 应该改成 onclick={clickme}

  • 資深大佬 : xingguang

    感觉不太对，我觉着这里不应该依赖 name，这里应该是要给个默认值吧。把依赖去掉比较合理

  • 資深大佬 : alexkuang

    codepen 免费版可以用 react 的，通过 cdn 导入

  • 資深大佬 : onfuns

    你这个无限循环了，如果只 mount 后进入执行赋值 name，那么依赖设置空数组即可。如果对 name 监听，可以再写一个 useEffect 对 name 监听，要么定义一个变量控制

  • 資深大佬 : KuroNekoFan

    可以用 codesandbox…

  • 資深大佬 : auroraccc

    你那个 useEffect 内部都没有使用 name 为什么要依赖 name，依赖应该是[]

  • 資深大佬 : TabGre

    https://overreacted.io/

    文章就得去看这个大神

  • 資深大佬 : azcvcza

    你这和原先 componentWillRecieveProps 里把 拿来的 props 赋值给 state 引起无限循环差不多

  • 資深大佬 : jingcoco

    3 靠谱…..useEffect 的第二个参数