组件

组件是一个接收 props 并返回 React 元素的函数或类。

类组建

已经废弃了，先不学

函数组件

接收 props，返回 JSX/TSX 的就是函数组件。

底层原理

事件触发改变状态，会重新渲染组件。这个过程是同步把更新添加到render里，异步启动重新渲染这件事。如果多次状态改变，直接取最后的。

hook

给函数组件添加状态，生命周期，副作用。一般为 useXxx，只能在函数组件或者自定义 hook 里有。

原本函数组件只能做展示。状态，生命周期只有类组件才有。

useState

React 提供的一个状态管理的 hook。

注意对象不可变性，如果要改对象要造新对象。

useEffect 副作用

副作用就是对数据或者组件操作时，触发这些函数。

可以做到数据更新时触发，组件挂载时触发，组件更新时触发，顺序也是这个顺序。

数据更新

    //状态副作用
    useEffect(()=>{
        console.log("当前计数"+cnt);
    },[cnt])

组件挂载

组件更新

执行顺序

useRef

默认导出与具名导出

默认导出

export default 是默认导出。一个文件只能默认导出一个ES Module ，所以导出时不用写名字，导入时可以随便写名字，因为只有一个。

// utils.js
const formatTime = () => {}

export default formatTime

其他组件引入时自定义名字

import mytime form './utils'

具名导出

export const 是具名导出。一个文件可以具名导出多个ES Module ，所以导出时需要指定名字，导入时要指明名字

//utils.js
export const formatTime = () => {}
export const formatDate = () => {}

其他组件引入时要用原名

import { formatTime, formatDate } from './utils'

总结

特点

适用场景