Hook

hook是16.8新增特性
作用：
让函数组件拥有 state,类似什么周期，ref,reduce功能
useState：模拟state

useEffect

一个参数

	useEffect(()=>{
 console.log("首次渲染与更新")
})
		//模拟
			//componentDidMount
			//componentDidUpdate

一个参数带return

	useEffect(()=>{
 console.log("首次渲染与更新")
return ()=>{console.log(首次卸载)}
})
		//模拟
		//	componentDidMount
		//	componentDidUpdate
		//return
			//componetWillUnmount
		//	componentDidUpdate

第二个参数是空数组,return

	useEffect(()=>{
 console.log("首次渲染与更新")
return ()=>{console.log(首次卸载)}
},[])
		//componentDidMount
		//componetWillUnmount

第二个参数是具体的值

useEffect(()=>{
 console.log("首次渲染与更新")
return ()=>{console.log(首次卸载)}
},[num])
		//模拟
		//	componentDidMount
			//componentDidUpdate(update只对num有用)
		//return
			//componetWillUnmount
			//componentDidUpdate(update只对num有用)

路由的参数

location 地址栏信息
1、pathname 地址
2、hash 哈希值
3、search 查询条件
4、state 数据
match
1、isExact 是否精确匹配
2、params 参数
3、url 匹配的地址
4、path Route 参数path
history
1、go 跳转历史记录
2、goBack 返回
3、goForward 前进
4、push 跳转
5、replace 跳转不留历史记录
6、length 长度
7、action 动作
8、location 同参数location

路由权限控制

核心:使用 Route 的render参数

	function PrivatePage({children}){
 return <Route render={(props)=>{
	   const component = React.cloneElement(children,props);
      // 拷贝继承
      return fakeAuth.isAuth?component:<Redirect to={{pathname:"/login",state:{from:props.location}}}/>
   }}/>
}