zoukankan      html  css  js  c++  java
  • react-hooks 求解,当父级props更新是,state不更新(Hook 中 组件props更新组件不更新的问题)

    提问:

    is_focus 第一次是false, 第二次是true。 如果我不写useEffect的话,is_focus一直都是false,都是第一次的props的内容。 这样正常嘛?必须要在useEffect中 更新props的值?props上面的其他数据也一样,console.log props的数据是更新的,但是useState 之后还是第一次的数据

    export default function UserInfo(props: IProps) {
      const [is_focus, setFocus] = useState(props.is_focus)
       // is_focus 第一次是false, 第二次是true。 如果我不写useEffect的话,is_focus一直都是false,都是第一次的props的内容。 这样正常嘛?必须要在useEffect中 更新props的值?
      useEffect(() => {
        setFocus(props.is_focus)
      }, [props.is_focus, props.created_id])
      const handleFocus = useCallback(() => {
        props.dispatch({
          type: `${commonSpace}/changeFollow`,
          payload: {
            uid: props.created_id
          },
          callback: () => {
            setFocus(!is_focus)
          }
        })
      }, [is_focus, props.is_focus, props.created_id])
      return (
        <View className='userInfoBox'>
          <Image className='userAvatar' src={props.src} />
          <Text className='userName'>{props.nickname}</Text>
          <Button
            onClick={handleFocus}
            className={is_focus ? 'userStatus checked' : 'userStatus'}
            hover-class='hover'
          >
            {is_focus ? '已关注' : '关注'}
          </Button>
        </View>
      )
    }

    回答1:

    第一种情况是正常的,useState 他只会在函数执行时调用一次,给一个初始值。
    后续的更新 state 需要借助 useEffect 来实现。
    推荐两篇文章:
    【译】什么是React Hooks:https://segmentfault.com/a/11...
    精读《Function Component 入门》:https://segmentfault.com/a/11...

    回答2:

    是的 useState(...)你可以大致看成是constructor里的东西 组件不卸载重新装在就不会执行了

    总结:

    在react-hook中如果props更新,想让组件视图更新 使用useEffect(), 第二个参数传入一个数组,数组的每一项为 要  监听 的变量, 如果这个变量变化就会执行 useEffect 中的 callback 副作用函数。

  • 相关阅读:
    通过user-agent判断h5页面是在哪个手机App(QQ、微信、支付宝)下打开的
    vscode格式化插件
    简单直接,“NODE_ENV”总结
    NativeScript又一个Hybrid技术(附与Weex,ReactNative比较)
    ReactNative开发中遇到的问题记录
    两个在线编辑网站runjs和jsbin
    go 如何单测
    go语法-type等
    go语法-结构体和接口-细节
    解决 Webstorm 每次更新 Git 代码都要输入密码的问题
  • 原文地址:https://www.cnblogs.com/taohuaya/p/12844506.html
Copyright © 2011-2022 走看看