javascript - 以函数式风格编写 React 组件

Question

我正在同时学习 React 和 elm，它们的相似之处让我想知道我是否可以像下面的代码片段一样编写所有 React 组件，而不是使用类

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 钩子(Hook)的情况下。