这几天主管让用react对一些页面进行重构,所以重新看了一下react,并做一些笔记。
虽然现在才写关于react的东西比较晚了,但是至少还没出1.x版本,也还算可以。由于自己水平有限,所以关于效率以及diff算法的东西不去涉及,仅仅是用法以及自己的一些理解。
react现在也算是热门了,而且反响也不错,这里先列出学习react的一些准备工作。
1. 和其他js库的比较
1)与mvc框架的比较:
当然它只是一个V,但依旧能够达成mvc(以及量身定做的flux),与其他mvc框架相比,他们的相同点是都是为了帮你去维护view层,但是react用了自己特有的一种方式。
而且react更加的自由,对其余js库的兼容性做的也足够好。当然react很空,如果想去写完整的应用呢,很多地方需要自己重新去写。
2)与jquery:
无论什么时候,jquery都有它的勇武之地,如果说jquery是得到dom并操作它,那么react就像是生成dom并同时赋予逻辑。前者是工具,后者更像是一种规则。虽然两者好像全不相干,但这正是我们应该比较的地方(sorry,我在看国王杯,逻辑有些混乱···)
jquery作为html+css+js编程的极致,对分离的html以及js代码做到的已经非常好了,而到了现在更多的web应用的时代,jquery渐渐便的力不从心(boot只是模板,解决不了逻辑上的复杂),而react做的,就是把视图以及视图逻辑放在一处处理,让视图逻辑不至于分散各处。而这些都不是jquery擅长的。
2. 你应该了解的react的特点
1)组件化的编程思想,你的项目就是不同组件组成的组件树,不同的组件间相互独立,所以当你哪里出了问题时,就去更改哪里的组件即可,因为不同的组件间,只有state,props以及context(.13a 加入)在传递。你做的只是用render控制页面的展示,然后通过传递以及改变state,props,context来控制页面的改变。这其实就是react的“全部”。
2)react要求你讲html代码写在js里,或者或react强迫你这样做,因为react是通过diff算法对两棵虚拟dom树进行比对,以最小的代价更新dom元素,所以你不需要自己手动的去写html标签。
当然这也是有好处的,它将你的视图代码与你的视图逻辑代码放在一处管理,无论是日后的维护还是修改,都更加的清晰。
3)当然,如果你想要更好的体验,记得用jsx
4)无论react多么神奇,它都是用js写出来的,所以要用js的方式解决问题,比如看下面这段代码来找到API文档中没有的方法。
var React = {
Children: { //对 this.props.children 提供工具
map: ReactChildren.map, //遍历children 并返回
forEach: ReactChildren.forEach, //遍历children 不返回
count: ReactChildren.count, // 返回children中的组件总数
only: onlyChild //返回children中的仅有子级,否则抛异常
},
Component: ReactComponent,
DOM: ReactDOM, //提供组件封装,即jsx所做的事情
PropTypes: ReactPropTypes, //组件types 用于校验组件
createClass: ReactClass.createClass, //创建一个组件
createElement: createElement, //指定类型(html标签或者react组件标签)的 element
cloneElement: cloneElement, //顾名思义
createFactory: createFactory, //指定类型的 reactelements
createMixin: function(mixin) { //插入一个mixin
// Currently a noop. Will be used to validate and trace mixins.
return mixin;
},
constructAndRenderComponent:
ReactMount.constructAndRenderComponent, //就是一个render,只不过把props单拆出来了,目前来看 并没有什么卵用
constructAndRenderComponentByID:
ReactMount.constructAndRenderComponentByID, //同上 byIDfindDOMNode: findDOMNode, //顾名思义
render: render, // 就是render呗
renderToString:
ReactServerRendering.renderToString, //输出string 调试可用renderToStaticMarkup:
ReactServerRendering.renderToStaticMarkup, //去掉react痕迹的 html string ,用react当做工具构建静态页面可用unmountComponentAtNode:
ReactMount.unmountComponentAtNode, //销毁组件isValidElement:
ReactElement.isValidElement, //判断是否为一个 reactelement/*
*context 是一组存在于一个element以及其子孙element里的属性 出现在 0.13版本
*传递属性的方式有三种
*一种应用 props 逐层的传递给子孙element
*二是应用flux模式 储存在 store里
*三是应用这里的方法,储存在context里
*参考文章:
https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html*文档给的case 太sb
*
*可用 this.context 获取 ,算是除了 state props外 另一种参数
*/
withContext: ReactContext.withContext,
// Hook for JSX spread, don't use this for anything else.
// 它不让用就不用呗··· 自己require
__spread: assign
};
3. 在学习react前应该做的准备
1)由于react很“干净”,很多工具——比如touch,ajax,数组操作等——都需要你去找外来的,所以你需要用到包管理机制,让你不必为了这些东西操心(近期应该会更一篇关于打包的文章,不是grunt了,换成gulp了,嘎嘎),而且如果你要读源码,也应该去读npm的包文件。
推荐使用browserify,他用的node npm的包管理方式,让你可以在web端用到很多npm里的包,而且与node工程师的合作也会很快(我猜的···)
webpack也很好,github上挂的很多react的demo都是用它打的包。
2)jsx,真的差很多,就可读性而言。
3)了解flux,初期只需要了解,你需要知道react在flux里扮演的角色。
4)学一点lambda表达式,虽然我忘记在哪里看到过它了。
4. React基础演示
React框架基础使用和演示代码,请参考如下地址,点击播放可以了解相关编程过程:
http://www.gbtags.com/gb/rtreplayerpreview/168.htm
以上,是给react的笔记开一个头,也阐述一下自己一些浅显的理解,没有什么代码可能说的也很混乱(毕竟在看球···)。react的思想很简单,也正因为简单,所以也才直观,它不大而全,但也正因为如此,你做什么功能都不必绕弯子,他赋予你的不是组件,而是写组件的方法,相信社区贡献越来越多后,用react编程会很轻松。
写在西甲国王杯,我村2:0领先。
点击阅读全文获得更多内容