React Hook 初了解

Hook简介

注意：React Hook只能在函数组件中使用，在class组件中是不能使用的。

useState

import React, { useState } from 'react';

function Demo () {
//声明一个新的叫做 count 的 state 变量
    const [count, setCount] = useState(1);
    return (
        <div>
            <p>你点击的{count}次数</p>
            <button onClick={() => {setCount(count + 1)}}>点我</button>
        </div>
    )
}

从上面的例子可以看出，useState就是让你在函数组件中添加state的Hook，而Hook就是一个特殊的函数，可以让你使用React的特性。

使用多个state变量

如果想使用多个state变量，就可以声明多个，只需给不同的state变量取不同的名称：

function Example() {
    //声明多个 state 变量
    const [name, setName] = useState('张三');
    const [age, setAge] = useState(18);
    const [todo, setTodo] = useState([{ tsxt: '学习 React Hook'}])

    //声明的多个 state 变量可以单独更新
    function handleSetNameClick() {
        //和 this.setState({name: '李四'}) 是差不多的
        setName('李四')
    }
}

注意： useState()方法中的唯一参数就是初始的 state,返回值为当前state以及更新state的函数,useState()的参数可传可不传，具体看自己的需求。

useEffect

无需清除的 effect

有时候，当我们只想在React更新DOM之后运行一些额外的代码，比如发送请求，手动变更DOM等，这些都是无需清除的操作。

使用class时

在class组件中，render函数中不应该执行这些操作，因为在这个函数中执行这些操作太早，我们都想着在React更新DOM之后才执行我们的操作，所以，我们把这些操作放到componentDidMount和componentDidUpdate函数中。

使用useEffect

通过使用这个 Hook，你就可以告诉React组件需要在渲染之后执行某些操作。useEffect会在第一次渲染之后和每次更新之后都会执行。