知识点
- 引入styled-components依赖, css的写法可转为js写法
import styled from ’styled-components’;
export const HeaderWrapper =styled.div`
height: 58px;
border-bottom: 1px solid #f0f0f0;
`
//'injectGlobal' is not exported from 'styled-components’
//injectGlobal已过期 现在采用 createGlobalStyle
引入方式即相当于组件的方式
import {HeaderWrapper} from ‘./style.js’;
调用方式
<HeaderWrapper> Header</HeaderWrapper>
子属性引入 &.right{ }
- devtool依赖可以采用redux-devtools-extension
- combineReducers 对reducer进行合并处理
- immuable.js 第三方依赖 让state不可变(fromJS({name:’hello'}))
- react-immuable state的获取和设置都通过set和get方法
- react-router-dom 路由<Router>
- PureCommponent 结合immableJS实现自己根据数据进行刷新,可以避免父组件更新,所有子组件都更新的情况
优化
- 代码编写 每个组件有各自的reducer等其它信息,统一在index.js导出
- 性能优化 PureCommponent 结合immableJS实现自己根据数据进行刷新
- 性能优化 Link(react-router-dom)替换a标签,优化一次html请求
- 性能优化 react-loadable 引入 ,优化js资源,避免一次性加载所有js文件(结合WithRouter)
网友评论