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

一:使用安装

第一步:是先全局安装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()  =====> 常用

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