小编hij*_*tao的帖子

根据反应文件,useEffect在重新运行useEffect部分之前将触发清理逻辑.

如果你的效果返回一个函数,React将在清理时运行它...

没有用于处理更新的特殊代码,因为useEffect默认情况下处理它们.它会在应用下一个效果之前清除之前的效果......

然而,当我使用requestAnimationFrame和cancelAnimationFrame里面useEffect,我发现cancelAnimationFrame可能无法正常停止动画.有时,我发现旧动画仍然存在,而下一个效果会带来另一个动画,这会导致我的Web应用程序性能问题(特别是当我需要渲染繁重的DOM元素时).

我不知道反应钩子在执行清理代码之前是否会做一些额外的事情,这使得我的取消动画部分不能正常工作,会useEffect挂钩做像闭包这样的东西来锁定状态变量吗？

什么是使用效果的执行顺序及其内部清理逻辑？我在下面写的代码有什么问题,这使得cancelAnimationFrame不能完美地工作吗？

谢谢.

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

const {useState, useEffect} = React;

//import ReactDOM from "react-dom";

function App() {
  const [startSeconds, setStartSeconds] = useState(Math.random());
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setStartSeconds(Math.random());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  useEffect(
    () => {
      let raf = null;

      const onFrame = …

目前，我正在开发一个包并准备在 npm 中发布它，我用 TypeScript 编写了它，但在包捆绑方面遇到了一些问题。

我把我的代码（TypeScript/Less 文件）放进去src，结构如下所示：

src
??? components
?   ??? table.less
?   ??? table.tsx
??? index.tsx
??? utils
    ??? mock.tsx

由于我想在npm中发布它，所以我需要将它编译成JavaScript/CSS文件（在lib文件夹中），以便其他开发人员可以直接导入它（无需在他们的项目中额外编译），结构应该是这样的：

lib
??? components
?   ??? table.css
?   ??? table.js
??? index.js
??? utils
    ??? mock.js

但是我遇到了一些问题：

1. 如果我使用tsc命令，tsx文件可以正确编译为js文件，但less文件将被忽略；
2. 如果我使用 webpack 命令而不是tsc，结果将被捆绑在一个文件中，并且失去它的原始结构，并且它会混淆包用户；

我想我需要通过以下方式使其工作：

1. 从编译所有文件src，以lib一个接一个（保持相同的文件夹结构）;
   • tsx文件到js文件；
   • less文件到css文件；
   • 添加声明文件，例如index.js.d.ts和index.css.d.ts；
   • 修改一些写作风格，如import styles from …