React方法论

按照目前学习进度不定更新

  • react渲染的效率,看起来是全体的渲染,其实react在虚拟dom上的处理简直完美。它会过滤掉那些原来就有的东西,不去全体地重复渲染一遍。
  • 即将进入实战,React至今的个人看法
    • React像一个中央集权的国度。但是这样的执行力很强(限制了xss攻击),效率很高,管理层面清晰度也很高。
    • Smart组件 = Dumb组件 + 部分数据的管理 Smart组件就是地方官员,能够从上层获取一定的资源,之后由Dump组件分发 Dump组件通过考公务员成为地方官员(哈哈哈哈)
    • 经过了权力的分配,ReactApp已经没有了很多逻辑。也可以这么说,它成为了一个国家的象征。所以,它是结构清晰而简单的。大型项目中,这是必要的
    • 财政由一个地方存储,store,由固定的程序分配,dispatch 。 没有一系列的手续,你是不能从国库中获取资源的。 所以它很安全,很有序。
    • 最后挂载上去的还是由ReactDOM来过载,ReactDOM就像是土地分配的。它是上帝,它决定了哪块王国的土地在哪里生长。
    • 一个国家的生成是科学的。它主要有(常用的)constructor来构建(这就是一个王国的基础资源),componentWillMount来决定虚拟DOM的部分建设(国家的方法论),render是正式国家的建造,componentDidMount是国家初成,componentWillUnmount是国家新的改革方针,比如说计时器就相当于建国初期的军队,建国之后,安定下来了军队一定要取消,不然会出事情(关于componentWillMount加上的计时器要在componentUnMount取消)

主要细节的学习

  • 总算看懂了React小书最后一节的评论实战,它的意思是其实commentApp已经不用来当做Smart组件了,它将逻辑分发给commentInput和commentList,而commentApp就像皇帝一样,只要躺着分配人力资源就行了,做事的并不是皇帝,皇帝只要会识人就够了。而redux就像是一个国家的财政大臣,用来存储数据资源,分配资源。

  • 为什么要写一个component中的dump(呆呆的组件)又要写一个containers这样的高阶组件呢(Smart,机智的逻辑处理组件) 。 为了重用,写两个其实只用改动部分,而逻辑处理需要的是聪明的组件。所以,为了任务,我们需要smart的container,为了整个团队的效率我们需要dump的组件。

  • React的中央集权式的管理,这样有什么好处呢,所有的props逐级递交,显得非常有秩序。

  • 某个属性比较有风险,React团队就将他们设置的比较难以使用,这还是真是好玩哈哈。符合人懒惰的天性。

  • 一切都是那么顺理成章。所以给人的感觉就是React是那样的人性化和完美。而也正是觉得顺理成章才能更好地理解这门语言。
    运行的过程 constructor=>componentWillMount=>render=>componentDidMount=>componentWillUnmount.
    而关于计时器的部分,如果用一个state控制它的装载和卸载.如果这个时候没有componentWillUnmount,就会报错,因为定时器还在运行,因为JS的闭包特性,这样会导致严重的内存泄露.
    所以,我们的componentWillUnmount就诞生了,它是出来救场的!

  • React中的所有状态都被React写死了,或者这么说,它让html的控件都为React掌控,也就是说,安全性大大提高了。所有的Input的输入都由 setState 来控制,真是太神奇了。

  • 相比Vue来说,React写的确实不是那么痛快,也许是我不熟,还有编辑器的锅吧。

  • 关于状态提升,比如React小书中的评论的例子。由父组件CommentApp来分发commets状态给CommentList,这样的好处是,当出现了CommentList2的时候它也能够收到传来的信息。但是,如果我们的CommentApp中又出现了上级就会出现非常尴尬的局面了。我们不能总是通过修改props的拥有者。于是就有了Redux。一切都那么顺理成章。

  • 关于react和react-dom的分开也是,React不只是服务于网页PC端,它还有它其他的业务,所以,把他们分开使得它们更有针对性而不臃肿。

  • React里面的setState是异步的,这里有个坑,前几天刚研究完异步的callback和promise,今天出现问题了马上想到是这个哈哈哈。查看链接:https://segmentfault.com/q/1010000007343714

posted @ 2017-07-13 14:30  海客无心x  阅读(189)  评论(0编辑  收藏  举报