Comment React distingue les composants définis par classe et fonction

React distingue les composants définis par classe et fonction : 1. Utilisez la fonction pour définir les composants et ajoutez des hooks pour permettre aux composants définis par la fonction d'avoir un état local. 2. Utilisez la classe pour définir les composants et filtrez le second ; paramètre du préfixe qs.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, React version 16.8. Cette méthode convient à toutes les marques d'ordinateurs.

Recommandations d'apprentissage associées : Tutoriel vidéo React

React distingue les méthodes de composants définies par classe et fonction :

Utiliser la fonction pour définir les composants

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

Utiliser la classe pour définir les composants

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

Recommandations d'apprentissage associées : tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!