react之前就有有学习过,不过心态毕竟不够虔诚,比较的蜻蜓点水,够用是够用,总感觉有团迷雾在中间。
最近阅读了《react精髓》一书;总的来说 这本书的结构可以分为三块:
1,react基础原理和知识,讲的很棒;
2,react测试单元用例,这个回头需要单独的学习下,毕竟书有几年了,担心api跟不上;
3,react 配合flux的使用,这块我觉得目前的用的都是redux,flux了解一下原理就好,毕竟算是不流行,可以先略过;
所以我觉得这本书讲的最好的就是对于react基础知识的讲义;很精髓 确实很透彻;
还有我觉得 目前的学习方式来讲 :
1,基础的原理的知识,还是书本上讲的透彻 ;
2,就框架的实践课程来说,还是去看视频吧,这种实践性的项目课程毕竟API更新太快,前端跟娱乐圈一样~!
3,所以,想要学好一门技术,理论加实践,缺一不可,需要做到知行合一,才能找到自己的最佳实践。
下面的话我就对于这本书讲的很棒的地方做个总结,主要是基础知识那部分的总结,测试用例和flux就不说了,感觉他讲的跟不上前端大爆炸的节奏;
第一个知识点: 虚拟dom实现单向数据流;
首先我们的页面的 从静到动的交互无非两种 ,一种就是与ui组件去交互,还有一种是与后台的数据交互;
这样就需要底层的数据模型去控制这两种交互的 实现;数据流的实现又分为:1,双向数据流,2,单向数据流;
双向数据流的实现有两种:1,键值观察,像backbone,ios的实现就是这样的;
2,脏值检测 比如angular;
单项数据流的实现是通过虚拟dom去实现的; m -vm -v ,所谓的mvvm框架 中vm 就是指的虚拟dom ;
react ,vue都是虚拟dom。来看看它是如何工作的;
首先 数据模型m发生变化,传递到顶层的虚拟dom上;顶层的虚拟dom经过计算 ,再去给v 视图 ui发生变化;我不止一次的听人说起react的虚拟dom相当的高效;
这种模型就是: m->vm(虚拟dom)->v,这个就叫做单向数据流;
第二个知识点,关于props ;state
props 是用来父级往子级上传递属性用的;
state 是属于当前组件的状态存储的;是属于组件私有的;state的改变触发虚拟dom的重新计算(render),so尽量利用react的优势吧;
父向子组件传参 用props;
子向父传参靠父级向自己传的回调函数入参来传递,这边的单向数据流:子组件通过父组件传过来的函数传参到父组件->触发父组件的state改变->重新渲染子组件,这样来达到一个单向数据流的循环走向; 看似是v-m-vm-v 其实他还是m-vm-v;
第三个知识点: 关于设计架构的问题:
一般的spa单页面架构设计组件的时候有两种模式:
1,从顶至下;先做根组件;然后逐渐补充,逐渐羽翼丰满,形成一个app;
2,从下至顶;先设计好基本的组件,然后把他们拼装起来 ,组合成一个app;
一般的设计会采用第一种,因为第二种战术策略不够灵活;
第四个知识点:
整体组件的权限设置;
在这边的话我还是更喜欢那个老师的讲义---木偶组件和智能组件(无状态组件和有组件状态);
木偶组件,没有自己的state;只接受智能组件的数据,机械的负责页面的渲染;
智能组件,有自己的state,承担数据流的分配和传递;负责指挥木偶组件的渲染;
第五个知识点:
书上有个模型让我彻底明白了 为啥需要 状态的管理库; 像 react 和vue 这种 都是一层一层的传递; 这样的在大型的web应用中, 如果嵌套十层的话,会不会传死 ,祖爷爷组件传给重孙组件这个过程 维护的代价是高昂的; 而且很2 ,效率极低;所以状态管理工具在此时就出现 我一直 理解他就是个类似全局变量的存在; 属于公正的第三方权威中心化的东西;由我来为你们组件分配状态,不在需要一层层的传递了,直接去和顶层数据模型通信;简单而强大;
第六个知识点:
关于react的生命周期;一般的教程上都是balabala说说完事了。在这本书上我看到了把生命周期讲的如此 细腻 和 精巧;
为啥要有生命周期,因为react为了让开发者在开发中增加更多掌控力;试过某项异步的操作找不到回调函数的痛苦吗;如果经历过就能理解一个标准的回调的优美和准确了;
然后 花开两朵 各表一枝;
1,组件dom操作类生命周期:就是 组件 的生成和移除dom操作相关的hook函数:一个组件的这样的操作下来步骤如下:
(1)getInitialState &&getDefaultProps
函数return 一个对象 就是state的初始化值&&props的初始化值
(2)componentWillMount;
组件将要被插进实际dom树里的回调;
【在这个地方setState;会导致render;下面还有一个render,看似是会render两次;react有优化;这里renden只render一次】;
(3)render ‘他不是生命周期函数 是来客串说明问题的’;
当前正在插入dom 树 。。。。
(4)componentDidMount
组件已经被插入实际dom树里的回调;
这个位置是整合react或者其他库最佳的位置,因为实际dom已经生成,例如jq的库 ;需要操作实际的dom;就是在dom生成以后才能去操作;发请求就在这个位置~;
(5)componentWillUnmount
组件即将被销毁的回调;组件就要被销毁掉了 ,之前欠下的帐,比如绑定到global对象上的定时器啊 addEventListener,全局变量之类的,以后也用不到了,还会影响后面的性能。所以就要释放掉这部分内存。
最佳实践的2步机制:
在componentDidMount中创造他们;
在componentWillUnmount中销毁他们;
2,组件更新类的生命周期:就是组件 在触发了数据流;需要更新dom时候的hook函数;一个组件更新的操作下来步骤如下:
(1)componentWillReceiveProps
当组件从父组件接收到新的属性时候会调用;能接收到即将更新的props,可以比较当前的和即将到来的props 作为条件来改变state,在这个组件内 无论多少次setState,最终都会被整合到一起 作一次 render;
(2)shouldComponentUpdate
接受2个入参:下一个props和下一个state;
可以通过规则来设定是否向下进行去渲染;
return true ,继续渲染,return false 到此为止了
(3)componentWillUpdate,
接受2个入参:下一个props和下一个state;
不能在这个函数中使用setState;如果需要;请在componentWillReceiveProps中使用
(4)render ‘他不是生命周期函数 是来客串说明问题的’;
当前正在更更新dom 树 。。。。
(5)componentDidUpdate
接受2个入参:上一个props和上一个state;
除此之外还有一个生命更新类周期方法 --forceUpdate ,可以跳过shouldComponentUpdate直接更新,实践中不推荐使用。