React如何区分Class和function定义的组件

import React, { useState, useEffect } from "react";

import { useLocation } from "react-router-dom";

import qs from "qs"; //qs用来格式化数据

import { movieDetail } from "../../services/movies";

//推荐使用function定义组件,react16.8以后新增hook可以让function定义的组件具有局部state

export default function Detail() {

  //function定义的组件没有局部的数据，所以使用useState()获取局部数据（局部状态）

  //以下例子第一个参数表示定义的数据，第二个参数表示更改此数据要用到的方法，useState()中的参数表示定义数据的初始值

  //也就是movie={video:{}} 若要定义多个值，多次使用useState就行了

  const [movie, setMovie] = useState({

    video: {},

  });

  const [live, sertLive] = useState({}); //live={}

  //function定义的组件不能使用this.props.location来获取地址栏信息，使用useLocation()获取地址栏信息

  const location = useLocation();

  console.log(location);

  //function定义的组件也没有生命周期的钩子函数，我们使用useEffect来模拟生命周期,

  //参数一表示参数二依赖的内容发生改变之后触发的回调函数，如果参数二为空数组表示只执行一次（初始化执行）

  useEffect(() => {

    const query = qs.parse(location.search, {

      ignoreQueryPrefix: true, //此参数表示过滤掉前缀

    });

    //useEffect中调用异步函数如下所示

    async function fetchData() {

      // You can await here

      const result = await movieDetail(query.id);

      console.log(result);

      setMovie(result.data.data.basic);

      sertLive(result.data.data.live);

    }

    fetchData();

  }, []);

  return (

    <div>

      <img

        style={{ width: "100%", margin: "0 auto", display: "block" }}

        src={live.img}

      ></img>

      <h1>{movie.name}</h1>

      <p>{movie.story}</p>

      <video controls autoPlay src={movie.video.url}></video>

    </div>

  );

}