每次呼叫setState時，React打字影片都會重新啟動

我為每個頁面的標題/標題設定了 react-typing-animation 的投資組合。在狀態用于某事且打字影片尚未完成輸入標題并呼叫 setState 的頁面上，打字影片重新開始。

例如，在我的主頁上，我將添加一個漂亮的背景滾動效果，并且我有狀態設定來跟蹤 Y 軸上的滾動，所以如果主頁加載并且您向下滾動，標題會不斷重置并開始到處打字當你滾動。它也在我的井字游戲頁面上執行此操作，如果您在影片完成之前開始玩游戲，它會重新啟動，因為您在井字游戲板上的位置已存盤在狀態中。

示例影像

我假設我可能需要對狀態和打字影片做一些事情。也許以某種方式將影片存盤在狀態中并將其傳遞給您訪問的每個頁面？我不知道。

這是主頁的片段：

import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

import GitHubCard from "../apps/githubCard/index";
import Bio from "../apps/bio/bio";
import AnimatedTypingComponent from "../anim/headerType";

import styles from "./homepage.module.scss";

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    columns: {
        padding: theme.spacing(2),
        textAlign: "center",
        width: "100%",
    },
}));

// This will be the landing page for our application.
export default function HomePage() {
    const classes = useStyles();
    const [offsetY, setOffsetY] = useState(0);
    const handleScroll = () => {
        setOffsetY(window.pageYOffset);
    };

    useEffect(() => {
        window.addEventListener("scroll", handleScroll);
        return () => {
        window.removeEventListener("scroll", handleScroll);
        };
    }, []);

return (
    <div className={styles.homepage}>
        <div>
            <AnimatedTypingComponent title={"Hello I'm Russell Livermore"} title2={"Welcome to my portfolio"} />
        </div>
        

這是打字影片的代碼

 import React from "react";
 import Typing from "react-typing-animation";

 import styles from "./header.module.scss";

export default function AnimatedTypingComponent(props) {
    const { title, title2 } = props;

    return (
        <div className={styles.header}>
            <Typing className={styles.typing}>
                <div id={styles.header}>{title}</div>

                <Typing.Delay ms={1000} />
                <div id={styles.wel}>{title2}</div>
            </Typing>
        </div>
    );
}

uj5u.com熱心網友回復：

您可以使用 React.memo 來記憶您的組件以防止重新渲染

const MemoAnimatedTypingComponent  = React.memo(({...props}) => <AnimatedTypingComponent  {...props}/>);

在您的代碼中

import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

import GitHubCard from "../apps/githubCard/index";
import Bio from "../apps/bio/bio";
import AnimatedTypingComponent from "../anim/headerType";

import styles from "./homepage.module.scss";

const MemoAnimatedTypingComponent = React.memo(({...props}) => (
  <AnimatedTypingComponent {...props}/>
));

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  columns: {
    padding: theme.spacing(2),
    textAlign: "center",
    width: "100%",
  },
}));

// This will be the landing page for our application.
export default function HomePage() {
  const classes = useStyles();
  const [offsetY, setOffsetY] = useState(0);
  const handleScroll = () => {
    setOffsetY(window.pageYOffset);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div className={styles.homepage}>
      <div>
        <MemoAnimatedTypingComponent
          title={"Hello I'm Russell Livermore"}
          title2={"Welcome to my portfolio"}
        />
      </div>
    </div>
  );
}

一個簡單的例子

import React, { useEffect, useState } from "react";

const MemoComp = React.memo(({ ...props }) => <Test {...props} />);
function ClassSearch() {
  const [state, setState] = useState(1);
  return (
    <div>
      <button onClick={() => setState(state   1)}>Increase</button> <br />
      <MemoComp data="memorized" /> <br />
      <Test data="original" /> <br />
    </div>
  );
}

export default ClassSearch;

const Test = ({ data }) => {
  const date = new Date().getTime();
  return (
    <>
      Test {date} {data}
    </>
  );
};

標籤：反应 动画 状态 设置状态

上一篇：意外的CSS反轉影片

下一篇：如何在SwiftUI中停止筆畫重復影片