初谈hooks

- hooks是什么?

可以在不使用类组件的情况下，使用 state 以及其他的React特性

- 都如何使用

通过(useState,useEffect,useContext,useRef,useMemo)

useState

useState：组件状态管理的钩子(可以理解为react中的state)

使用如下: (从raect中解构出 useState,是一个数组前面定义值后面定义方法通过调用方法改变值)

import { useState } from 'react'
const [state, setState] = useState(initState)

其中后面useState(initState)这个的话里面传入的是一个初始的state，可以是任意的数据类型(只在初次渲染时有效，二次渲染时会被忽略)，也可以是回调函数，但函数必须有返回值。

它的作用的话是让函数型组件具备了管理状态的能力,其中重要一点与class的setState不同的是，如果状态值是一个对象，useState更新状态的方法是不会合并更新对象的，可以结合展开运算符来达到合并更新对象的效果：

setState(prevState => {
    return { ...prevState, ...updateValues };
});

有2条规定

• Hooks必须写在函数的最外层，不能在循环语句、条件判断、子函数中调用

  import { useEffect } from 'react'
  useEffect(() => {
      ......//副作用处理
      return () => {
          ......//清理副作用的清除函数
      }
  }, [])

  ；
• 只能在React的函数式组件、自定义Hooks中调用Hooks，不能在其他JavaScript函数中调用。

useEffect

     我们平常用到最多的情况下是把它相当于react中的componentDidMount

使用

useEffect(callback, array)：副作用处理的钩子；它也是componentDidMount()、componentDidUpdate()、componentWillUnmount()、这几个生命周期方法的统一，一个顶三个！

callback 回调函数，作用是处理副作用的逻辑，可以返回一个函数，用作清理副作用；

如下:

import { useEffect } from 'react'
useEffect(() => {
    ......//副作用处理
    return () => {
        ......//清理副作用的清除函数
    }
}, [])

为防止内存泄漏，清除函数会在组件卸载前执行；如果组件多次渲染，则在执行下一个 effect 之前，上一个 effect 就已被清除；

array是一个数组用于控制它的执行省略时，每次渲染都会执行； 空数组时，只会在组件挂载/卸载时执行一次，类似componentDidMount、componentWillUnmount； 非空数组时，会在数组元素发生改变后执行，且这个变化的比较是浅比较。

useContext 

  配合useReducer来管理状态(这个没有什么可以描述)

useRef

   创建ref,方便访问操作DOM

    const RefCompt = () => {
        //创建ref
        const inputRef = useRef();
        const getValue = () => {
            //访问ref
            const inpt = inputRef.current;  // input的DOM对象
            inpt.focus();  // 让 input 框获取焦点
            console.log(inpt.value);  // input输入框的值
        };
        //挂载
        return (<div>
            <input ref={ inputRef } type="text" />
            <button onClick={ getValue }>获取值</button>
        </div>);
    }

    注意：与 useState 不同的是，useRef 会实时更新数据，但不会触发组件的更新！

useMemo(性能优化) 发生变化时,返回一个新的函数体callback

    // 合并obj1、obj2
    const backValue = useCallback(() => Object.assign(obj1, obj2), [obj1, obj2])

    <div>{ backValue().name } --- { backValue().age }</div>