初入React小结

核心

• 虚拟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就是最新的

• 组件销毁阶段

  1. unmount. componentwillunmount

图片解析：