以功能风格的写作反应组件

Question

我同时学习反应和榆树，相似之处使我想知道我是否可以像摘要bellow一样写所有我的反应组件，而不是使用class

import React from 'react';
import './App.css';
export default function App() {
  const [name, setName] = React.useState("oof")
  return (
    <div className="App App-header">
      <Head/>
      <Adorable name={name}/>
      <AdoreForm setName={setName}/>
    </div>
  );
}
const Head = () =>
  <header>Adorable Genator OwO</header>
const Adorable = (props) =>
  <img src={`https://api.adorable.io/avatars/221/${props.name}@adorable.png`}/>
const AdoreForm = (props) =>
  <div>
    <input onChange={(e) => props.setName(e.target.value)}/>
  </div>

Answer 1

是的，您可以按照摘要中显示的代码编写代码。您也可以使用箭头功能来创建您的应用程序组件。

 const App = () => {
  const [name, setName] = React.useState("oof")
  return (
    <div className="App App-header">
      <Head/>
      <Adorable name={name}/>
      <AdoreForm setName={setName}/>
    </div>
  );
}
export default App;

您使用哪种方法(即类或功能(来创建组件，尤其是在引入React Hooks。