用react脚手架开发的项目,总结了一些经验和个人的看法
1. 组件页面部分
条件渲染:我个人比较喜欢在render函数里面,直接将页面的 html 部分全部写完,感觉这样的代码利于阅读,那个条件渲染部分就可以使用三目(三元)运算来做,这个写法其实也比较省事
{ } 我们都知道,{} 里面放js代码,但是在 render 函数里面 return 中 if 条件语句是不能用的,但是三元运算可以用 { 条件?( html标签 ):( html标签 ) }
给我的感觉就是 react 中的 html 部分需要大量的三元运算,包括 className style 的属性里面也是,尤其是与用户交互的时候
案例:
官方的案例中三元运算没有带() 其实还是加上() 好一些,因为 html 代码多了,通过()可以很清晰的看到条件语句包着的部分
当然,如果说在一个render 函数里面写所有东西不好,还有一种方法就是在函数里面 return html标签,并且在函数里面没有 if 语句的限制,可以想怎么用怎么用
这个是官方的案例,其实可以直接 {this.UserGreeting()} 来获取 return 的html标签,className style 加条件判断的话,只能用三元运算
className 的写法
<div className={'类名' index == this.state.active ? 'active' :''}></div>
<div className={`类名 ${index === this.state.active ? 'active' : ''}`}></div>
style 的写法
<div style={{color:'red',textAlign:'center'}}>Hello World!</div>
事件绑定的写法,react的事件绑定中有个 this 的指向问题,像 vue react 这种组件化开发,我们this通常要指向当前的组件
两种写法:核心技术 es6 的箭头函数
哪种都行,因为 es6 的箭头函数,用 bind 改变this的时代已经过去了
事件传参:第二个截图为例:onClick={ (e) => this.handleClick(11,e) }
handleClick(a){ console.log(a) } // 11
好了,页面的部分我们就说完了,如果有欠缺的部分,以后在补充,不过目前这些东西已经够正常的页面开发了
下面我们来说说路由 react-router-dom
为啥没有说 react-router ,因为 react-router-dom 包含了 react-router的功能,不过下载 npm 包的时候,是需要两个包一起下载的
主要说的组件有:BrowserRouter HashRouter Link NavLink Switch exact Route withRouter
BrowserRouter:history 路由:通常要包含 App 最大的那个组件
HashRouter : hash 路由:通常要包含 App 最大的组件;这两种路由方式要 二选一
Switch:Switch 切换路由的组件,这个是精准匹配的 ,某些情况与 Route组件中 exact 属性配合使用,是属于配置路由里面的
Route:是配置路由的组件
Link:相当于 a 连接,用于跳转
NavLink:特殊的a连接,可以绑定一下自定义样式
witchRouter:如有通过网址进行的跳转,有可能跳转的那个页面没有路由的对象,所以我们有些时候需要用 withRouter将组件包起来
接下来聊聊 redux 的状态容器
redux的操作很简单:
通过 let store = createStore(renduer) 创建一个对象,将一个对象暴露出去让页面使用
页面 通过 store 便可以有 store 的方法,可以使用,getState() 获取 state 的数据,dispatch() 像 renduer 中提交事件,对形参有要求,要 action 的格式,必须要有type属性
所以 renduer 这个函数就显得很关键
function renduer( state , action ){ // state 就是redux的状态容器,也就是存放数据的地方,页面上无法更改里面的数据,只能通过 dispatch 来提交到 renduer 中来
switch(action.type){
case: 这个就是页面通过dispatch(action 对象中的type 类型,也可以通过 action 来获取页面上传过来的数据)
对数据进行操作
return state;
default:
return state;
}
}
这个函数就是来处理数据的地方
接下来,我们重新的看这个代码: let store = createStore(renduer)
然后我们来说说 react-reduex 这个包
这个包的作用也很明显,就是将 组件和 redux 结合起来,了解他的作用,我们来看看这个代码
Provider 这个组件的作用也很明显,通过上下文,来让所有的组件都拥有 store 的对象,这样组件也可以调用 store 的方法
store.subscribe() 这个方法用来,如果 renduer 中的 state 发生了改变,便可以动态的改变页面的state值
最后聊聊 redux-thunk 这个异步的中间件,这个中间件对 dispatch 进行了增强,可以使 dispatch 可以在 return 一个回调函数,回调函数中有一个形参dispatch,进行异步操作,通过这个dispatch来像renduer中进行请求
let store = createStore(renduer,applyMiddleware(thunk)); // 第二个参数就是中间件,这样的返回一个 store 的对象
使用方法也很简单
最后说一点语法糖
页面获取数据和发送dispatch的优化
官网的案例:
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onClick: () => {
dispatch(setVisibilityFilter(ownProps.filter))
}
}
}
const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)