reacthooks学习

注意： 仅在顶层调用函数， 不能在循环语句，条件语句，嵌套语句中， 仅在函数组件和hooks函数中调用

1. useState:  返回的一个变量，因为js 是单线程的当useState被调用时，就是当前组件的useState, 当一个组件有多个useState的时候，返回是根据传入的顺序来返回的

2. useEffect: 是 (cmoponentDidMount和componentDidUpdate和 componentWillUnmout)的集合，在渲染后执行，useEffect(回调函数,数组)

  1. 第二个参数不传，所有更新都会执行  2. 传递[],仅在挂载和卸载的时候执行 3. [name，...arg]，在name,或其它参数更新时执行    
  2. 第一个参数有返回函数的时候在组件销毁的时候执行

3. useContext: 

1.导入并调用createContext方法，得到Context对象

import { createContext } from 'react'
export const Context = createContext()
2.使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据
return (
  <Context.Provider value={ 传递的数据 }>
      <根组件的内容,这里面都可以获取到context传递的值/>
  </Provider>
)
3.在任意后代组件中，获取公共数据

import React, { useContext } from 'react'
import { Context } from './某个文件'
const 函数组件 = () => {
    const 公共数据 = useContext(Context)
    return ( 函数组件的内容 )
}

 4. useRef   

    1. 返回一个ref对象，该对象只有一个current属性，初始值为传入的参数（initValue）

    2. 当更新current的值，并不会render,这是与useState不同点

    3. 返回的ref对象在整个组件生命周期内保持不变

    4. useRef 类似于组件的this

    使用场景： 1. 获取组件的实例   2 需要保存上一次的共享数据

 5. useCallBack 和 useMemo useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。

    1. useCallBack父组件将一个方法传递给子组件，若父组件其它状态发生变化，子组件会跟着渲染多次，会造成不必要的渲染，useCallback 是将父组件传递给子组件的方法缓存起来，当useCallBack第二个参数状态发生变化时，子组件才会重新渲染 使用场景是：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。