React组件和函数式组件在React中有什么不同？

Question

我在学习 React 时感到非常困惑。 例如，我有一个非常简单的 React 组件：

export default function Foo(){
    return(
        <div>
            <div>some text</div>
        </div>
    )
}

我想要添加一个子组件:

export default function Foo(){

    const Bar  = ()=>{
        return (
            <input placeholder="some input"/>
        )
    }
    return(
        <div>
            <div>some text</div>
        </div>
    )
}

据我所知，我可以以两种方式使用此组件：

1. 作为函数使用

return(
        <div>
            <div>some text</div>
            {Bar()}
        </div>
    )

2. 作为组件使用：

 return(
        <div>
            <div>some text</div>
            <Bar/>
        </div>
    )

这两者有何不同？我以前认为它们是一样的，直到我在输入框中使用组件<Bar/>时遇到了问题，即在我输入第一个字母后，输入框会失去焦点。

演示如下：https://codesandbox.io/s/gifted-archimedes-l7bce7?file=/src/App.js 那么这里确切的问题是什么？我一直将其编码为组件，根据我的理解，当它返回React组件时，<Bar/>与Bar()相同。

我是对还是错？

编辑：我找到了这篇博客，它非常接近这个问题，并且也很棒 :) https://dev.to/igor_bykov/react-calling-functional-components-as-functions-1d3l?signin=true

- CODEforDREAM

---

好问题。我也在寻找非常准确的解决方案。 - Hritik Sharma

这篇博客正确地回答了你的问题。 - Hritik Sharma

Answer 1

我看过你的codesand box演示，从中我认为失去焦点的原因是你使用了useState的地方。

在这里，你可以做两件事情： 要么 1.将状态作为props从父组件传递给子组件。 或者 2.在子组件中使用useState，因为父组件不需要状态值。我更喜欢第二种方法。

你可以阅读此文档来获取更多关于何时使用useState以及如何放置它的知识。

- Meet Bhalodiya

Answer 2

1. 要成为一个组件，应该使用返回JSX的函数作为<Component />，而不是使用Component()。

2. 当一个函数组件被用作<Component />时，它将拥有一个生命周期并且可以拥有一个状态。

3. 当一个函数被直接调用Component()时，它只会运行并（可能）返回一些东西。没有生命周期、没有hooks，也没有React的魔力。

以上3个语句是您问题的答案。

当您把组件写成{Child()}时，它没有任何生命周期或hook，而当您写成<Child />时，它有自己的生命周期和hooks，这就是您遇到这些问题的原因。

欲了解更多，请阅读：链接。

- Hritik Sharma

Answer 3

当您创建一个新组件时，可以在另一个功能组件中重复使用它。但是，如果您创建函数，则无法在另一个功能组件中重复使用它，它只能在特定的功能组件中有限访问。

- Mr.Gandhi

---

谢谢您的回答，您能解释一下为什么会发生这种情况吗？ - CODEforDREAM

我fork了你的代码。看一下，即使输入一个单词后它仍然可以工作。https://codesandbox.io/s/strange-einstein-eyc12e - Mr.Gandhi

感谢@Mr.Gandhi，但我真的想知道是什么导致了这个问题。 - CODEforDREAM