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 ( <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> );}
使用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 ( <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如何区分class和function定义的组件的详细内容。