Maison >interface Web >js tutoriel >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!