react源码探索
react核心部分为
- 虚拟dom对象
- 虚拟dom差异化算法
- 单向数据流渲染
- 组件生命周期
- 事件处理
1) 虚拟dom对象:
reactDOM.render(args,element);
这个方法第一个参数接收三种形式的内容的
第一种:字符串
第二种:由createClass创建的对象,使用createElement处理
第三种:直接有createElement创建的对象
这些还未调用render方法进行渲染就是虚拟dom了
2) 虚拟dom差异化算法
react的更新机制
1.拿新的节点树和以前老的节点数对比,找出他们的差别
2.找出差别后,再一次性的去更新。
react的优化机制是根据key是否相同,如果不同则直接重新渲染,如果一样则在原来该节点实例上进行更新即可
3)单向数据流
react每次调用setState,如果数据有差异,都会触发render。每次调用这个函数之后都会从父组件递归检测子组件数据差异,
添加到一个差异对象里保存,如果是给每一个对象标记(移动,删除,更新)。然后在对所有需要改动的进行dom操作
完成更新
4)组件生命周期
react每一个自定义组件都有它的生命周期,下面是根据react生命周期对以下方法的实现原理
componentWillMount 在实例化前如果有这个方法则调用
compontDidMount 在实例化render之后进行调用此方法
componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate 调用setState,更新数据前,有这些方法则调用
这里大概介绍这些,当你明白react的一个渲染过程是怎么实现的,很自然你就知道,这些方法应该放在哪里调用,如何实现
5)事件处理暂时还未完成解析
这个是我的github地址,还未完成,后面会更新的,博客也会持续更新具体详细解析
https://github.com/llcMite/reactTest.git
后面了两个是我学习的博客地址,感谢两位作者
http://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_one/
https://github.com/sven36/LittleReact