作者:mobiledu2502859507 | 来源:互联网 | 2022-07-14 05:20
React区分Class和function定义的组件方法:1、使用function定义组件,新增hook可以让function定义的组件具有局部state;2、使用class定义组件,qs第二个参数过滤掉前缀。
React区分Class和function定义的组件方法:1、使用function定义组件,新增hook可以让function定义的组件具有局部state;2、使用class定义组件,qs第二个参数过滤掉前缀。
本教程操作环境:windows7系统、React16.8版,该方法适用于所有品牌电脑。
相关学习推荐:react视频教程
React区分Class和function定义的组件方法:
使用function定义组件
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 (
{movie.name}
{movie.story}
);
}
使用class定义组件
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 (
{this.state.movie.name}
{this.state.movie.story}
);
}
}
相关学习推荐:Javascript视频教程
以上就是React如何区分Class和function定义的组件的详细内容,更多请关注其它相关文章!