Question

我有 3 个选项。不同之处在于我的 javascript 代码所在的位置。

首先（内部返回）：

export default function App() {

    return (
        <div>
            {/* Some javascript code */}
            <p>I am a paragraph</p>
        </div>
    )
}

第二次（返回前）：

export default function App() {

    {/* Some javascript code */}

    return (
        <div>
            <p>I am a paragraph</p>
        </div>
    )
}

第三个（在 useEffect 中）：

import { useEffect } from "react";
export default function App() {  
    useEffect(() => {/* Some javascript code */}, [])
    return (
        <div>
            <p>I am a paragraph</p>
        </div>
    )
}

我不知道这是否会改变答案，但我真正的 javascript 代码是这样的：

//This is a simple code to display the window width
import { useState, useEffect } from "react";
export default function Example() {
    
    const [width, setWidth] = useState(window.innerWidth)

    useEffect(() => {
        window.addEventListener('resize', () => setWidth(window.innerWidth) )
    }, [])

    return <p>{width}</p>
}

Answer 1

第一个（在 return 内）和第二个（在 return 之前）示例具有相同的效果：代码在第一次渲染和每次重新渲染时运行。 >

在第三个（在 useEffect 内）示例中，代码仅在第一次渲染时运行一次。

useEffect 与空依赖数组的作用类似于基于类的组件方法 componentDidMount。

如果您需要诸如 addEventListener 之类的东西或仅在首次渲染时从外部 API 获取数据，最好将它们包装在 useEffect 中。

Answer 2

带有 useEffect 的选项没问题，只需返回取消订阅功能即可。

useEffect(() => {
    const resizeCb = () => setWidth(window.innerWidth)

    window.addEventListener('resize', resizeCb)

    return () => window.removeEventListener('resize', resizeCb)
}, [])

将 javascript 放入 React 的最佳位置在哪里？

2 个答案: