64 生命周期、ref属性、表单的输入、路由
64 生命周期、ref属性、表单的输入、路由
一、生命周期
-
初始化时期
constructor 初始化
render 渲染
componentDidMount 挂载完成
//大量的异步操作以及接口的调用，我们会在componentDidMount中完成
-
更新期
首先判断是否含有shouldComponentUpdate.
如果有，根据返回值状态，return true。生命周期继续执行，执行render(){}执行componentDidUpdate。return false 生命周期结束
如果没有，执行render(){}执行componentDidUpdate。
-
销毁
componentWillUnmount(){}
-
react组件嵌套的生命周期执行顺序
-
初始化
=======初始化=======
=======渲染=======
=======子组件初始化=======
=======子组件渲染=======
========子组件组件挂载完成=======
========组件挂载完成=======-
更新期
含有shouldComponentUpdate
========组件是否将要更新=======true
=======渲染=======
========子组件组件是否将要更新=======
=======子组件渲染=======
========子组件组件更新完成=======
========组件更新完成=======
===========================================
没有shouldComponentUpdate
=======渲染=======
=======子组件渲染=======
========子组件组件更新完成=======
========组件更新完成======= -
二、ref属性
快速获取DOM节点
vue中 ref
<div ref='属性名'></div>
this.$refs.属性名
2.1字符串的方式(不要用)
<div ref='属性名'></div>
this.refs.属性名
这种方式在严格模式下并不支持
2.2通过API创建方法去获取Ref
constructor(){
super()
//通过API方法去创建ref属性
//可以创建N个
this.ref属性变量名 = React.createRef()
}
<h1 ref={this.ref属性变量名 } >ref案例</h1>
取值：
this.ref属性变量名.current
三、表单的输入
3.1登录
3.2注册
四、路由
4.1概念
通过不同的导航渲染不同的组件
路由是一个插件
组件渲染的方式，无非就是两种
一种是通过组件的嵌套
一种是通过路由的渲染
4.2 下载安装路由
npm install(i) react-router-dom
版本+ react-router-dom@5.2.0
4.3基本路由
index.js
//设置路由模式
//引入路由模式标签
import { HashRouter } from "react-router-dom";
ReactDOM.render(
<HashRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</HashRouter>,
document.getElementById("root")
);
app.js
//引入home组件
import Home from './components/home'
//引入路由的组件方法
import {Switch,Route} from 'react-router-dom'
//利用函数去创建
function App(){
return (<div>
<h1>这是主组件</h1>
{/*
路由出口的设置
路由视图
*/}
<Switch>
<Route path='/home' component={Home}></Route>
</Switch>
</div>)
}
//暴露出当前模块
export default App
4.4 路由模式
//hash模式
import { HashRouter } from "react-router-dom";
//history模式
import { BrowserRouter } from "react-router-dom";
4.5路由导航
import {Link} from 'react-router-dom'
{/* 导航视图 */}
<Link to='/home'>首页</Link>
<Link to='/usercenter'>个人中心</Link>
<NavLink to='/home' activeClassName='select'>首页</NavLink>
<NavLink to='/usercenter' activeClassName='select'>个人中心</NavLink>
4.6 重定向
//引入路由的组件方法
import {Redirect} from 'react-router-dom'
<Switch>
<Redirect to='/home'></Redirect>
</Switch>
4.7编程式导航
直接调用this.props属性中的history方法
push() 往历史记录中追加一条数据
replace 替换记录
go(n) n是整数，一般用的是 -1
goBack() 返回函数
4.8路由的嵌套
-
app.js
定义了一级路由的出口
//引入要渲染的一级路由
import Index from './pages/index'
import Play from './pages/play'
import Detail from './pages/detail'
//调用路由插件
import {Switch,Route,Redirect} from 'react-router-dom'
function App(){
return (<div>
{/* 设置一级路由出口 */}
<Switch>
<Route path='/index' component={Index}></Route>
<Route path='/play' component={Play}></Route>
<Route path='/detail' component={Detail}></Route>
<Redirect to='/index'></Redirect>
</Switch>
</div>)
}
//暴露出当前模块
export default Ap
-
index.js
定义了路由模式并引入了rem
import React from "react";
import ReactDOM from "react-dom";
//引入清除默认样式文件
import './assets/css/reset.css'
//引入rem文件
import './assets//js/rem'
import "./index.css";
import App from "./App";
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode></BrowserRouter>,
document.getElementById("root")
);
-
index.jsx
定义了二级路由的出口以及路由导航的跳转
//引入css文件
import "../assets/css/index.css";
//引入二级路由组件
import Recommend from "../views/recommend";
import Rank from "../views/rank";
import Search from "../views/search";
//引入路由的相关组件
import {Switch,Route,Redirect,NavLink} from 'react-router-dom'
import React from 'react'
class Index extends React.Component{
render(){
return (<div className='index'>
{/* 视图导航切换 */}
<div className='nav'>
<NavLink activeClassName='active' to="/index/rec">推荐音乐</NavLink>
<NavLink activeClassName='active' to="/index/rank">热歌榜</NavLink>
<NavLink activeClassName='active' to="/index/search">搜索</NavLink>
</div>
{/* 设置二级路由出口 */}
<Switch>
<Route path="/index/rec" component={Recommend}></Route>
<Route path="/index/rank" component={Rank}></Route>
<Route path="/index/search" component={Search}></Route>
<Redirect to="/index/rec"></Redirect>
</Switch>
</div>)
}
}
export default Index
4.9跳转并传递参数之动态路由
!!!一定会更改path地址
-
app.jsx
<Route path='/list/:变量' component={List}></Route>
-
路由导航跳转
//引入路由导航组件
import { Link } from "react-router-dom";
<li className="songList" key={item.id}>
<Link to={"/list/"+item.id}>
<img src={item.img} alt="" />
<p>{item.title}</p>
</Link>
</li>
-
编程式导航跳转
代码
//封装一个跳转列表的事件
goList(id) {
/*
编程式导航的方法
push() 在 历史记录中添加一条数据
replace() 在历史记录中替换当前这条数据
go(n) n是一个整数 一般用-1（代表上一页）
goBack() 回退函数，回退到上一页
*/
console.log(this, "thisthis");
this.props.history.push("/list/" + id);
//this.props.history.replace('/list/'+id)
}
视图
<li
onClick={this.goList.bind(this, item.id)}
className="songList"
key={item.id}
>
<img src={item.img} alt="" />
<p>{item.title}</p>
</li>
-
取值
this.props.match.params.变量
4.10跳转并传递参数之query传参
-
路由导航跳转
//引入路由导航组件
import { Link } from "react-router-dom";
<li className="songList" key={item.id}>
<Link to={'/detail?id='+item.id+"&name=1"}>
<p>{item.title}</p>
</Link>
</li>
-
编程式导航跳转
代码
//封装一个跳转列表的事件
goDetail(id){
this.props.history.push('/detail?id='+id)
}
视图
<li onClick={this.goDetail.bind(this,item.id)} className="songList" key={item.id}>
<p>{item.title}</p>
</li>
-
取值
原生js截取字符串的方法
let query = this.props.location.search; //?id=1&name=1
query = query.slice(1); //id=1&name=1 去除掉？
let arr = query.split("&"); // ["id=1", "name=1"]
let obj = {};
//循环切割
arr.forEach((item) => {
let arrTemp = item.split("=");
obj[arrTemp[0]] = arrTemp[1]
});
console.log(obj, "参数");
this.setState({
queryid:obj.id
})
通过nodeAPI 方法截取字符串
//引入node.js API方法
import qsString from 'querystring'
let query = this.props.location.search.slice('1')//id=1&name=1
query = qsString.parse(query)
this.setState({
queryid:query.id
})
4.11跳转并传递参数之state传参
-
路由导航跳转
//引入路由导航组件
import { Link } from "react-router-dom";
<li className="songList" key={item.id}>
<Link to={
{
pathname:'/detail',
state:{
id:item.id
}
}
}>
<p>{item.title}</p>
</Link>
</li>
-
编程式导航跳转
代码
//封装一个跳转列表的事件
goDetail(id){
this.props.history.push({
pathname:'/detail',
state:{
id
}
})
}
视图
<li onClick={this.goDetail.bind(this,item.id)} className="songList" key={item.id}>
<p>{item.title}</p>
</li>
-
取值
this.props.location.state.id
####
浙公网安备 33010602011771号