React Hooks如何主动更新Hooks组件

 更新时间:2023年11月14日 17:08:54   作者:Franklin___  
这篇文章主要介绍了React Hooks如何主动更新Hooks组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

React Hooks主动更新Hooks组件

当我们用useState创建对象数组的时候,使用数组的index去改变数组某一项中的对象属性时,useState无法监听到,此时视图就无法更新,所以我们就需要主动强制更新视图

const [friendCircleArr, setFriendCircleArr] = useState({
        name: 'Lucy',
        avator: P1,
        content: {
            text: '今天上课好累啊',
            image: null
        },
        time: '刚刚',
        isLike: false
    }, {
        name: 'Helena',
        avator: P2,
        content: {
            text: '杰伦太帅了吧!!',
            image: [Zhou1, Zhou2, Zhou3]
        },
        time: '1分钟前',
        isLike: false
    })

此时我们去修改此对象数组

const likeClick = index => {
    const tempArr = friendCircleArr
    tempArr[index].isLike = !tempArr[index].isLike
    setFriendCircleArr(tempArr)
}

我们会发现视图并没有发生更新

此时我们就需要主动更新视图

const [refresh, setRefresh] = useState(false)
useEffect(() => {
  refresh && setRefresh(false)
}, [refresh])
 
// 修改之前的代码
const likeClick = index => {
    const tempArr = friendCircleArr
    tempArr[index].isLike = !tempArr[index].isLike
    setFriendCircleArr(tempArr)
    setRefresh(true)
}

创建一个refresh变量,用来控制视图更新,此时再调用likeClick方法,视图就可以正常更新了

react hooks更新、刷新子组件

import React, { Fragment, useEffect, useState, } from 'react';
import {
  Tabs,
  Button,
} from 'antd';
import { connect, history } from 'umi';
import Cmp1 from './components/cmp1';
import Cmp2 from './components/cmp2';
import Cmp3 from './components/cmp3';
import Cmp4 from './components/cmp4';
import Cmp5 from './components/cmp5';
import Cmp6 from './components/cmp6';

const { TabPane } = Tabs;

const DemoPage = () => {
  const [refresh, setRefresh] = useState(false);
  useEffect(() => {
    refresh && setTimeout(() => setRefresh(false));
  }, [refresh]);
  // tab切换
  const handleTabChange = (key) => {
    setCurrentKey(key);
  };
  //刷新,重新加载组件
  const handleReload = () => {
      setRefresh(true);
  };

  return (
    <Fragment>
      <div>
          <Button onClick={handleReload}>刷新</Button>
        <div>
          <Tabs activeKey={currentKey} onChange={handleTabChange}>
            <TabPane tab="1" key="1"></TabPane>
            <TabPane tab="2" key="2"></TabPane>
            <TabPane tab="3" key="3"></TabPane>
            <TabPane tab="4" key="4"></TabPane>
            <TabPane tab="5" key="5"></TabPane>
            <TabPane tab="6" key="6"></TabPane>
          </Tabs>
          {currentKey === '1' && !refresh && (
              <Cmp1/>
          )}
          {currentKey === '2' && !refresh && (
              <Cmp2/>
          )}
          {currentKey === '3' && !refresh && (
             <Cmp3/>
          )}
          {currentKey === '4' && !refresh && (
              <Cmp4/>
          )}
          {currentKey === '5' && !refresh && (
              <Cmp5/>
          )}
          {currentKey === '6' && !refresh && (
              <Cmp6/>
          )}
        </div>
      </div>
    </Fragment>
  );
};
export default connect()(DemoPage);

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React的Props、生命周期详解

    React的Props、生命周期详解

    “Props” 是 React 中用于传递数据给组件的一种机制,通常作为组件的参数进行传递,在 React 中,props 是只读的,意味着一旦将数据传递给组件的 props,组件就不能直接修改这些 props 的值,这篇文章主要介绍了React的Props、生命周期,需要的朋友可以参考下
    2024-06-06
  • React中使用react-file-viewer问题

    React中使用react-file-viewer问题

    这篇文章主要介绍了React中使用react-file-viewer问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • React 项目中动态设置环境变量

    React 项目中动态设置环境变量

    本文主要介绍了React 项目中动态设置环境变量,本文将介绍两种常用的方法,使用 dotenv 库和通过命令行参数传递环境变量,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • ReactQuery系列之数据转换示例详解

    ReactQuery系列之数据转换示例详解

    这篇文章主要为大家介绍了ReactQuery系列之数据转换示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • react函数组件类组件区别示例详解

    react函数组件类组件区别示例详解

    这篇文章主要为大家介绍了react函数组件类组件区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 解决React报错`value` prop on `input` should not be null

    解决React报错`value` prop on `input` should&

    这篇文章主要为大家介绍了React报错`value` prop on `input` should not be null解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React超详细讲述Fiber的使用

    React超详细讲述Fiber的使用

    在fiber出现之前,react的架构体系只有协调器reconciler和渲染器render。当前有新的update时,react会递归所有的vdom节点,如果dom节点过多,会导致其他事件影响滞后,造成卡顿。即之前的react版本无法中断工作过程,一旦递归开始无法停留下来
    2023-02-02
  • React Native性能优化红宝书方案详解

    React Native性能优化红宝书方案详解

    React Native 是Facebook在React.js Conf2015推出的开源框架,使用React和应用平台的原生功能来构建Android和iOS应用,这篇文章主要介绍了React Native性能优化红宝书,需要的朋友可以参考下
    2024-06-06
  • 详解React 16 中的异常处理

    详解React 16 中的异常处理

    这篇文章主要介绍了详解React 16 中的异常处理的相关资料,React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃;未被任何异常边界捕获的异常可能会导致整个 React 组件树被卸载,需要的朋友可以参考下
    2017-07-07
  • React Hook 监听localStorage更新问题

    React Hook 监听localStorage更新问题

    这篇文章主要介绍了React Hook 监听localStorage更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论