React-Hook API个人见解

1.useState
用于函数组件状态的定义和改变，一般样式是const [count，setCount] = useState
其中：setCount是自己取的，用于修改函数组件的状态，采用setCount（新值）
注意：直接修改只能在普通类型，引用类型无法直接修改，需要采用深浅克隆的方法先把引用类型的数据克隆下来，改变克隆的值，再重新覆盖原有的属性
浅克隆：
let newobj = Object.assign({},obj)
let newobj = {…obj}
let newobj = Object.create(obj)
深克隆
let newobj = JSON.parse(JSON.stringify(obj))
还有一种是用插件完成的深克隆loadsh，aa是引用loadsh的名称
let newobj = aa.cloneDeep(obj)
2.useEffect
函数组件hook都是可以写多个的
useEffect
可以让函数组件实现类组件生命周期功能，有三个钩子函数
componentDidMount 操作真实dom/数据请求
componentDidUpdate 操作真实dom/数据请求
componentWillUnmount 卸载钩子 去除实例/事件/定时器
参数 2个
第一个参数是一个回调函数 ，用于执行操作逻辑
第二个参数是一个可选参数，它的类型是一个数组
* 没有 表示监听所有数据的变化，它的类型是一个数组
* [] 空数组 执行一次，相当于componentDidMount钩子函数
* [count] 执行多次，表示count数据的监听，这个时候它相当于componentDidMount+componentDiUpdate
* [count,arr] 执行多次，表示count数据和arr数据的监听
返回值是回调函数
* 表示组件被卸载了
*写在子组件内，在子组件被卸载时触发，但是需要在子组件暴露时用React.memo（子组件名称）才行
useEffect(() => { return () => { console.log('被销毁了') } })
3.useLayoutEffect
基本和useEffect相同，官网解释也是说优先使用useEffect，如果出问题再用useLayoutEffect

4.useRef和useImperativeHandle
如果只是获自己组件的元素，可以使用useRef就行，如果要获取子组件的内容，两者要搭配一起使用，内容都存在于current里
useRef使用：
* 如果是获取本子级组件，先定义一个变量const hello = useRef(null)，将其放在标签内ref={hello}，自定义一个事件就可以获取标签的名称，在hello.current
* 如果是获取子级的事件
* 先定义一个变量const hello = useRef(null)，将其放在标签内ref={hello}，
* 然后在子组件进行配置，搭配useImperativeHandle使用
* 子组件的配置,需要传递给父组件的数据写在useImperativeHandle(ref,回调函数) 里的回调函数内
* 最后子组件的暴露通过React.forwardRef(Hello)

    * function Hello (props,ref){
        useImperativeHandle(ref,()=>({
            changeclick(){}
        }))
        return (
          <div> </div>
        )
      }
      export default React.forwardRef(Hello)

5.useMemo
useMemo是进行性能优化的，因为如果该组件内任何一个数据进行修改，都会导致其他数据的重新渲染一遍，这样造成性能的浪费
使用useMemo，将其他数据的渲染所触发的函数绑定在一起，只有该数据变化，与之绑定的函数才会触发
格式：const 变量名 = useMemo(()=>函数(),[数组])，只有数组改变才会函数触发，把变量名覆盖原本函数的位置

6.useCallback
useCallback也是进行函数组件的性能优化的，因为如果父组件内的内容变动会导致子组件重新渲染，导致性能浪费
useCallback有两个参数，第一个参数是原本传递给子组件的函数，const 变量名 = useCallback(fn(),[数组])，将变量名覆盖原本函数的位置，这样只有在父组件内这样数组发生变化的时候，才会触发传递给子组件的fn函数
注意：子组件的暴露要用React.memo(子组件的函数名)

7.useContext
就是为了加入原本类组件有的第二种状态定义方式static contextType
类组件可以通过react内的createContext定义一个变量，这个变量可以用于存值，可以完成跨组件传参export const moneyContext = createContext(0)，0是定义的默认值，在赋值的组件内引入moneyContext，<moneyContext.Provider value={money}>，值作为value的属性值，获取值的组件内引入moneyContext，static contextType = moneyContext，就可以将父组件的值传递到contextType，也就是context内
而对于函数组件，唯一的区别在于子组件获取时，要利用useContext， const money = useContext(moneyContext)，在于可以把组件存的值赋值于money