React几个知识点

一、授控组件 【input】--- 表单里面的值和state关联起来了
1、value
2、onChange事件去改变setData

二、非授控组件：【input 的值和 state没有关系、常见的有上传文件 file】

1、ref

2、defaultValue 和 defaultChecked

3、手动操作DOM元素

1.png

ps: 也可以这样操作

2.png

使用场景：
1、必须手动操作DOM元素、setState实现不了
2、上传文件 <input type=“file” />
3、某些富文本编辑器、要基于Dom操作

二、class组建和函数组件的区别
1、函数组件：
a、纯函数、输入props 输出JSX
b、没有实例、没有生命周期、没有state
c、不能扩展其他方法

三、React中portals【传送门】
组件会默认按照既定层次嵌套渲染？
如何把组件渲染到父组件以外？
使用场景： overflow: hidden、z-index值太小、fixed需要放在body第一层级

四、异步组件 [组件比较大、路由异步加载等]
1、import()
2、react.lazy
3、react.suspense

3.png

五、context- （上下文）
公共信息（主题颜色、语言）如何传递给每个组件？
props 【太繁琐】
redux 【小题大做】

5.png

6.png

六、SCU ---- shouldComponentUpdata

  PureComponent 和 React.memo

  不可变值 immutable.js

7.png

React 默认： 父组件有更新、子组件则无条件更新--- 所以性能优化对于 react更为重要
SCU 也不一定每次都要用

SCU中进行浅比较 而不建议深度比较 所以有了 PureComponent

七、关于组件公共逻辑的抽离

1、mixin ---- 已弃用

2、高阶组件---详见 HOCdemo.js

8.png

9.png

3、render Props

10.png

八、渲染列表、为什么要加key

11.png