React学习笔记_常用工具 插件使用
2017-12-17 14:54
465 查看
常用组件
axios(http请求模块,可用于前端任何场景,很强大)
echarts-for-react(可视化图表,别人基于react对echarts的封装,足够用了)
recharts(另一个基于react封装的图表,个人觉得是没有echarts好用)
nprogress(顶部加载条,蛮好用
)
react-draft-wysiwyg(别人基于react的富文本封装,如果找到其他更好的可以替换)
react-draggable(拖拽模块,找了个简单版的)
screenfull(全屏插件)
photoswipe(图片弹层查看插件,不依赖jQuery,还是蛮好用
)
animate.css(css动画库)
redux Web 应用是一个状态机,视图与状态是一一对应的.所有的状态,保存在一个对象里面
redux-logger 日志
Reselect 记忆组件
redux-thunk 为了解决异步action的问题
redux-saga 为了解决异步action的问题
react-router-redux 保持路由与应用状态(state)同步
react-router-dom
等等
强力推荐
nodejs 视频react 视频
1. Reselect
mapStateToProps也被叫做selector,在store发生变化的时候就会被调用,而不管是不是selector关心的数据发生改变它都会被调用,所以如果selector计算量非常大,每次更新都重新计算可能会带来性能问题。Reselect能帮你省去这些没必要的重新计算。
Reselect 提供 createSelector 函数来创建可记忆的 selector。
createSelector 接收一个 input-selectors 数组和一个转换函数作为参数。
如果 state tree 的改变会引起 input-selector 值变化,那么 selector 会调用转换函数,传入 input-selectors 作为参数,并返回结果。
如果 input-selectors 的值和前一次的一样,它将会直接返回前一次计算的数据,而不会再调用一次转换函数。
这样就可以避免不必要的计算,为性能带来提升。
例子:
import {} from 'reselect'; export const getItems = (state) => state.cart.get('items'); export const getItemsWithTotals = createSelector( [ getItems ], (item) => { return items.map(i =>{ return i.set('total', i.get('price', 0) * i.get('quantity'); }); } )创建一个记忆性的selector.这个意思是getItemWithTotals在第一次函数运行的时候将会进行运算.
如果同一个函数再次被调用,但是输入值(getItems的值)没有变化,函数将会返回一个缓存(cached)的计算结果.
如果items被修改了(例如:item添加,数量的变化,任何事情操作了getItems的结果),函数将会再次执行.
2. react-router-redux
保持路由与应用状态(state)同步npm install --save react-router-redux@next
例子:
import {Provider} from 'react-redux'; import LocaleProvider from 'antd/lib/locale-provider'; import createBrowserHistory from 'history/createBrowserHistory'; import { ConnectedRouter} from 'react-router-redux'; const history = createBrowserHistory(); <LocaleProvider locale={zhCn}> <Provider store={store}> <ConnectedRouter history={history}> <Switch> <Route exact strict path="/" component={HomePage}/> <Route path='/login' component={Login}/> <Route path='/uums/' component={Uums}/> </Switch> </ConnectedRouter> </Provider> </LocaleProvider>
3. react-router-dom
路由import {Link,Route,BrowserRouter as Router} from 'react-router-dom' (<Router> <div> <ul> <li><Link to="/">主页</Link></li> <li><Link to="/hot">热门</Link></li> <li><Link to="/zhuanlan">专栏</Link></li> </ul> <hr/> <Route exact path="/" component={App}></Route> <Route path="/hot" component={Hot} ></Route> <Route path="/zhuanlan" component={Zhuanlan}></Route> </div> </Router>)注意使用Router作为最外层标签,里面只能有一个一级子节点
用Link来导航
to指定路径
Route指定要导航到的组件,这样一个路由的基本使用就成型了。
exact用于精准匹配路径,不用exact也会匹配到匹配的路径的子路径,这样两个路由组件都会显示。
我们需要的是每次切换只会显示一个Route中指定的组件
例子:
import {Switch, Route} from 'react-router-dom'; <LocaleProvider locale={zhCn}> <Provider store={store}> <ConnectedRouter history={history}> <Switch> <Route exact strict path="/" component={HomePage}/> <Route path='/login' component={Login}/> <Route path='/uums/' component={Uums}/> </Switch> </ConnectedRouter> </Provider> </LocaleProvider>
switch
在没有Switch 的情况下。router 4 下 如果 URL 是/ 会匹配所有的Route.switch 情况,寻找匹配的,并在匹配上后停止寻找匹配并呈现匹配上的组件。
exact
当为真时,仅当位置匹配完全时才会应用对应的组件strict: bool
当为真时,在确定位置是否与当前网址匹配时,将考虑位置路径名上的尾部斜线Route props 属性
matchlocation
history
4. Immutable 作用
ES6出现原生的assign方法,但它相当于是浅copy。如何用immutableJS实现深拷贝var defaultConfig = Immutable.fromJS({ /* 默认值 */}); var config = defaultConfig.merge(initConfig); // defaultConfig不会改变,返回新值给configvar config = defaultConfig.mergeDeep(initConfig); // 深层merge遍历对象不再用for-in,可以这样:
Immutable.fromJS({a:1, b:2, c:3}).map(function(value, key) { /* do some thing */});实现一个map-reduce:
var o = Immutable.fromJS({a:{a:1}, b:{a:2}, c:{a:3}}); o.map(function(e){ return e.get('a'); }).reduce(function(e1, e2){ return e1 + e2; }, 0);修改藏在深处的值,可以这样:
var o = Immutable.fromJS({a:[{a1:1}, {b:[{t:1}]}, {c1:2}], b:2, c:3}); o = o.setIn(['a', 1, 'b', 0, 't'], 100); // t赋值 o = o.updateIn(['a', 1, 'b', 0, 't'], function(e){ return e * 100; }); // t * 100比较两个对象是否完全相等: o1.equals(o2)
5. Immutable.js fromJS()
将原生javaScript对象转成 Immutable DataObject to Immutable Map:
const plainJSObject = { title: "Go to grocery", text: "I need milk and eggs", completed: false, category: {title: "House Duties", priority: 10} }; const immutableTodo = Immutable.fromJS(plainJSObject); expect(Immutable.Map.isMap(immutableTodo)).to.be.true
使用 getIn() 获取值
expect(immtableTodo.getIn(["category", "title"])).to.equal("House Duties");
Array to Immutable List:
const plainJSArray = [ "Go to grocery", "Buy milk and eggs", "Help kids with homework", ["Buy Lemons", "Make Lemonade"] ]; const immutableTodoList = Immutable.fromJS(plainJSArray); expect(Immutable.List.isList(immutableTodoList)).to.be.true;通过getin获取值
expect(immutableTodoList.getIn([3, 1])).to.equal("Make Lemonade")
转 array为 immutable Map
const plainJSArray = [ "Go to grocery", "Buy milk and eggs", "Help kids with homework", ["Buy Lemons", "Make Lemonade"] ]; const immutableTodoList = Immutable.formJS(plainJSArray, (key, value)=>{ return value.toMap(); }); expect(immutableTodoList.getIn([3,1])).to.equal("Make Lemonade");
6. 使用moment.js轻松管理日期和时间
大家在前端Javascript开发中会遇到处理日期时间的问题,经常会拿来一大堆处理函数才能完成一个简单的日期时间显示效果。格式化日期
当前时间: moment().format('YYYY-MM-DD HH:mm:ss'); 今天是星期几: moment().format('d'); 转换当前时间的Unix时间戳: moment().format('X'); moment(item.publishtime)
7. axios api调用
import axios from 'axios'; export const gitOauthToken = code => axios.post('https://cors-anywhere.herokuapp.com/' + GIT_OAUTH + '/access_token', {...{client_id: '792cdcd244e98dcd2dee', client_secret: '81c4ff9df390d482b7c8b214a55cf24bf1f53059', redirect_uri: 'http://localhost:3006/', state: 'reactAdmin'}, code: code}, {headers: {Accept: 'application/json'}}) .then(res => res.data).catch(err => console.log(err)); export const gitOauthInfo = access_token => axios({ method: 'get', url: 'https://api.github.com/user?access_token=' + access_token, }).then(res => res.data).catch(err => console.log(err));
8. fetch-jsonp 跨域ajax请求
9. React-intl 实现多语言
React 做国际化,我推荐使用 React-intl , 这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等。知道这个库了,那让我们开始使用它10. react-document-title
动态改变title11. react-copy-to-clipboard
复制到剪切版12. remark-react
渲染富文本页面13.阿里矢量图
阿里矢量图相关文章推荐
- Brew学习笔记 - 使用工具
- cocos2d-x学习笔记14:粒子系统1:简介&工具使用
- 3,Linux学习笔记--Linux远程管理工具的使用
- Hadoop学习笔记之五:使用Eclipse插件
- Java学习笔记49:Java监控常用工具
- cocos2d-x学习笔记14:粒子系统1:简介&工具使用
- windows phone 7 学习笔记------常用小工具(一)
- (转)cocos2d-x学习笔记14:粒子系统1:简介&工具使用
- 学习笔记 (Linux下使用mysqldump工具导出数据库总结) [第三课]
- AWK工具使用学习笔记(二)
- SMP3.0学习笔记之七 使用Kapsel Logon 插件
- FastSpring学习笔记二(使用工具MyGeneration生成Model和NHibernate的代码 )
- Hadoop学习笔记之五:使用Eclipse插件
- ThinkPHP学习笔记(六)常用的连贯操作和模版的使用
- 3,Linux学习笔记--Linux远程管理工具的使用
- Linux 学习笔记_3_Linux常用命令_8_Shell使用技巧
- Windows Phone 7 学习笔记------常用工具(二)
- 【Cocos2d-X开发学习笔记】开发工具之Tiled地图编辑器的使用
- Flex学习笔记_05 使用组件处理数据和交互_01常用组件
- linux学习笔记—— 文本编辑(代码开发工具)——vim之常用命令