styled-components

# styled-components

import的css文件会被全局使用，容易造成污染

cnpm install --save styled-components

 //style.js 
 import {createGlobalStyle} from 'styled-components';
  
 export const GlobalStyle = createGlobalStyle`
 	.dell{
 		background:green
 	}
 `;

//App.js
import {GlobalStyle} from './style';
class App extends Component {
		render(){
			return(
				<div className="dell">1112
					<GlobalStyle/>	
				</div>
			)
		}
}


import styled from 'styled-components';
import logoPic from '../../statics/logo.png';
 
export const HeaderWrapper = styled.div`
	height:58px;
	border-bottom:1px solid #f0f0f0
`;
export const Logo = styled.a.attrs({
	href:"/"
})`
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 56px;
	background: url(${logoPic});
	background-size: contain;
`;
export const Nav = styled.div`
	width: 960px;
	height: 100%;
	padding-right: 70px;
	box-sizing: border-box;
	margin: 0 auto;
`;

export const NavItem = styled.div`
	line-height: 56px;
	padding: 0 15px;
	font-size: 17px;
	color: #333;
	&.left {
		float: left;
	}
	&.right {
		float: right;
		color: #969696;
	}
	&.active {
		color: #ea6f5a;
	}
`;

export const SearchWrapper = styled.div`
	position: relative;
	float: left;
	.zoom {
		position: absolute;
		right: 5px;
		bottom: 5px;
		width: 30px;
		line-height: 30px;
		border-radius: 15px;
		text-align: center;
		&.focused {
			background: #777;
			color: #fff;
		}
	}
`;

//App.js
import {HeaderWrapper,Logo,Nav} from './style.js' 
render(){
		return(
			<HeaderWrapper>
				<Logo/>
				<Nav></Nav>
			</HeaderWrapper>
		)
	}

总结

styled-components给元素添加属性可以加.attrs({})对象形式，
也可以在引用该文件的组件上加。如<Logo href="/">

# iconfont制作图标

新建项目
选中图标购物车
下载到本地
选中iconfont.svg iconfont.css iconfont.eot iconfont.woff iconfont.ttf
将@font-face中的路径都加上存放以上文件的文件路径如font文件夹，那么就./font（database64文件不需要加）
默认的文件开头是iconfont，如果不进行修改，只需要加./即可，但是目录文件名应为iconfont
将css引入项目中

//&#xe615;为相应的字体图标代码
<i className="iconfont">&#xe615;</i>

# immutable(永恒不变的)

cnpm i immutable --save

 import * as constants from './constants';
 import {fromJS} from 'immutable'
 const stateDefault=fromJS({
 	
 	focused:false
 })
 const reducer=(state=stateDefault,action)=>{
 	if(action.type===constants.SEARCH_FOCUS){
 		return state.set('focused',true)
 		
 	}
 	if(action.type===constants.SEARCH_BLUR){
 		return state.set('focused',false)
 	}
 	
 	
 	return state
 }
 
 export default reducer

//header.js
......
const mapStateToProps=(state)=>{
	return {
		focused:state.header.get('focused')
	}
}
......

总结

引入immutable中的fromJS，让原始数据变成immutable对象，用set来变更一个全新的immutable对象，同时获取用get方法。

# redux-immutable 和 getIn()，get()

cnpm i --save redux-immutable

//让state也变成immutable对象，在总的reducer中
import {combineReducers } from 'redux-immutable';

const mapStateToProps=(state)=>{
	return {
		focused:state.getIn(['header','focused'])
		// focused:state.get('header').get('focused')
		//两种写法效果一致
	}
}

# 传值immutable

当我们传递值给已经用immutable对象转化过后的值，会导致错误，所以我们传输过去的值也要改成immutable对象

import {fromJS} from 'immutable'

const changeList=(data)=>({
	type:constants.CHANGE_LIST,
	data:fromJS(data)
})

export const getList=()=>{
	return(dispatch)=>{
		 axios.get('/api/headerList.json').then(function(res){
			const data=res.data;
			dispatch(changeList(data.data))
		 }).catch(function(err){
			 console.log(err)
		 })
	}
}

 //reducerjs
 import * as constants from './constants';
 import {fromJS} from 'immutable'
 const stateDefault=fromJS({
 	
 	focused:false,
 	list:[]
 })
 const reducer=(state=stateDefault,action)=>{
 	if(action.type===constants.SEARCH_FOCUS){
 		return state.set('focused',true)
 		
 	}
 	if(action.type===constants.SEARCH_BLUR){
 			return state.set('focused',false)
 	}
 	if(action.type===constants.CHANGE_LIST){
 			return state.set('list',action.data)
 	}
 	
 	
 	return state
 }
 
 export default reducer

# toJS()和merge()

 const {listmouseIn,handleChangePage,totalPage}=this.props;
 const newList=list.toJS();
 //因为list目前是immutable数组,所以我们要将他转换为普通JS数组,toJS是immutable内置方法

 case constants.CHANGE_LIST:
 	return state.merge({
 		list:action.data,
 		totalPage:action.totalPage
 })
 //合并多个set方法操作，提高性能和可读性
 // return state.set('list',action.data).set('totalPage',action.totalPage);

# 提升性能

当每次点击返回的数据都是一致的，就没有必要重复点击

 <NavSearch 
 	className={focused?'focused':''}
 	onFocus={()=>handleInputFocus(list)}
 	onBlur={handleInputBlur}
 ></NavSearch >
 ......
 handleInputFocus(list){
 	(list.size===0)&&dispatch(actionCreators.getList())
	//只有当list数据为0是才去重新派发请求
 	dispatch(actionCreators.searchFocus())
 },

← redux进阶简书2 →