react hook（基础详解）

首先我们知道Hook是可以100%向下兼容的，就是说即便在你以前的代码中加入hook写法也没有问题，同时提供了一个更直接的API包括props， state，context，refs以及生命周期，hook编写时使用的代码量也会更少，但这也是一个过渡，hook的使用去掉了class的概念，虽然以前的写法依旧可行，但新增hook的同时官方也表示没有计划移除class，这对程序员来说是很友好的，但react更推荐用户使用hook来编写代码

首先我们看一下state在传统和hook中的使用方式区别

首先演示第一个hook：

State Hook

下面用两种写法表现同样的计数器
传统：

import React from 'react'
export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        }
    }
    //添加数字并刷新
    add(){
        let {count} = this.state
        this.setState({
            count:count+1
        })
    }

    render() {
        return <div onClick={()=>this.add()}>
            {this.state.count}
        </div>
    }
}

Hook：（方括号中的时候第一个参数就是自定义的state元素，可以通过第二个自定义方法来刷新这个state）

import React,{useState} from 'react'
const Main = (props) =>{
    //方括号中第一个参数就是自定义的state元素，可以通过第二个自定义方法来刷新这个state
    const [count,setCount] =useState(0)
    function add() {
        setCount(count+1)//刷新count值
    }
    return (
        <div onClick={()=>add()}>{count}</div>
    )
}
export default Main

在这里我们使用hook中自定义的setCount()替换了传统的setState({})

我们可以看到使用了Hook之后Main变成了一个函数，但这个函数却有自己的状态（count），同时它还可以更新自己的状态（setCount）这两个写法可以显示一个同样的计数器效果,但是可以明显感觉出来hook写出来的更简洁，更明晰。

组件函数的写法有两种：

function Main(props) {
  return <div />;
}

或者箭头函数

const Main= (props) => {
  return <div />;
}

当然，如果我们想要使用多个state 变量，它允许我们给不同的 state 变量取不同的名称：

// 声明多个 state 变量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');

Effect Hook

在使用前我们还是要先引入useEffect

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

这个hook可以让你在函数组件中执行副作用操作 简单来说如果你以前了解react的生命周期，那么你就可以把useEffect Hook 看做componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合

接下来我们在前面使用hook写的计数器的基础上把useEffect放进去

import React,{useState,useEffect} from 'react'
function Main(props){
    //方括号中第一个参数就是自定义的state元素，可以通过第二个自定义方法来刷新这个state
    const [count,setCount] =useState(0)
    
    useEffect(() => {
        console.log(count)
    });
    //添加
    function add() {
        setCount(count+1)//刷新count值
    }
    return (
        <div onClick={()=>add()}>{count}</div>
    )
}
export default Main

这样就可以大家不难发现useEffect 会在每次渲染后都执行

使用effect时有一些副作用是需要清除的，例如订阅外部数据源

这种情况就可以这样清除

useEffect(() => {
    //使用需要结束后清除的方法
    /*...*/
    return function cleanup() {
       //在这里清除
        /*...*/
    };
});

Hook规则：

1.只在最顶层使用 Hook
2.只在 React 函数中调用 Hook