React中放置JavaScript代码的最优位置是什么？

三种代码放置方案的差异及最优选择 #

各方案运行逻辑与适用场景 #

• 第一种：return语句内部（JSX中嵌入逻辑）
  此处仅支持JSX可解析的表达式，会在每次组件渲染时同步执行，仅适合插入动态渲染内容（比如变量值、三元判断渲染节点），不可放置事件监听、定时器等副作用逻辑：如果在这里写resize监听，每一次组件重渲染都会新增一个监听事件，直接引发内存泄漏，且这类语句不符合JSX语法规则，运行会直接报错。
• 第二种：return之前、组件函数体顶层
  此处代码同样会在每次组件渲染时全量执行，适合编写无副作用的纯计算逻辑（比如根据props过滤列表、计算衍生值），但不适合放副作用逻辑：如果在这里写resize监听，每次渲染都会新增监听，触发多次回调导致性能问题，同时如果项目支持SSR/SSG，服务端运行时没有window对象，直接访问window会抛出服务端运行错误。
• 第三种：空依赖数组的useEffect钩子内部
  此处的回调函数会在组件挂载到DOM后仅执行一次，完全匹配事件绑定这类只需执行一次的副作用场景，同时可以在useEffect中返回清理函数，组件卸载时自动移除事件监听，避免内存泄漏。

针对你的业务场景的最优方案 #

你要实现的实时显示窗口宽度的需求，最优方案就是第三种。你现有的代码可以补充清理逻辑做优化，优化后代码如下：

// 实时显示窗口宽度优化版代码
import { useState, useEffect } from "react";
export default function Example() {
    // 若需兼容SSR/SSG，可将初始值改为0，在useEffect中首次赋值
    const [width, setWidth] = useState(window.innerWidth)

    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth)
        window.addEventListener('resize', handleResize)
        // 组件卸载时自动移除监听，避免内存泄漏
        return () => window.removeEventListener('resize', handleResize)
    }, [])

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

内容的提问来源于stack exchange，提问作者Jonas A. Xavier