React嵌套组件函数触发问题：<Item />与Item()调用差异解析

问题场景 #

第一种写法中，按钮的doSomething函数完全无法触发：

const Container = ({content}) => {
    const Item = () => {
        return <ItemContainer>{content}</ItemContainer>
    }

    return <div>
              <Navbar />
              <Item />
           </div>
}

const Main = () => {
    return <Container content={<button onClick={doSomething}>abc</button>} />
}

但把<Item />改成直接调用函数{Item()}后，事件就能正常触发：

const Container = ({content}) => {
    const Item = () => {
        return <ItemContainer>{content}</ItemContainer>
    }

    return <div>
              <Navbar />
              {Item()}
           </div>
}

核心原因 #

1. React组件的识别与实例化特性 #

React靠首字母大小写区分原生DOM元素和自定义组件，但这里的关键问题是：Item是定义在Container内部的函数组件，每次Container渲染时，Item都会被重新定义成一个全新的函数。当用<Item />渲染时，React会把它当作自定义组件处理，每次渲染都会认为这是一个新组件，会卸载旧实例、挂载新实例——这个过程会破坏传入content的事件绑定上下文，导致onClick失效。

2. 组件渲染与函数调用的本质差异 #

• 用<Item />渲染：这是React组件的实例化过程，会触发组件生命周期，虚拟DOM会把它当作独立节点处理。由于Item每次都是新函数，React无法复用之前的组件状态和事件绑定，传入的按钮自然无法响应点击。
• 直接调用Item()：这只是执行一个普通函数，返回的是ItemContainer包裹content的JSX结构，相当于直接把这段JSX插入到Container的DOM结构里，没有组件实例化的额外过程，事件绑定的上下文完全保留，所以doSomething能正常响应。

额外提醒：尽量不要在组件内部定义另一个组件，这种写法除了引发事件问题，还会因为每次父组件渲染都重建内部组件，导致不必要的DOM卸载和挂载，影响性能。

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