类组件和函数组件差异和React-router-dom16中使用获取页面参数问题
warning:
这篇文章距离上次修改已过186天,其中的内容可能已经有所变动。
类组件和函数组件的主要区别在于它们的定义方式和生命周期管理方式的不同。类组件有一个完整的生命周期,包括装载(Mount)、更新(Update)和卸载(Unmount)阶段,而函数组件则是在相关依赖或属性变化时重新渲染。
在React-router-dom v6中,页面参数可以通过useParams钩子获取。这是因为v6版本引入了新的路由API,其中useParams钩子用于获取URL参数。
以下是一个使用函数组件和React-router-dom v6获取页面参数的例子:
import React from 'react';
import { useParams } from 'react-router-dom';
const ParamComponent = () => {
// 使用useParams钩子获取URL参数
const params = useParams();
return (
<div>
<p>参数:{JSON.stringify(params)}</p>
</div>
);
};
export default ParamComponent;
在这个例子中,ParamComponent是一个函数组件,它通过useParams钩子获取URL中的参数,并在页面上显示它们。当参数变化时,组件会自动更新以显示最新的参数。
评论已关闭