1.生命周期
1.初始期:一个组件实例,只执行一次。
constructor: 构造函数 ,初始化数据
componentWillMount: 在渲染之前,二次更新数据
render :渲染 加载虚拟DOM,渲染节点到页面
componentDidMount:渲染完成 发ajax,开轮播,开计时器,window|document绑定事件,ref
2.更新期:state和props发生修改,都会引起更新期的执行
componentWillReceiveProps :接收的props变了,才会执行
shouldComponentUpdate:
//1.没有写shouldComponentUpdate,更新 componentWillUpdate->render->componentDidUpdate
// 2.写了,没有return,就会报错
// 3.return true ,更新期:shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate
// 4.return false 更新期:shouldComponentUpdate
componentWillUpdate:更新之前
//更新之前,可以通过this.state,this,props取到更新之前的旧值,nextState,nextProps是更新之后的新值。
render:渲染 根据新的state或者props,生成一课虚拟DOM树,进行diff算法,计算出最优的更新方式,进行渲染
componentDidUpdate:更新完成
3.销毁期
componentWillUnmount:销毁之前 清除计时器,清除window|document上的事件
2.路由
1.安装依赖包
npm i react-router-dom -save
2. 路由模式 HashRouter BrowserRouter
index.js 入口文件定义路由模式
//配置路由模式 HashRouter:hash模式 BrowserRouter:history模式
import {HashRouter,BrowserRouter} from "react-router-dom"
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>
,
document.getElementById('root')
);
3.路由出口 Switch
import {Switch} from "react-router-dom"
export default function App() {
return (
<div>
{/* 一级路由出口 */}
<Switch>
</Switch>
</div>
)
}
4.路由规则 Route
import {Switch,Route} from "react-router-dom"
<Switch>
<Route path="/login" component={Login}></Route>
<Route path="/register" component={Register}></Route>
<Route path="/index" component={Index}></Route>
<Route path="/detail" component={Detail}></Route>
<Route path="/list" component={List}></Route>
<Redirect to="/login"></Redirect>
</Switch>
5.重定向 Redirect
import {Redirect} from "react-router-dom"
<Switch>
<Route path="/login" component={Login}></Route>
<Route path="/list" component={List}></Route>
<Redirect to="/login"></Redirect>
</Switch>
6.导航 Link NavLink
import { Link, NavLink } from "react-router-dom"
<Link to="/index/shop">购物车</Link>
<NavLink to="/index/shop">购物车</NavLink>
注意:NavLink有activeClassName,Link没有
7.编程式导航
this.props.history.push() //添加新的历史记录
this.props.history.replace()//是用新的记录替换当前历史记录
this.props.history.go(-1);//返回
路由组件可以直接使用编程式导航,非路由组件需要通过设置withRouter()
import { withRouter } from "react-router-dom"
class Nav {
}
export default withRouter(Nav)
8.嵌套路由
{/* 二级路由出口 */}
<Switch>
<Route path="/index/home" component={Home}></Route>
<Route path="/index/cate" component={Cate}></Route>
<Route path="/index/shop" component={Shop}></Route>
<Route path="/index/mine" component={Mine}></Route>
<Redirect to="/index/home"></Redirect>
</Switch>
9.路由传参 list->detail
1.search(?) 传参
<Link to={"/detail?id=1}" className="list-item" key={item.id}>
<h3>{item.name}</h3>
<div className="btn">立即抢购</div>
</Link>
取值
componentDidMount(){
let str=this.props.location.search;
//'?id=1&a=10&b=20&c=30'-->{id:"1",a:"10",b:"20",c:"30"}
let result=querystring.parse(str.slice(1))
console.log(result);
//ajax
}
3.stylus
1.安装stylus 依赖包
npm i stylus stylus-loader --save
2.package.json react-scripts版本号更改
“react-scripts:"3.2.0"
3.git 提交本地仓库
git add .
git commit -m "123"
4.导出配置文件
npm run eject
5.配置stylus
reac使用stylus,先运行npm run eject,在wenpack.config.js文件,module.export->module->oneOf添加一下代码
{
test: /\.styl$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
require.resolve('stylus-loader')
]
},
6.src/stylus
index.styl 整合css
color.styl color
size.styl 大小
form.styl form