函数式组件中常用的hook

useState()，状态管理钩子。通过在函数组件中调用useState，就会创建一个单独的状态。

useEffect()，副作用钩子。它接收两个参数， 第一个是进行的异步操作， 第二个是数组，用来给出Effect的依赖项

useContext()，共享钩子。该钩子的作用是，在组件之间共享状态。

useReducer()，Action 钩子。useReducer() 提供了状态管理，其基本原理是通过用户在页面中发起action,
从而通过reducer方法来改变state, 从而实现页面和状态的通信。

useRef()，获取组件的实例；渲染周期之间共享数据的存储(state不能存储跨渲染周期的数据，因为state的保存会触发组件重渲染）

useMemo记忆组件和useCallback记忆函数：可缓存函数的引用或值，useMemo用在计算值的缓存，注意不用滥用。经常用在下面两种场景（要保持引用相等；对于组件内部用到的object、array、函数等，如果用在了其他 Hook 的依赖数组中，或者作为 props 传递给了下游组件，应该使用useMemo/useCallback）
useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你。

useMemo和useCallback都是reactHook提供的两个API，用于缓存数据，优化性能；两者接收的参数都是一样的，第一个参数表示一个回调函数，第二个表示依赖的数据。

共同作用
在依赖数据发生变化的时候，才会调用传进去的回调函数去重新计算结果，起到一个缓存的作用

两者的区别
useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降。
useMemo

import React, { useState, useMemo } from 'react';
 
function Info(props) {
  let [personalInfo , setPersonalInfo] = useState({
    name: 'kevin kang',
    gender: 'male'
  })
 
  function formatGender(gender) {
    console.log('---调用了翻译性别的方法---')
    return gender === 'male' ? '男' : '女'
  }
 
 
  // BAD 
  // 不使用useMemo的情况下，修改其他属性，也会重新调用formatGender方法，浪费计算资源
  // let gender =  formatGender(personalInfo.gender)
 
  // GOOD
  let gender = useMemo(()=>{
    return formatGender(personalInfo.gender)
  }, 
  [personalInfo.gender])
 
  return (
    <>
        <div>
          姓名： {personalInfo.name} -- 性别:  { gender } <br/>
          <button onClick={ 
            ()=> { 
              setPersonalInfo({
                ...personalInfo,
                name: 'Will Kang'
              }) 
            }  
          }> 点击修改名字</button>
        </div>
    </>
  )
}
 
export default Info

useCallback

import React, { Component, useState, useEffect, useCallback } from 'react';
 
// BAD，不进行优化的时候
// function ListItem(props) {
//   let addItem = props.addItem
//   useEffect(()=>{
//     console.log('子组件ListItem 加载')
//   },[])
//   useEffect(()=>{
//     console.log('子组件render')
//   })
//   return (
//     <div onClick={ addItem }> { props.children } </div>
//   )
// }
 
 
// GOOD shouldComponentUpdate  用useCallback和memo优化以后的代码
import React, { useState, memo, useEffect, useCallback } from 'react';
 
type MyProps = {
  addItem: () => void
  children: string
}
 
const ListItem = memo((props: MyProps)=> {
  let addItem = props.addItem
  useEffect(()=>{
    console.log('子组件ListItem 加载')
  },[])
  useEffect(()=>{
    console.log('子组件render')
  })
  return (
    <div onClick={ addItem }> { props.children } </div>
  )
})
 
let count = 0
function List() {
 
  let [list, setList] = useState<string[]>([])
 
  let [name, setName] = useState('Kevin');
 
  useEffect(()=>{
    setList([
      '6点起床',
      '7点上班',
      '8点早会'
    ])
  }, []);
 
  /**
   * useCallback的第一个参数称为"内联回调函数"，第二个参数称为"依赖项"数组。
   * 返回的函数被称为memoized回调函数，该回调函数仅在某个依赖项改变时才会更新。
   *
   * 在子组件里面调用了useCallback返回的addI这个方法后，会执行内联回调函数；
   * 然后setState，整个组件更新，addI方法也会相应的更新。
   */
  const addI = useCallback(() => {
    list.push('行程 '+ count++);
    setList([...list])
  }, [list])
 
  const modifyName = () => {
    setName('K3VIN' + (++count))
  }
 
  return (
    <>
      {
        list.map((item, index) => {
          return (
            <ListItem key={index} addItem = { addI }>
              {item}
            </ListItem>
          )
        })
      }
      现在的名字： {name}  <button onClick={modifyName}> 点击修改名字 </button>
    </>
  )
}
 
export default List