React가 클래스와 함수로 정의된 컴포넌트를 구별하는 방법

React가 클래스로 정의된 구성요소와 함수를 구별하는 방법: 1. 함수를 사용하여 구성요소를 정의하고, 함수로 정의된 구성요소가 로컬 상태를 가질 수 있도록 후크를 추가합니다. 2. 클래스를 사용하여 구성요소를 정의하고, qs의 두 번째 매개변수가 필터링됩니다. 접두사.

이 튜토리얼의 운영 환경: Windows 7 시스템, React 버전 16.8 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

관련 학습 권장 사항: react 비디오 튜토리얼

React는 클래스와 함수 정의 구성 요소 메서드를 구별합니다.

함수를 사용하여 구성 요소 정의

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

클래스를 사용하여 구성 요소 정의

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

관련 학습 추천 :javascript 비디오 튜토리얼

위 내용은 React가 클래스와 함수로 정의된 컴포넌트를 구별하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!