react----Hooks的基本使用

一、react-hooks概念

React中一切皆为组件，React中组件分为类组件和函数组件，在React中如果需要记录一个组

件状态得时候，那么这个组件必须是类组件，那么能否让函数组件拥有类组件得功能？这时候

我们就需要使用hook

Hooks让我们函数组件拥有了类似组件得特性，Hook是React16.8中新增得功能，他们允许

您在不编写类的情况下使用状态和其他React功能

二、为什么React中需要类组件

1、需要记录当前组件的状态

2、需要使用组件的一些生命周期

三、类组件与Hooks对比

import React, { Component,Fragment} from "react";

export default class App extends Component{
　　　constructor(){
　　　　super();
　　　　this.state = {
　　　　　　n:0
　　　　}
　　　　this.handleClick = this.handleClick.bind(this)
　　　}
　　render(){
　　　　let {n} = this.state
　　　　return(
　　　　　　<div>
　　　　　　　　<h3>{n}</h3>
　　　　　　　　<button onClick={this.handleClick}>修改</button>
　　　　　　</div>
　　　　)
　　}
　　handleClick(){
　　　　this.setState({
　　　　　　n:this.state.n+1
　　　　})
　　}
}



函数组件
import React, { Component,Fragment,useState} from "react";

　　export default ()=>{
　　　　let [n,setCount] = useState(0);
　　　　const handleClick = ()=>{
　　　　　　n+=1;
　　　　　　setCount(n)
　　　　}
　　　　return (
　　　　　　<div>
　　　　　　　　<h3>{n}</h3>
　　　　　　　　<button onClick={handleClick}>点击</button>
　　　　　　</div>
　　　　)                　　}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　useState:创建一个状态，这个状态为0
　　n:代表当前状态值也是0
　　setCount：更新状态的函数　　

四、Hooks常用的方法

useState、useEffect、useContext

useState:函数   存储的当前组件的一些状态

参数：所需要的状态值

返回值：数组
    
    1.当前状态的Key值
    2.修改当前状态的函数　　

五、useEffect基本使用

模拟组件状态的一些生命周期

    比如：componentDidMount、componentDidUpdate、componentWillUnmount

useEffect中有两个参数
     第一个参数是一个函数，
     第二个参数是一个依赖的数据。

第二个参数用来决定是否执行里面的操作，可以避免一些不必要的性能损失，
只要第二个参数中的成员的值没有改变，就会跳过此次执行。
如果传入一个空数组[],那么该effect只会在组件mount和unmount时期执行

    

useEffect模拟componentDidMount && componentDidUpdate

import React, { Component,Fragment,useState,useEffect} from "react";

export default ()=>{
    let [n,setCount] = useState(0);
    const handleClick = ()=>{
        n+=1;
        setCount(n)
    }
    useEffect(() => {
        console.log(111)
    })
    return (
        <div>
            <h3>{n}</h3>
            <button onClick={handleClick}>点击</button>
        </div>
       
    )

}　

只在componentDidMount中执行

import React, { Component,Fragment,useState,useEffect} from "react";

export default ()=>{
    let [n,setCount] = useState(0);
    const handleClick = ()=>{
        n+=1;
        setCount(n)
    }
    useEffect(() => {
        console.log(111)
    },[])
    return (
        <div>
            <h3>{n}</h3>
            <button onClick={handleClick}>点击</button>
        </div>
       
    )

}　

useEffect模拟componentWillUnMount

useEffect中还可以通过让函数返回一个函数来进行一些清理操作（比如事件的移除）

 useEffect(() => {
        console.log(111)
        return()=>{
            console.log("卸载")
        }
  },[])