react hook 入门

概述

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

这里有关于hooks的优缺点讨论：谈谈react hooks的优缺点

useState

一个简单的点击按钮，数字增加的案例

代码：

import React, { useState } from 'react'

export default () => {

    const [count, setcount] = useState(0)
    const [num, setnum] = useState(5)

    return (
        <div>
            <p>{count}</p>
            <p>{num}</p>
            <button onClick={() => {setcount(count+1);setnum(num+2)}} >click me to add</button>
        </div>
    )
    
}

useState方法调用后会返回一个长度为2数组，第一个值是我们定义的变量，第二个值是更新这个变量的方法，括号里的值就是初始化这个变量的值。我们通过解构赋值的方式获得他们。不用class，直接函数式实现。

useEffect

import React, { useState, useEffect } from 'react'

export default () => {

    const [count, setcount] = useState(0)

    useEffect(() => {
        console.log('组件被渲染');
        return () => {
            console.log('组件卸载'); 
        }
    }, [Math.min(count,5)]) //数组内是effect执行的条件，如果数组内的值发生变化，effect才会执行

    return (
        <div>
            <div>you have click {count} times </div>
            <button onClick = {()=> setcount(count+1) } >click me to add </button>
        </div>
    )
}

可以看到，我们页面加载完成时，就已经输出了组件被渲染，这是因为输出‘组件被渲染’的区域其实是 componentDidMount , componentDidUpdate 的区域，return 中的区域是 componentWillUnmount ，而我们的useEffect只执行了5次，是因为后面的数组中的结果。但是当我们切换页面时，还会触发一次卸载的过程。