将 JavaScript 放入 React 的最佳位置在哪里?

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>
)
}

第三(内部使用效果)：

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)
}, [])