核心
-
虚拟DOM(Virtual DOM)
-
Diff算法(虚拟DOM的加速器,提升React性能的法宝) 在虚拟DOM上实现
-
虚拟DOM(Vitural DOM)
React将DOM抽象为虚拟DOM,虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率
为什么用虚拟dom,当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大
-
React 不是一个 MVC 框架,仅仅是视图(V)层的库
Jsx
所有的html,css都可以写在js中,这就是jsx的用法。
1.构造函数必须首字母大写
jsx语法转成js时 首字母大写当成组件 首字母小写当成html标签渲染页面
传值,使用props接受
react.CreateElement(标签,标签属性,内容)
类组件/构造函数组件
无状态组件:构造函数组件 --接受props参数,接受数据
有状态组件:Class组件
区别:
在需要使用一些额外的特点的时候比如 state 和 lificycle 的情况下,就应该使用 Class 来定义组件
1.传值 props,
接受时,class可以不接受,直接使用this。props取值
构造函数,必须接受参数,使用props就可以谁去传值
2.class有自己的数据,也就是state状态,而且可以修改:有自己的生命周期
构造函数组件中没有state,没有生命周期
3.props的数据只读,不可以修改:state,可以修改
渲染列表
- 在jsx中用map渲染
- <React.Fragment>:相当于根目录占位符
- 使用jsfor循环
- 注意:列表key
路由
:router link switch route提供的路由组件
Router/BrowserRouter —index中包裹app 引入一次就行
switch ->route 显示组件的位置/配置路由规则
link >添加跳转链接
生命周期
-
组件支出,初始化数据,又defaultprops,this。state
-
组件和藏剑阶段:三个周期:componentWillMount丶render丶componentDidMount
-
组件运行阶段:
props->componentWillreceiveprops
shouldComponentUpdae—state或者componentwillreceiveprops运行了
componentwillupdate–将要更新虚拟与真实DOM都是旧的
render虚拟Dom更新了
componentDidUpdateDOM就是最新的
-
组件销毁阶段
- unmount. componentwillunmount