React组件重渲染时，return外的函数与变量会被重新创建吗？

一、重渲染时，return外的函数/对象会被重新创建吗？ #

是的，每次组件触发重渲染（比如props变化、自身state更新），组件函数体的代码会从头执行一遍，所以你定义的exampleFnc（注：你提供的代码中exampleFnc写成了对象，存在语法错误，正确的函数形式应该是const exampleFnc = () => { return 'name'; };）和styles对象，每次渲染都会生成全新的实例，它们的内存引用地址和上一次渲染的实例完全不同。

修正后的示例代码：

const ReactComponentExample = () => {
    // 每次渲染都会创建新的函数实例
    const exampleFnc = () => {
        return 'name';
    };

    // 每次渲染都会创建新的对象实例
    const styles = { background: 'red' };

    return (
        <div style={styles}>
            <p>Hello</p>
            {exampleFnc()}
        </div>
    );
};

二、想让它们仅创建一次，必须放组件外部吗？ #

不是必须的，除了将对象/函数放到组件外部的全局作用域，还可以使用React提供的useMemo（针对对象、普通值）和useCallback（针对函数）钩子来缓存实例，确保它们仅在首次渲染或依赖项变化时才会重新创建：

1. 缓存对象（如styles） #

用useMemo包裹，传入空依赖数组[]表示只在组件首次渲染时创建：

import { useMemo } from 'react';

const ReactComponentExample = () => {
    const styles = useMemo(() => ({ background: 'red' }), []);

    // ...其他代码
};

2. 缓存函数（如exampleFnc） #

用useCallback包裹，空依赖数组确保函数仅创建一次；如果函数依赖了组件内的state或props，需要将依赖项添加到数组中，这样只有依赖变化时才会重新生成函数：

import { useCallback } from 'react';

const ReactComponentExample = () => {
    const exampleFnc = useCallback(() => {
        return 'name';
    }, []);

    // ...其他代码
};

三、怎么调试确认是否是新实例？ #

不用复杂工具也能简单验证：

• 控制台打印引用对比：
  在组件内添加日志，每次渲染时打印对象/函数的引用，触发重渲染后查看控制台输出的内存标识是否不同：

  const ReactComponentExample = () => {
      const exampleFnc = () => { return 'name'; };
      const styles = { background: 'red' };
  
      console.log('当前styles实例:', styles);
      console.log('当前exampleFnc实例:', exampleFnc);
  
      // ...return部分
  };
  

  浏览器控制台中，不同实例的对象/函数会显示不同的内存地址或标识，对比即可判断是否重新创建。

• 用Object.is结合useRef对比：
  借助useRef保存上一次渲染的实例，每次渲染时和当前实例对比，直接在控制台输出结果：

  import { useRef } from 'react';
  
  const ReactComponentExample = () => {
      const exampleFnc = () => { return 'name'; };
      const styles = { background: 'red' };
  
      const prevStylesRef = useRef();
      const prevFncRef = useRef();
  
      // 检查styles是否重新创建
      if (!prevStylesRef.current) {
          prevStylesRef.current = styles;
          console.log('首次创建styles');
      } else if (!Object.is(prevStylesRef.current, styles)) {
          console.log('styles已重新创建');
          prevStylesRef.current = styles;
      }
  
      // 检查exampleFnc是否重新创建
      if (!prevFncRef.current) {
          prevFncRef.current = exampleFnc;
          console.log('首次创建exampleFnc');
      } else if (!Object.is(prevFncRef.current, exampleFnc)) {
          console.log('exampleFnc已重新创建');
          prevFncRef.current = exampleFnc;
      }
  
      // ...return部分
  };
  

  触发重渲染后，控制台会直接输出是否重新创建了实例。

• React DevTools Profiler工具：
  打开React DevTools，切换到Profiler标签，录制组件渲染过程，查看组件重渲染的原因，同时可以检查这些对象/函数是否导致子组件不必要的重渲染（如果传递给子组件的话）。

内容的提问来源于stack exchange，提问作者randomJSEngine