react高级特性

1、函数组件

输入props 输出jsx 没有实例 没有生命周期 纯组件

2、非受控组件

特点 组件的value与state没有关系, setState实现不了的
eg：文件上传、富文本编辑器

• ref（inputRef.current.value）
• dom元素
• defaultValue 和 defaultChecked

3、Protals

使用protals把元素渲染到body上

ReactDOM.cerateProtals(<input/>,document.body)

使用场景：

• overflow：hiden
• 父组件z-index太小
• fixed需要放在body第一层
• 应对css兼容浏览器的问题

4、context

使用场景： 定义在最外层的基础数据

const Context = React.createContext()
<Context.Provider value={}></Context.Provider>
<Context.Consumer></Context.Consumer>

5、异步组件（懒加载）

1. import (react 不这么用， vue用的比较多）
2. React.lazy
3. React.Suspense

6、性能优化

1. 使用异步组件
2. SCU

// 默认返回true，返回false就不渲染
shouldComponentUpdate(nextProps, nextState）{
	
}

4. PureComponent 和 React.memo

class Table extends React.PureComponent {}// 类组件的使用

export default React.memo(FormWrap, likeScu)// 函数组件的使用

react默认父组件更新，子组件亦无条件更新。所以性能优化对react更加重要
PureComponent ，SCU中实现了浅比较
memo就是函数组件中的PureComponent
尽量不要做深比较（比较耗费性能）

4. 不可变值 immutable.js

基于共享数据（不是深拷贝），速度性能好，类似深拷贝数据
按需使用

7、高阶组件HOC

组件公共逻辑的抽离：

1. mixin（已被react废弃）
2. 高阶组件HOC （类似工厂的一种模式）
   redux connect就是高阶组件
   （模式简单 但会增加层级）
3. Render Props