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>{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>{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 중국어 웹사이트의 기타 관련 기사를 참조하세요!