react-函数组件

react的组件有两种形式：函数组件和类组件。本文主要介绍下函数组件。

useState

代码片段

import {useState} from 'react'
function example(){
const [num, setNum] = useState(1)
  return (
    <div>test</div>
  )
}

使用描述

• 1.[num, setNum] = useState(1)， useState(1)返回变量，以及变量赋值函数，变量默认值num=1。
• 2.作用域：组件函数中使用变量num，通过setNum(updateData)函数更新num值
• 3.useState()可设置任何类型的值作为变量的默认值，包括函数
  [num, setNum]=useState(()=>{return 1})

useEffect

代码

import React, {useState, useEffect} from 'react'
function ThemeButton() {
    const [flag, setFlag] = useState(true)
    //A:对应类组件的生命周期函数componentDidMount + componentDidUpdate
    useEffect(() => {
        console.log('组件首次加载+更新')
    })
    
   //B:对应类组件的生命周期函数componentDidMount 
    useEffect(() => {
        console.log('组件首次加载')
    }, [])

   //C:对应类组件的生命周期函数componentDidMount + componentDidUpdate(只有flag更新才会调用)
    useEffect(() => {
        console.log('组件首次加载 或 flag发送变化')
    }, [flag])

   //D:对应类组件的生命周期函数componentWillUnmount 
    useEffect(() => {
        console.log('组件首次加载+更新')
        return ()=>{
            console.log('组件注销')
        }
    })
    return <div>test</div>
}

useEffect的功能对应类组件的生命周期函数，具体参考代码给予明确的举列。
1.可以实现类组件的componentDidmount, componentDidupload, componentWillunmount
2.实现部分页面的刷新，参考代码C

useCallback

useCallback的目的是在于缓存每次渲染时inline callback的实例，这样方便配合上子组件的shouldComponentUpdate 或者 React.memo 起到减少不必要的渲染的作用