React怎么區分Class和function定義的組件

小編給大家分享一下React怎么區分Class和function定義的組件，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

React區分Class和function定義的組件方法：1、使用function定義組件，新增hook可以讓function定義的組件具有局部state；2、使用class定義組件，qs第二個參數過濾掉前綴。

React區分Class和function定義的組件方法：

使用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>
      <h2>{movie.name}</h2>
      <p>{movie.story}</p>
      <video controls autoPlay src={movie.video.url}></video>
    </div>
  );
}

使用class定義組件

import React, { useState, useEffect, Component} from "react";
import { useLocation } from "react-router-dom";
import qs from "qs"; //qs用來格式化數據
import { movieDetail } from "../../services/movies";
 
//使用class定義組件中this指向復雜，不推薦使用
 
export default class Detail extends Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      movie: {
        video: {
          url: "",
        },
      },
    };
  }
  async componentDidMount() {
    console.log(this.props.location.search); //url傳參
    //qs第二個參數表示過濾掉前綴
    const query = qs.parse(this.props.location.search, {
      ignoreQueryPrefix: true,
    });
    console.log(query);
    const result = await movieDetail(query.id);
    console.log(result);
    this.setState({
      movie: result.data.data.basic,
    });
    document
      .querySelectorAll(".nav ul li")[1]
      .querySelector("a")
      .classList.add("active");
  }
  componentWillUnmount() {
    document
      .querySelectorAll(".nav ul li")[1]
      .querySelector("a")
      .classList.remove("active");
  }
  render() {
    return (
      <div>
        <h2>{this.state.movie.name}</h2>
        <p>{this.state.movie.story}</p>
        <video controls autoPlay src={this.state.movie.video.url}></video>
      </div>
    );
  }
}

看完了這篇文章，相信你對React怎么區分Class和function定義的組件有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！