React怎么區(qū)分Class和function定義的組件

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

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

React區(qū)分Class和function定義的組件方法：

使用function定義組件

import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import qs from "qs"; //qs用來格式化數(shù)據(jù)
import { movieDetail } from "../../services/movies";
 
//推薦使用function定義組件,react16.8以后新增hook可以讓function定義的組件具有局部state
 
export default function Detail() {
  //function定義的組件沒有局部的數(shù)據(jù)，所以使用useState()獲取局部數(shù)據(jù)（局部狀態(tài)）
  //以下例子第一個(gè)參數(shù)表示定義的數(shù)據(jù)，第二個(gè)參數(shù)表示更改此數(shù)據(jù)要用到的方法，useState()中的參數(shù)表示定義數(shù)據(jù)的初始值
  //也就是movie={video:{}} 若要定義多個(gè)值，多次使用useState就行了
  const [movie, setMovie] = useState({
    video: {},
  });
  const [live, sertLive] = useState({}); //live={}
  //function定義的組件不能使用this.props.location來獲取地址欄信息，使用useLocation()獲取地址欄信息
  const location = useLocation();
  console.log(location);
 
  //function定義的組件也沒有生命周期的鉤子函數(shù)，我們使用useEffect來模擬生命周期,
  //參數(shù)一表示參數(shù)二依賴的內(nèi)容發(fā)生改變之后觸發(fā)的回調(diào)函數(shù)，如果參數(shù)二為空數(shù)組表示只執(zhí)行一次（初始化執(zhí)行）
  useEffect(() => {
    const query = qs.parse(location.search, {
      ignoreQueryPrefix: true, //此參數(shù)表示過濾掉前綴
    });
    //useEffect中調(diào)用異步函數(shù)如下所示
    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用來格式化數(shù)據(jù)
import { movieDetail } from "../../services/movies";
 
//使用class定義組件中this指向復(fù)雜，不推薦使用
 
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第二個(gè)參數(shù)表示過濾掉前綴
    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>
    );
  }
}

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