react Hooks 的用法

Hooks是react 16.8.0版本增加的新特性/新语法

可以在函数组件中使用state以及其他的react特性

三个常用的Hooks

    1.state.hook   React.useState()

    2.Effect hook    React.useEffect()

    3.Ref hook   React.useRef()

1. state hook

    1.state hook 让函数组件也可以有state状态，并进行状态数据的读写操作

    2.语法 const [xx,setxx]=React.useState(initvalue)

    3.useState() 说明：

        参数：第一次初始化指定的值在内部做缓存

        返回值：包含2个元素的数组，第一个为内部当前状态值，第二个为更新状态值的函数

    4.setxx（）两种写法

        1 setxx（newvalue） 参数非函数值，直接指定新的状态值，内部用其覆盖原来的状态值

        2.setxx （value=> newvalue） 参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值

2.Effect Hook

    1. Effect Hook 可以在函数组件中执行副作用操作（用于模拟类似组件中的生命周期钩子）

    2. react 中的副作用操作

        发送ajax请求数据获取

        设置订阅、 启动定时器

        手动更改真实dom

    3.语法和说明

        useEffect(()=>{

            // 在此可以执行任何带副作用操作

            return ()=>{ // 在组件卸载前执行

                // 在此做一些收尾工作，比如清除定时器/取消订阅等

            }

        },[])

    4. 可以把useEfect Hook 看做如下三个函数的组合

        componentDidMount()   相当于 第二个参数为[]

        componentDidUpdate()  相当于 第二个参数为空，或第二个数组中有有监听的state

        componentWillUnmount()  相当于 第一个参数的返回值是函数

 

3.ref hook

    ref hook 可以在函数组件中存储/查找组件内的标签或奇异其他数据

    语法 const myRef=react.useRef()