一、React.Component、React.PureComponent、React.FC的使用与区别

1.React.Component

包含最常用的render(),componentDidMount(),shouldComponentUpdate…
shouldComponentUpdate(nextProps, nextState) 判断React组件的输出是否受当前state或props更改的影响，只要组件的props或者state发生了变化，就会重新构建virtual DOM，然后使用diff算法进行比较

2.React.PureComponent

React.PureComponent与React.Component几乎完全相同，也包括render、生命周期等。但React.PureComponent通过props和state浅对比来实现shouldComponentUpdate().如果对象包含复杂的数据结构，它可能会因深层次的数据不一致而产生错误的否定判断

React.Component = shouldComponent(false) + React.Component

3.React.FC React.FC<>的在typescript使用的一个泛型,这个泛型里面可以使用useState

eg

const Certificate: React.FC<Props> = props => {
    const [showUpload, setShowUpload] = useState<boolean>(false)
}

二、dva用法

connect dva提供了connect方法，将model和component串联起来

使用

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

mapStateToProps：更新props————>作为输入源。返回一个对象，key为UI界面对应的名称，value为state处理的结果

mapDispatchToProps：更新action————>作为输出源。触发action更新reducer，进而更新state，从而驱动参数1变化，引起UI数据的变化

Dispatch dispatching function 是一个用于触发 action 的函数，action 是改变 State 的唯一途径，但是它只描述了一个行为，而 dipatch 可以看作是触发这个行为的方式，而 Reducer 则是描述如何改变数据的

使用方法

dispatch({
      type: 'role/insert',
      payload: {} // 需要传递的信息,
      callback: (response: any) => {
        if (response) {
          message.success('保存成功');
        }
      },
    });

三、React上下文Context的使用

context（上下文）旨在为React复杂嵌套的各个组件提供一个生命周期内的统一属性访问对象，提供一个树形结构内的一个数据共享容器

使用Context方式进行数据的共享，各个树状组件均可通过统一的Consumer统一访问Consumer共享数据

const EditableCOntext = React.createContext({});
const form: any = useContext(EditableContext)

四、在函数组件中使用生命周期函数

useEffect(()=>{},[])

主要的是第二个参数是空数组[],只会在组件挂载后运行一次。

useEffect 模拟函数组件的生命周期函数

1.模拟componentDidMount // 进入页面后数据初始化

2.模拟componentDidUpdate

3.模拟componentWillUnMount