1.styled-components(进行react项目的CSS布局)
CSS文件一旦在一个文件中引入,则在全局都生效,易出错,故使用styled-components第三方插件实现CSS样式的引入。
styled-components功能:实现带样式的组件,这些组件的样式是组件独享的,样式组件之间的样式不会产生影响。
2.Reset CSS
固定写法,见:https://meyerweb.com/eric/tools/css/reset/
每个浏览器都有一些自带的或者共有的默认样式,或造成一些布局上的困扰,css reset的作用就是重置这些默认样式,使样式表现一致;为了让页面获得浏览器跨浏览器的兼容性,需要用重置文件css代码覆盖浏览器默认的样式来统一样式。
3.iconfont
4.使用combineReducers完成对数据的拆分管理
将一个总的reducer数据,按子组件拆分成不同的小的reducer数据
index.js文件是一个文件夹(store)的入口/出口,所以在引入一个文件夹(store)内的js文件(比如actionCreators.js)时可不用写到具体的该文件,只需将所有js文件(比如actionCreators.js)的出口放到该文件夹(store)的index.js文件中,因此引入该文件夹下的所有文件时(比如actionCreators.js),只写到所在文件夹(store)就可以了。
5.actionCreators与constants的拆分
6.使用Immutable插件来管理store中的数据
安装:npm install immutable
使用Immutable.js可以生成一个不可改变的immutable对象,若使得state成为immutable对象(不可改变),这样就不用担心在reducer操作数据过程中会改变state,这样reducer就不会出问题。
//fromJS方法将header下的js对象数据focused转化成immutable对象
const defaultState = fromJS({
focused: false
});
//获取immutable对象数据
return {
//将数据拆分后,focused相对于store中直接的Reducer降了一级
//将store中和header下的数据都变成immutable对象了,immutable对象的数据使用get方法获取数据
focused: state.get('header').get('focused')
}
//设置immutable对象新值
state.set('focused', true)
7.使用redux-immutable统一数据格式
由于上述6.所使用的的immutable只是将header组件下的reducer数据变成了immutable对象,而总的store中的state数据对象并没有变成immutable对象,还是普通对象,这样就存在操作数据时,state使用“.”操作数据,immutable对象(header下的focused)使用“get、set”方法,如下所示
return {
focused: state.header.get('focused')
}
因此,需要使用redux-immutable插件将总的store中的state数据也变为immutable对象。
安装:npm install redux-immutable
import { combineReducers } from "redux-immutable";
//redux-immutable提供了与redux一样的combineReducers方法,用来将各部分reducer整合成一个reducer
import { reducer as headerReducer } from '../common/header/store';
//将拆分出去的各个部分Reducer数据结合成一个总的Reducer数据
//redux-immutable提供的combineReducers方法生成的reducer数据内容就是immutable对象的
const reducer = combineReducers({
header: headerReducer
});
export default reducer;
获取普通对象数据:
focused: state.header.focused
获取immutable对象数据:
focused: state.getIn(['header', 'focused'])
focused: state.get('header').get('focused')//与上等价
设置immutable对象数据:
state.set('focused', true)
8.Ajax获取推荐数据
使用redux-thunk;
public文件夹下可以存放假数据,当向服务器进行数据请求时,先在工程里找向服务器请求数据,如果不成功,则去public下找对应路径下的文件(假数据:public/api/headerList.json)。项目发布前须将假数据文件删除。
获取ajax数据的时候,页面加载一次只需要请求一次就可以了;通过判断list中是否有值,进行控制发送ajax请求。
9.换页旋转动画效果的实现
思路:首先给icon添加过渡效果;添加鼠标点击事件;获取icon所在DOM标签;获取DOM标签的transform属性中的rotate的当前值,没有则设置为0;鼠标每次点击,设置transform中rotate旋转值为:原值+360。