时间戳

首页 > 解决方案 > 在 React 函数组件的外部使用变量是一种反模式吗？

reactjs - 在 React 函数组件的外部使用变量是一种反模式吗？

问题描述

下面的情况是 React 中的反模式吗？

由于某些原因，变量和函数可能会在 React 函数组件之外声明。例如，定时器 ID 和其他可以如下使用：

import React from "react";

const myFunc = () => { // no purpose
    /*some codes*/
}
let myBool = false; // no purpose
let timerId = 0;
    
const MyComponent = () => {
    const [name, setName] = useState("");
    
    /* some codes */

    useEffect(() => {
        timerId = setTimeout(() => {
            /* some codes */
        }, 1000);
            
        return () => clearTimeout(timerId);
    }, []);
        
    return (
        <div>Hello world</div>
    );
}

export default MyComponent;

标签： reactjsanti-patterns

解决方案

这样做不是犯罪。但在你这样做之前，想想你为什么要这样做。

如果您想将这些变量与组件一起暴露给外部世界，例如export { MyComponent, myFunc, timerId, myBool};，那么使用这种模式是有意义的。否则最好在功能组件本身内声明变量/函数。

是的，这是一种反模式。IMO 功能组件背后的整个想法是使组件变得纯净。使反应功能组件纯粹，使其更可预测，您的输出仅由函数的输入决定。在函数范围之外使用变量会使函数不再纯。使用纯函数有几个好处。我强烈推荐使用纯功能组件。

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976

推荐阅读