类组件和函数组件差异和React-router-dom16中使用获取页面参数问题

好久没有写代码，今天做了一个简单的React项目，配置好antd和react-router-dom之后，正常的编写代码后，发现了一个问题，使用

this.props.match.params

无法获取到页面的参数了，经过查阅react-router-dom的文档后发现，在新版本的react-router中需要使用钩子函数进行参数的获取，而在新版本的React中使用钩子Hook不能在类组件中进行，所以需要对类组件进行更改，更改为函数组件。

函数组件在React中实际上已经可以完全代替类组件了，同时写起来更加的顺手，更加灵活且需要代码更短，同时任何一个地方如果需要这个组件，直接像调用函数的方式进行调用就可以了。

例如下方代码：

function Article(article) {
    return (
        <div className='common-text'>
            <Layout>
                <Content className='common-text'>
                    <div className='article'>
                    <h3 className='text-title-center'>{article.title}</h3>
                    <Row gutter={16}>
                        {article.content}
                    </Row >
                    </div>
 
                </Content>
            </Layout>
        </div>
    )
}

但是问题是，在这个组件并不是一个子组件，不能直接获取到数据进行函数的调用，需要对远程的服务器进行请求后再更新页面的展示效果，这里需要使用到useState这个钩子函数

注意：在React中所有的钩子函数都应该以use进行开头。

useState这个函数的写法需要以默认值作为参数，然后以一个变量和一个set方法进行接收，如下代码所示。

    let [article,setArtice]=useState({
        article:{}
    })

在函数组件里没有componentDidMount这样的生命周期方法进行触发，但是这里依旧可以使用钩子函数实现，使用useEffect钩子函数进行实现。

import React, { useEffect,useState } from 'react'
import NetUtils from '../public/js/NetUtils'
import {  Col, Row, Layout } from 'antd';
import '../public/css/common.css'
import { useSearchParams } from 'react-router-dom';
const { Content } = Layout;

function Article() {
    const [params] = useSearchParams()
    let [article,setArtice]=useState({
        article:{}
    })

    const getArticle = (id) => {
        // 这个是封装一个网络请求fetch方法
        NetUtils.myGet("xxx", { id: id }).then(data => {
            setArtice(data.data)
        })
    }

    useEffect(()=>{
        // 获取到名称为id的参数值，使用getAll可以获取到路径中所有的参数
        getArticle(params.get("id"))
    },[])

    return (
        <div className='common-text'>
            <Layout>
                <Content className='common-text'>
                    <div className='article'>
                    <h3 className='text-title-center'>{article.title}</h3>
                    <Row gutter={16}>
                        {article.content}
                    </Row >
                    </div>
 
                </Content>
            </Layout>
        </div>
    )
}

这样就实现了一个函数式的组件