react安裝使用，父子兄弟传值，三种路由传参详解,组件的生命周期

最新推荐文章于 2024-10-14 15:39:48 发布

原创最新推荐文章于 2024-10-14 15:39:48 发布 · 396 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

react 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了React的安装过程，创建第一个React页面，以及父子组件之间的数据传递。重点讲解了使用PubSubJS进行组件间通信，React Router的基础用法，包括基本路由、Switch、NavLink、嵌套路由及不同类型的路由参数传递。此外，还涵盖了组件的生命周期，包括挂载、更新和卸载阶段的重要方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一:使用安装

第一步:是先全局安装create-react-app

运行:npm install -g create-react-app

第二步:创建项目

运行:create-react-app demo

创建成功效果:

运行命令:cd demo ==> npm start

运行成功效果:

页面:

二:第一个react页面:

三:父子间传值:

父组件代码:

父组件传递数据给子组件: 父组件将需要传递的参数通过key={xxx}方式传递至子组件，子组件通过this.props.key获取参数.

父传子子组件代码:

子传递数据给父组件:

子传父子组件代码:子通过props传递，要求父提前给子传递一个函数

效果:

消息订阅与发布:

引入第三方插件:PubSubJS

1.先订阅，再发布（理解：有一种隔空对话的感觉）

2.适用于任意组件间通信

3.要在组件的componentWillUnmount中取消订阅

引入:import PubSub from 'pubsub-js'

发布:PubSub.publish('atguigu',{isShow:false})

	componentDidMount(){
		this.token = PubSub.subscribe('atguigu',(_,stateObj)=>{
			this.setState(stateObj)
		})
	}

取消订阅:

	componentWillUnmount(){
		PubSub.unsubscribe(this.token)
	}

四.路由导航:

路由的基本使用

安装路由:npm install -S react-router-dom

1.明确好界面中的导航区、展示区

2.导航区的a标签改为Link标签

<Link to="/xxxxx">Demo</Link>

3.展示区写Route标签进行路径的匹配

<Route path='/xxxx' component={Demo}/>

4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>//选择路由模式

代码:

效果:

匹配路由:

有两种路由匹配组件：<Route> 和 <Switch>

Switch的使用:

1.通常情况下，path和component是一一对应的关系。

2.Switch可以提高路由匹配效率(单一匹配)。

<Switch>
	<Route path="/about" component={About}/>
	<Route path="/home" component={Home}/>
</Switch>

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）

2.开启严格匹配：<Route exact={true} path="/about" component={About}/>

3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

NavLink与封装NavLink

1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名

解决多级路径刷新页面样式丢失的问题

1.public/index.html 中引入样式时不写 ./ 写 / （常用）

2.public/index.html 中引入样式时不写 ./ 写 %PUBLIC_URL% （常用）

3.使用HashRouter

Redirect的使用

1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.具体编码：
		<Switch>
			<Route path="/about" component={About}/>
			<Route path="/home" component={Home}/>
			<Redirect to="/about"/>
		</Switch>

嵌套路由

1.注册子路由时要写上父路由的path值

2.路由的匹配是按照注册路由的顺序进行的

向路由组件传递参数

1.params参数

            路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>

            注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>

            接收参数：this.props.match.params

2.search参数

            路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>

            注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>

            接收参数：this.props.location.search

            备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

3.state参数

            路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>

            注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>

            接收参数：this.props.location.state

            备注：刷新也可以保留住参数