react扩展 三个常用的hook

1.setstate两种方式

1.1 对象式state setstate（stateChange，[callback]）stateChange是一个对象，对象里面可以修改state里面有的属性值，callback可以拿到修改过后的值进行操作，callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

1.2 函数式state setstate（updateState,[callback]),updateState是一个函数，会将此时的state和props传进来，callback的作用如上，如果此时需要修改的state依赖之前的state，可以用函数式state

使用原则：

                (1).如果新状态不依赖于原状态 ===> 使用对象方式

                (2).如果新状态依赖于原状态 ===> 使用函数方式

                (3).如果需要在setState()执行后获取最新的状态数据, 

                    要在第二个callback函数中读取

1. React Hook/Hooks是什么?(1). Hook是React 16.8.0版本增加的新特性/新语法(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

state hook React.useState

let [xxx,setxxx]=usestate（初始值）

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)  
(3). useState()说明:
        参数: 第一次初始化指定的值在内部作缓存（随着对状态的更改，demo调用1+n次，初次算一次，后续调用n次，第一次调用react底层存下xxx的初始值，后面n次调用，useState不会对xxx的值进行覆盖处理） 

返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数 (4). setXxx()2种写法: setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值 setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

Effect hook React.useEffect(可以实现生命周期的作用，挂载以后，更新以后都在执行)

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:
        发ajax请求数据获取
        设置订阅 / 启动定时器
        手动更改真实DOM
(3). 语法和说明: 
        useEffect(() => { 
          // 在此可以执行任何带副作用操作
          return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
          }
        }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行，空数组代表谁也不监测，只在第一次挂载的时候执行，
其余时候stateValue有改变就会执行，不写第二个参数代表都监测，监测所有，只要有改变就监测
    
(4). 可以把 useEffect Hook 看做如下三个函数的组合
        componentDidMount()（第二个参数为[]）
        componentDidUpdate()(第二个参数为一个有state的[])
    	componentWillUnmount() (useEffect的第一个参数是一个函数，这个函数返回的函数就相当于componentWillUnmount()

Ref hook React.useRef（类似React.createRef()，也是一对一，专用）

(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样，是一个容器，定义容器，然后在标签里面用ref绑定，使用的时候是一样的，除了函数组件没有自己的this