React学习笔记2-Function Component

Function Component

学无止境。——荀子

接着学习一下React的function component。

之前React主要通过class的方式来构建UI组件，但是可能在很多项目中存在一些弊端。Facebook设计了React Hook的方式，可以不通过class的方式来完成同样的功能。也就是只需要通过function component即可，这样带来的好处是代码更简单，bug更少。

简单的Component

先看看一个简单的function component:

import React from 'react';

function Welcome({name}) {
  return <h1>{name}</h1>;
}

function App() {
  return (
    <Welcome name="abc"/>
  );
}

export default App;

这里Welcome({name})用到了destructing解析赋值的语法。

Component组合

function component 可以组合， 把之前做的问卷调查小Demo重构一下：

import React, { useState } from 'react';


function Question({question, name, change}) {
  return (
    <div>
      <label for="">{question}</label>