React

110 阅读3分钟

虚拟DOM

1本质是object类型的对象(一般对象) 2虚拟DOM比较轻,因为虚拟dom是react内部在使用,无需真实dom上那么多的属性 3虚拟dom最终会被react转化成为真实dom,呈现在页面上

JSX语法规则

image.png

语句与表达式的区别

image.png

 在jsx中的{}中只能写表达式
 严格模式下,禁止自定义函数的this指向window,打印this会出现undefind

函数式组件

image.png

image.png

image.png super的作用是帮忙调用父类的构造器,必须写在最前面,这样就可以直接拿到父类身上的属性

image.png 重写从父类继承过来的方法

image.png 总结

类组件

image.png

react的事件绑定

image.png

类中方法的this(重点)

image.png

state

简写 image.png 类里面可以直接写赋值语句,这种写法意思就是往实例身上追加一个属性。 如果初始化的数据是从外面传入的,那么必须要写构造器

image.png

总结

image.png

props

知识点复习 image.png

image.png

对props进行限制,限制传入的值的类型

image.png

image.png

image.png

props是只读的,不可以修改,如果要修改就从传入的源头去修改

image.png static的用处就是在组件自身加东西

类组件中的构造器与Props

image.png

image.png 结论就是,类组件中的构造器基本是不需要写的,开发中基本很少很少出现需要写构造器的情况。

函数组件

image.png

image.png

refs

字符串的ref写法 image.png 这个字符串的ref是比较好理解的,但是因为存在效率问题,目前已经过时了,之后也有可能会被react官网移除

回调的ref的写法

image.png 把ref写成回调函数,react会自己帮你调用这个函数,并且把当前节点当成实参传入了,然后保存在当时实例上。

image.png 但是写这种内联的形式会在组件被更新的时候调用两次,如果要改变就要写成绑定函数的写法,不过react官方也说了在大多数情况下是无关紧要的,开发中依然是使用内联的写法比较多

createRef的写法(官方最推荐的写法) image.png

事件处理

image.png

非受控组件

现用现取就是受控组件,不需要存state

受控组件

页面中通过操作将值存到状态里去,当需要值的时候,直接去状态里去取,这就是受控组件

函数柯里化

image.png

生命周期函数

image.png

shouldComponentUpdate生命周期函数不写react默认返回true,写了之后返回false就不更新,每次更新都会去走这个函数,只有得到它的确认才可以往下执行。

forceUpdate是强制更新,相当于状态就算不改变也更新一下,可以理解为手动刷新

image.png

image.png 新生命周期函数图,弃用了3个带will的生命周期函数

Diffing算法

Diffing算法的原理

image.png

组件化编码流程

image.png

脚手架配置代理

image.png

image.png

image.png

image.png

image.png

image.png

消息订阅与发布

image.png 要销毁订阅的事件,否则可能会内存泄漏

rem适配

image.png

image.png

image.png

redux

image.png

context传值

可以实现爷孙组件传值

image.png

image.png

image.png

image.png

数组方法reduce

image.png

checked和defaultChecked

image.png