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

总结

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

相关文章

  • 利用CDN加速react webpack打包后的文件详解

    利用CDN加速react webpack打包后的文件详解

    下面小编就为大家分享一篇利用CDN加速react webpack打包后的文件详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • React实时预览react-live源码解析

    React实时预览react-live源码解析

    这篇文章主要为大家介绍了React实时预览react-live源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 深入浅析React中diff算法

    深入浅析React中diff算法

    React 最为核心的就是 Virtual DOM 和 Diff 算法,diff算法的基础是Virtual DOM,接下来通过本文给大家介绍React中diff算法的相关知识,对React中diff算法感兴趣的朋友跟随小编一起学习下吧
    2021-05-05
  • ahooks解决React闭包问题方法示例

    ahooks解决React闭包问题方法示例

    这篇文章主要为大家介绍了ahooks解决React闭包问题方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • React二维数组的几种声明和使用过程

    React二维数组的几种声明和使用过程

    React二维数组声明需注意结构与值的可变性,正确方法包括直接赋值或动态初始化,避免使用const map=[[]]导致长度固定,动态扩展时应先定义一维数组再添加元素,确保数组大小可变
    2025-07-07
  • React redux 原理及使用详解

    React redux 原理及使用详解

    这篇文章主要为大家介绍了React redux 原理及使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React渲染的优化方案

    React渲染的优化方案

    react的渲染机制是非常独特的,有别于 Vue 框架的渲染次数的优化计算,React 很久以来就有PureComponent、shouldUpdate,本文小编给大家介绍了React渲染的优化方案,需要的朋友可以参考下
    2024-08-08
  • React解析html 标签的方法

    React解析html 标签的方法

    在React中,解析HTML标签通常是使用JSX(JavaScript XML)语法的一部分,这篇文章主要介绍了React 用来解析html 标签的方法,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • 简单介绍react redux的中间件的使用

    简单介绍react redux的中间件的使用

    这篇文章主要介绍了简单介绍redux的中间件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 如何使用Redux Toolkit简化Redux

    如何使用Redux Toolkit简化Redux

    这篇文章主要介绍了如何使用Redux Toolkit简化Redux,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下
    2021-04-04

最新评论