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>