一、授控组件 【input】--- 表单里面的值和state关联起来了
1、value
2、onChange事件去改变setData
二、非授控组件:【input 的值和 state没有关系、常见的有上传文件 file】
1、ref
2、defaultValue 和 defaultChecked
3、手动操作DOM元素
ps: 也可以这样操作
使用场景:
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
五、context- (上下文)
公共信息(主题颜色、语言)如何传递给每个组件?
props 【太繁琐】
redux 【小题大做】
六、SCU ---- shouldComponentUpdata
PureComponent 和 React.memo
不可变值 immutable.js
React 默认: 父组件有更新、子组件则无条件更新--- 所以性能优化对于 react更为重要
SCU 也不一定每次都要用
SCU中进行浅比较 而不建议深度比较 所以有了 PureComponent
七、关于组件公共逻辑的抽离
1、mixin ---- 已弃用
2、高阶组件---详见 HOCdemo.js
3、render Props
八、渲染列表、为什么要加key