React Hook简述

 

在React16.8中，新增了一个特性，而这个特性就是Hook,它可以让你在不编写 class 的情况下也可以使用 state 以及其他的特性

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

useState

这是我们需要学习的第一个 Hook,借用React官方文档的demo来看看这个Hook

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 Hook可以在函数组件中执行‘副作用’操作，也可以看成是 componentDidMount, componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

无需清除的 effect

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

使用class时

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

使用useEffect

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

useEffect的参数

在这个Hook中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码可以放在里面，第二个参数是一个数组，用于给出Effect的强调项，只要数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEfect().

我们可以来看一段Demo:

 

import React, { useState, useEffect } from 'react';
const Demo = ({ DemoId }) => {
    const [loading, setLoading] = useState(true);
    const [date, setDate] = useState({});
    useEffect(() => {
        setLoading(true);
        fetch('...')     //发送请求
        .then(response => response.json())
        .then(data => {
            setDate(data);
            setLoading(false);
        })
    }, [DemoId]) 
    
    if(loading === true) {
        return <p>Loading......</p>
    }
    
    return(
        <div>
        <p>name: {date.name}</p>
        <p>height: {date.height}</p>
        </div>
    )
    
}

export default Demo;

在上面的Demo中，每当组件参数 DemoId 发生变化， useEffect() 就会执行，当组件第一次渲染时，useEffect() 也会执行。