Hooks的使用

作用：在函数组件中使用state以及其他的React特性

常用的hook：React.useState()、React.useEffect()、React.useRef()

案例：

类组件实现代码

import React, { Component } from 'react'
import { root } from '../../index'

export default class countClass extends Component {
    state = { count: 0 }
    myRef = React.createRef()

    componentDidMount(){
        this.timer = setInterval(()=>{
            this.setState(state => ({count:state.count+1}))
        },1000)
    }
    componentWillUnmount(){
        clearInterval(this.timer)
    }

    add = () => {
        this.setState(state => ({ count: state.count + 1 }))
    }
    unmount = ()=>{
        root.unmount();
        // ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    show = ()=>{
        alert(this.myRef.current.value);
    }
    render() {
        return (
            <div>
                <h4>当前求和为：{this.state.count}</h4>
                <button onClick={this.add}>+</button>
                <button onClick={this.unmount}>注销</button><br />

                <input type="text" ref={this.myRef} />
                <button onClick={this.show}>提示输入内容</button>
            </div>
        )
    }
}

	//这段代码定义了一个名为countClass的React组件，它实现了以下功能：
	//1.导入了React库和Component类。
	//2.导入了root，用于获取根组件的引用。
	//3.定义了一个名为countClass的类，继承自Component类。
	//4.在组件的state中定义了一个名为count的属性，初始值为0。
	//5.创建了一个名为myRef的引用，用于获取组件中的DOM元素。
	//6.在组件挂载时（componentDidMount）设置一个定时器，每隔1000毫秒（1秒）更新count的状态。
	//7.在组件卸载时（componentWillUnmount）清除定时器。
	//8.定义了一个名为add的方法，用于更新count的状态。
	//9.定义了一个名为unmount的方法，用于卸载根组件（root）。
	//10.定义了一个名为show的方法，用于显示输入框中的内容。
	//11.在组件的render方法中，返回了一个包含计数器、加法按钮、注销按钮和输入框的元素。
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

函数组件实现代码

import React from 'react'
import { root } from '../../index';

function Demo() {
    /**
     * useState()说明：
     * 参数：第一次初始化指定的值在内部作缓存
     * 返回值：包含2个元素的数组，第一个为内部当前状态，第二个为更新状态值的函数
     */
    const [count,setCount] = React.useState(0)
    const myRef = React.useRef()

    /**
     * React.useEffect(()=>{},[]):
     * 第二个参数为[],相当于componentDidMount()
     * 第二个参数不为[]或没有传,相当于componentDidMount()+componentDidUpdate()
     */
    React.useEffect(()=>{
        let timer = setInterval(()=>{
            setCount(count => count+1)
        },1000)
        return ()=>{
            // 组件卸载前执行，相当于componentWillUnmountt()
            clearInterval(timer)
        }
    },[])

    function add() {
        /**
         * setCount()两种写法：
         * setCount(newValue):参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
         * setCount(value => newValue)：参数为函数，接受原本的状态，返回新的状态，内部用其覆盖原来的状态值
         */
        setCount(count+1)
        // setCount(count => count+1)
    }
    function unLoad(){
        // 卸载根节点root
        root.unmount();
    }
    function show(){
        alert(myRef.current.value)
    }
    return (
        <div>
            <h4>当前求和为：{count}</h4>
            <button onClick={add}>+</button>
            <button onClick={unLoad}>卸载</button><br />

            <input type="text" ref={myRef} />
            <button onClick={show}>提示输入内容</button>
        </div>
    )
}

export default Demo

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57