特点

只能在函数式组件中使用

作用

使函数式组件拥有状态、生命周期等类组件的特性

核心

  • state hook

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    import React, { useState } form 'react'
    // useState 方法返回一个数组。第一个值是当前的 state，第二个值是更新 state 的函数，相当于类组件的setState

    function App() {
        const [data, setData] = useState({
            name: 'xxy',
            age: 10
        })
        return (
            <div>
                <p>You clicked {count} times</p>
                <button onClick={() => setData({ ...data, age: data.age + 1 })}>点我加1</button>
            </div>
      )
    }

    /* 【注意】setData的使用分两种情况：
     * 1.为该状态赋新的值
     * 2.在原状态的基础上进行修改。此时setData接收一个参数data，表示原来的状态
     */
     setData('')
     setData(data => [...data, text])
     setData(data => {
         const arr = [...data]
         arr.splice(i, 1)
         return arr
     })

  • effect hook

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import React, { useState, useEffect } from 'react'
    /* useEffect第一个参数为处理函数,在。函数返回值(如果有)在组件销毁时调用;
     * 第二个参数（可选）是数组
         1.若不传，则函数在初次渲染和每次更新后都会调用，相当于componentDidUpdate
         2.若为[var],当var发生变化时才会触发useEffect，相当于watch
         3.若为[]，则函数只在组件挂载和卸载时调用，相当于componentDidMount
     */
    function App() {
        const [count, setCount] = useState(0);
        useEffect(() => {
            console.log('componentDidMount...')
            console.log('componentDidUpdate...')
            return () => {
                console.log('componentWillUnmount...')
            }
        })
        return <button onClick={() => setCount(count + 1)}>点我加1</button>
    }