我有三个选择。区别在于我的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>
}
2条答案
按热度按时间dwbf0jvd1#
第一个（内部）
return)第二（之前）return)示例具有相同的效果：代码在第一次渲染和每次重新渲染时运行。在第三层（内部）
useEffect)例如，代码仅在第一次渲染时运行一次。useEffect对于空的依赖项数组，其行为类似于基于类的组件方法componentDidMount.如果你需要
addEventListener或者只在第一次渲染时从外部api获取数据，最好将它们封装在内部useEffect.cbwuti442#
具有useeffect的选项很好，只需返回unsubscribe函数。