Wie React durch Klasse und Funktion definierte Komponenten unterscheidet

Wie React durch Klasse und Funktion definierte Komponenten unterscheidet: 1. Verwenden Sie die Funktion, um Komponenten zu definieren, und fügen Sie Hooks hinzu, damit durch die Funktion definierte Komponenten einen lokalen Status haben. 2. Verwenden Sie die Klasse, um Komponenten zu definieren, und der zweite Parameter von qs filtert heraus das Präfix.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, React-Version 16.8. Diese Methode ist für alle Computermarken geeignet.

Verwandte Lernempfehlungen: React-Video-Tutorial

React unterscheidet zwischen klassen- und funktionsdefinierten Komponentenmethoden:

Funktion zum Definieren von Komponenten verwenden

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>
  );
}

Klasse zum Definieren von Komponenten verwenden

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

Verwandt Lernempfehlungen: Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie React durch Klasse und Funktion definierte Komponenten unterscheidet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!