react第六天学习笔记

1.redux-thunk:这个是为了配合react-reducer中的dispatch方法的异步操作

　　　　　即在createStore()的第二个参数中传入applyMiddleware(thunk)　　　　

　　　　   异步action, 使用redux-thunk 之后，就可以在actionCreator里return一个方法，这个方法的参数是dispatch

　　　　　　export const decrementAsync = (id) => {

　　　　　　　　return (dispatch) => {

　　　　　　　　　　 setTimeout(() => {

　　　　　　　　　　　　 dispatch(decrement(id))

　　　　　　　　　　 }, 2000)

　　　　　　　　　 }

　　　　　　}

 

2.react-router:这是react为了方便组件之间页面的跳转,其中在react-router-dom api中有

　　　　1)基于浏览器环境的开发，只需要安装react-router-dom

　　　　2)BrowserRouter:使用HTML5提供的history API(pushState, replaceState 和 popstate 事件)来保持UI和URL的同步(只需在根组件上套一层即可)

　　　　3)HashRouter:使用URL的hash部分（即 window.location.hash）来保持UI和URL的同步。(同上组件,浏览器路由格式多了一层#)

　　　　4)Link:为应用提供声明式的、可访问的导航链接。　　　　　　

　　　　　　　　<li><Link to="/home">首页</Link></li>

　　　　5)Route:设置自己在路由中所代表的url,

　　　　　　　　<Route component={Home} path="/home"/>

　　　　　　　　也可以在Route中渲染组件,方便往组件中传参数,也可配合state进行权限配置

　　　　　　　　<Route path="/home" render={(routeProps)=>{ return <Home {...routeProps} x={1}/>} />

　　　　6)Redirect:<Redirect to="/home" from="/" exact />   与switch匹配使用   exact表示完全匹配,不加表示模糊匹配(用这个开头的)

　　　　7)Switch:依次匹配  匹配到一个就退出

　　　　8)Route和Redirect的路径参数path可以传参

　　　　　　　　<Route component={ArticalDetail} path="/artical/:id" />

 　　　　　　　　然后在ArticalDetail组件中使用this.props.match.params.id拿取

　　　　9)组件中的API跳转:(Route路由装饰过的组件:如果此组件未用Route装饰,也可通过高阶组件withRouter装饰也可用以下的属性)

　　　　　　　　this.props.history.push('/content') 将新的路径压入到history中

　　　　　　　　this.props.history.push({ pathname:'/studentDetails', payload:record }) 这种方式跳转可以通过 this.props.localhost.payload来获取传递的参数record 　　　　                　　　　　　   this.props.history.go(n) n为正数或者负数，表示前进或者后退

　　　　　　　　this.props.history.goBack() 后退

　　　　　　　　this.props.history.goForward() 前进

　　　　10)扩展:像后台请求数据的三种方法:

　　　　　　　　ajax,img,sendBeacon