react useState useEffect useMemo实际业务场景中的使用

在这里插入图片描述
下面的代码实现了上面图片的功能

import React, { useMemo } from "react";
import "./HomeHead.less";
import Img from "../assets/images/timg.jpg";

const HomeHead = function HomeHead(props) {
  { /*父组件传过来的值 */}
    let { today } = props;
  { /*处理时间缓存在状态未改变时是否走暖存,useMemo和vue中计算属性功能类似*/ }

  { /*用useMemo,只有在today变化时,才重新执行time函数,而在更新组件HomeHead时,today未改变,则不执行time函数, today的值走的是缓存和vue的计算属性原理一样*/}
  let time = useMemo(() => {
    //过滤处理时间格式*
    // console.log('@', today.match(/^\d{4}(\d{2})(\d{2})$/))
    let [, month, day] = today.match(/^\d{4}(\d{2})(\d{2})$/);
    let area = [
      "",
      "一",
      "二",
      "三",
      "四",
      "五",
      "六",
      "七",
      "八",
      "九",
      "十",
      "十一",
      "十二",
    ];
    return {
      day,
      month: area[+month] + "月",
    };
  }, [today]);

  return (
    <header className="home-head-box">
      {/*头部左边 */}
      <div className="info">
        <div className="time">
          <span>{time.day}</span>
          <span>{time.month}</span>
        </div>
        <h2 className="title">海鸥移动端博客</h2>
      </div>
      {/*头部右边 */}
      <div className="pictture">
        <img src={Img} alt="头像" />
      </div>
    </header>
  );
};

export default HomeHead;

import React, { useState, useEffect } from "react";
import HomeHead from "../components/HomeHead";
import _ from "../assets/utils"; //  工具函数库,处理时间 formatTime函数
import { Swiper } from "antd-mobile"; // UI组件
import { Link } from "react-router-dom";
import "./Home.less";
import api from "../api";

const Home = () => {
  //创建时间状态 ,_.formatTime(null,'{0}{1}{2}{4}:{5}')当前时间作为初始时间值
  let [today, setToday] = useState(_.formatTime(null, "{0}{1}{2}"));
  // console.log(_.formatTime(null,'{0}{1}{2}{4}:{5}'));

  // 轮播图数据
  let [bannerData, setBannerData] = useState([]);
  // 第一次渲染完毕,请求后台数据,useEffect不能用async修饰,所有里面包一层使用立马执行函数
  useEffect(() => {
    (async () => {
      try {
        // const newData = await api.queryNewsLatest();
        // console.log(newData);
        let { date, stories, top_stories } = await api.queryNewsLatest();
        // 更新时间日期
        setToday(date);
        // 更新bannerData状态
        setBannerData(top_stories);
      } catch (_) {}
    })();
  }, []);

  return (
    <div className="home-box">
      {/*today抓给子组件,头部组件*/}
      <HomeHead today={today} />
      {/*轮播图*/}
      <Swiper autoplay={true} loop={true} className="swiper-box">
        {bannerData.length > 0
          ? bannerData.map((item) => {
              let { image, id, hint, title } = item;
              return (
                <Swiper.Item key={id}>
                  <Link
                    to={{
                      pathname: `/detail/${id}`,
                    }}
                  >
                    <img src={image} alt="" />
                    <div className="desc">
                      <h3 className="title">{hint}邓紫棋</h3>
                      <p className="author">{title}邓紫棋牛逼</p>
                    </div>
                  </Link>
                </Swiper.Item>
              );
            })
          : null}
      </Swiper>
       {/*列表*/}
    </div>
  );
};
export default Home;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
引用\[1\]:在React,memo是一个高阶组件,用于优化函数组件的性能。它类似于React.PureComponent,通过对内部对象进行浅比较来判断是否重新渲染组件。\[2\]useEffectReact提供的一个Hook函数,用于在函数组件执行副作用操作。它可以在组件渲染完成后执行一些异步操作,比如发送网络请求、订阅事件等。\[3\]useMemoReact提供的另一个Hook函数,用于在函数组件进行性能优化。它可以缓存计算结果,避免重复计算,类似于Vue的computed属性。\[1\]useRef是React提供的一个Hook函数,用于在函数组件创建一个可变的引用。它可以用来保存组件的状态,或者获取DOM元素的引用。\[1\]useStateReact提供的一个Hook函数,用于在函数组件创建一个可变的状态。它返回一个数组,第一个元素是当前的状态值,第二个元素是更新状态的函数。 所以,react memo用于优化函数组件的性能,useEffect用于执行副作用操作,useMemo用于缓存计算结果,useRef用于创建可变的引用,useState用于创建可变的状态。 #### 引用[.reference_title] - *1* *2* [useMemo,memo,useRef等相关hooks详解](https://blog.csdn.net/weixin_44441196/article/details/117328033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [一文轻松掌握react-hook(useStateuseReducer、useEffectuseCallback、useMemouseRef、useContext...)](https://blog.csdn.net/u010074572/article/details/105176653)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鸥总

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值