React中return元素与return ()=>{}的区别？关联MUI TabPanel无限渲染问题

三个函数写法的核心区别 #

三个函数的返回值类型完全不同，这是导致你遇到无限渲染问题的根本原因：

• RequestNotice：标准React函数组件，调用后直接返回<Containers.SupportNoticeListContainer />这个React元素，符合Material UI TabPanel的component属性要求的组件类型规范，正常传参不会触发异常渲染。
• RequestNotice2：不是常规组件，调用后返回的是一个新的匿名函数组件。如果你直接把RequestNotice2传给component属性，每次父组件渲染时都会生成一个全新的函数引用，MUI检测到component属性的引用发生变化，就会销毁旧组件重新挂载新组件，循环执行就会触发无限渲染。
• RequestNotice3：和RequestNotice2完全等价，只是将箭头函数的隐式返回写法改成了显式大括号+return的写法，最终返回的还是新的匿名函数组件，同样会因为引用频繁变化触发无限渲染。

问题修复方案 #

直接把第一种写法的RequestNotice传给TabPanel的component属性即可。如果需要给SupportNoticeListContainer传递自定义参数，优先用TabPanel提供的render回调写法，或者用useCallback缓存函数引用，避免每次渲染生成新的函数。

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