专业编程基础技术教程

网站首页 > 基础教程 正文

“脸谱” 前端框架React学习笔记(零)-- 预备篇

ccvgpt 2025-02-03 11:37:02 基础教程 5 ℃

这几天主管让用react对一些页面进行重构,所以重新看了一下react,并做一些笔记。

虽然现在才写关于react的东西比较晚了,但是至少还没出1.x版本,也还算可以。由于自己水平有限,所以关于效率以及diff算法的东西不去涉及,仅仅是用法以及自己的一些理解。

“脸谱” 前端框架React学习笔记(零)-- 预备篇

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文档中没有的方法。

  1. var React = {

  2. Children: { //对 this.props.children 提供工具

  3. map: ReactChildren.map, //遍历children 并返回

  4. forEach: ReactChildren.forEach, //遍历children 不返回

  5. count: ReactChildren.count, // 返回children中的组件总数

  6. only: onlyChild //返回children中的仅有子级,否则抛异常

  7. },

  8. Component: ReactComponent,

  9. DOM: ReactDOM, //提供组件封装,即jsx所做的事情

  10. PropTypes: ReactPropTypes, //组件types 用于校验组件

  11. createClass: ReactClass.createClass, //创建一个组件

  12. createElement: createElement, //指定类型(html标签或者react组件标签)的 element

  13. cloneElement: cloneElement, //顾名思义

  14. createFactory: createFactory, //指定类型的 reactelements

  15. createMixin: function(mixin) { //插入一个mixin

  16. // Currently a noop. Will be used to validate and trace mixins.

  17. return mixin;

  18. },


  19. constructAndRenderComponent:
    ReactMount.constructAndRenderComponent, //就是一个render,只不过把props单拆出来了,目前来看 并没有什么卵用


  20. constructAndRenderComponentByID:
    ReactMount.constructAndRenderComponentByID, //同上 byID

  21. findDOMNode: findDOMNode, //顾名思义

  22. render: render, // 就是render呗

  23. renderToString:
    ReactServerRendering.renderToString, //输出string 调试可用

  24. renderToStaticMarkup:
    ReactServerRendering.renderToStaticMarkup, //去掉react痕迹的 html string ,用react当做工具构建静态页面可用

  25. unmountComponentAtNode:
    ReactMount.unmountComponentAtNode, //销毁组件

  26. isValidElement:
    ReactElement.isValidElement, //判断是否为一个 reactelement

  27. /*

  28. *context 是一组存在于一个element以及其子孙element里的属性 出现在 0.13版本

  29. *传递属性的方式有三种

  30. *一种应用 props 逐层的传递给子孙element

  31. *二是应用flux模式 储存在 store里

  32. *三是应用这里的方法,储存在context里

  33. *参考文章:
    https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

  34. *文档给的case 太sb

  35. *

  36. *可用 this.context 获取 ,算是除了 state props外 另一种参数

  37. */

  38. withContext: ReactContext.withContext,

  39. // Hook for JSX spread, don't use this for anything else.

  40. // 它不让用就不用呗··· 自己require

  41. __spread: assign

  42. };

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领先。

点击阅读全文获得更多内容

Tags:

最近发表
标签列表