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

本文详细介绍了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

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

代码:https://github.com/baiwenzi/react-routerhttps://github.com/baiwenzi/react-router

 

效果:

五.组件的生命周期

(1)挂载阶段: 由ReactDOM.render()触发---初次渲染

1.  constructor()

2.  getDerivedStateFromProps 

3.  render()

4.  componentDidMount() =====> 常用

,例如:开启定时器、发送网络请求、订阅消息

(2)更新阶段: 由组件内部this.setSate()或父组件重新render触发

1.  getDerivedStateFromProps

2.  shouldComponentUpdate()

3.  render()

4.  getSnapshotBeforeUpdate

5.  componentDidUpdate()

(3)卸载阶段:由ReactDOM.unmountComponentAtNode()触发

1.  componentWillUnmount()  =====> 常用

关闭定时器、取消订阅消息

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值