React怎么區(qū)分Class和function定義的組件-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的遵化網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

React區(qū)分Class和function定義的組件方法：1、使用function定義組件，新增hook可以讓function定義的組件具有局部state；2、使用class定義組件，qs第二個參數(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)）
  //以下例子第一個參數(shù)表示定義的數(shù)據(jù)，第二個參數(shù)表示更改此數(shù)據(jù)要用到的方法，useState()中的參數(shù)表示定義數(shù)據(jù)的初始值
  //也就是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定義的組件也沒有生命周期的鉤子函數(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第二個參數(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>
    );
  }
}

看完了這篇文章，相信你對React怎么區(qū)分Class和function定義的組件有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文名稱：React怎么區(qū)分Class和function定義的組件-創(chuàng)新互聯(lián)
文章來源：http://muchs.cn/article38/cshspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、關(guān)鍵詞優(yōu)化、營銷型網(wǎng)站建設(shè)、標簽優(yōu)化、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容