「React 基础」函数组件及Hooks特性简介

大家好，在前面的几篇相关文章里，我们一起学习了如何使用类的方式声明组件，以及如何属性传值和处理本地数据状态，本篇文章我们一起学习如何使用函数的方式进行声明组件。

在 Hooks 技术没出现之前，我们一般在组件不需要维护数据状态时，使用函数组件，又称作静态组件（static components） 或 无状态组件 （stateless components）等，但是在 React 16.8 版本引入了 Hooks 技术，函数组件就变得强大起来，它可以让react函数组件也拥有状态，不仅解决了React一些常见的问题，同时又让组件变得更简单、简洁、更易于阅读和重构，本篇文章将会针对 Hooks 进行简单的介绍。

如何创建函数组件

基于上篇文章的例子，我们来尝试下通过函数的方式改写下公共组件：头组件、底部组件、内容组件等。

1、首先我们来看看当前的 Header 类组件：

import React, { Component } from "react";
import ProTypes from 'prop-types';
import logo from '../../images/logo.svg';
class  Header extends  Component{
    // 这里定义属性类型和规则
    static  proTypes={
        title:ProTypes.string.isRequired,
        url:ProTypes.string
    };
    render() {
        const {
            title='Welcome to React',
            url='https://www.qianduandaren.com'
        } =this.props;
        return (
            <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <a
                className="App-link"
                href={url}
                target="_blank"
                rel="noopener noreferrer"
            >
                {title}
            </a>
        </header>
        );
    }
}
export default  Header;

//File: src/shared/components/layout/Header/Header.js

2、接下来我们要做的就是把类组件变成箭头函数组件，并且删掉 Component 引用。然后我们不需要通过 this 方法设置 prop 属性，我们通过参数的方式进行传递。最后将 static proTypes 对象移动至函数外，通过函数属性的方式进行声明，修改后的代码如下：

import React fr