【react】---Hooks的基本使用---【巷子】

1、react-hooks概念

　　React中一切皆为组件，React中组件分为类组件和函数组件，在React中若是须要记录一个组件的状态的时候，那么这个组件必须是类组件。那么可否让函数组件拥有类组件的功能？这个时候咱们就须要使用hooks。

　　Hooks让咱们的函数组件拥有了相似类组件的特性，Hook是React16.8中新增的功能，它们容许您在不编写类的状况下使用状态和其余React功能

 

2、为何React中须要类组件

　　一、须要记录当前组件的状态
　　二、须要使用组件的一些生命周期函数

 

3、类组件与Hooks简单对比

　　类组件

 

import React from "react"

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

 

　　hooks

import React,{useState} from "react";

export default ()=>{
    let [count,setCount] = useState(0);
    let handleAdd = ()=>setCount(count+1);
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={handleAdd}>点击</button>
        </div>
    )
}

两者对比以后是否是感受Hooks简单好多了？那么接下来咱们来学习Hooks

 

 

4、Hooks基本使用

 

　　一、Hooks经常使用的方法
　　　　useState 、useEffect 、useContext以上三个是hooks常常会用到的一些方法

 

　　二、useState
　　　　useState是react自带的一个hook函数，它的做用就是用来声明状态变量.useState这个函数接收的参数是咱们的状态初始值,它返回了一个数组，这个数组的第 [0]项是当

       前当前的状态值，第 [1]项是能够改变状态值的方法函数。

import React,{useState} from "react"

export default ()=>{
    let [count,setCount] = useState(0);
    let addCount = ()=>setCount(count+1);
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={addCount}>点击</button>
        </div>
    )
}

　　useState : 建立一个状态,这个状态为0
　　count : 表明当前状态值也就是0
　　setCount : 更新状态的函数
　　addCount = ()=>setCount(count+1);调用setCount就能够用来修改状态

 

　　2-一、useState返回的是什么？

const [count,setCount] = useState(0);

const state = useState(0);
const count = state[0];
const setCount  = state[1]

　　注意：

　　　　一、useState必定要写在函数初始的位置不能在循环或判断语句等里面调用，这样是为了让咱们的 Hooks 在每次渲染的时候都会按照 相同的顺序 调用，由于这里有一个关键的问题，那就是 useState 须要依赖参照第一次渲染的调用顺序来匹配对于的state，不然 useState 会没法正确返回它对于的state

　　　　二、咱们能够在一个函数组件中使用多个

export default ()=>{
    let [count,setCount] = useState(0);
      let [count,setCount] = useState(0);
      let [count,setCount] = useState(0);
    
}

5、useEffect基本使用
　　咱们写的有状态组件，一般会产生不少的反作用（side effect），好比发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。咱们以前都把这些反作用的函数写在生命周期函数钩子里，好比componentDidMount，componentDidUpdate和componentWillUnmount。而如今的useEffect就至关与这些声明周期函数钩子的集合体。它以一抵三。

　　　　　　　　　　　　(useEffect = componentDidMount + componentDidUpdate+componentWillUnmount)

 

　　5-一、useEffect
　　　　useEffect中有两个参数，第一个参数是一个函数，第二个参数是一个依赖的数据。第二个参数用来决定是否执行里面的操做，能够避免一些没必要要的性能损失，只要第二个参数中的成员的值没有改变，就会跳过这次执行。若是传入一个空数组 [ ]，那么该effect 只会在组件 mount 和 unmount 时期执行。

 　　5-二、useEffect模拟componentDidMount && componentDidUpdate

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

export default ()=>{
    let [title,setTitle] = useState(0);
    let updateTitle = ()=>setTitle(title+1);
    return (
        <div>
            <h2>{title}</h2>
            <button onClick={updateTitle}>点击</button>
        </div>
    )
    
    //参数是一个函数  每次mount 或者 update都会调用当前函数
    useEffect(()=>{
        document.title = `页面为${count}`;
    })
    
}

　　

　　5-三、如何只在componentDidMount中执行

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

export default ()=>{
    let [title,setTitle] = useState(0);
    let updateTitle = ()=>setTitle(title+1);
    return (
        <div>
            <h2>{title}</h2>
            <button onClick={updateTitle}>点击</button>
        </div>
    )
    
    //将第二个参数设置为一个空数组则只会在componentDidMount中执行
    useEffect(()=>{
        document.title = `页面为${count}`;
    },[])
    
}

　　5-二、useEffect模拟componentWillUnMount
　　useEffect 中还能够经过让函数返回一个函数来进行一些清理操做，好比取消订阅等

useEffect = (()=>{
    return ()=>{
        //unmount时调用这里
        document.removeEventListener();
    }
},[])

 

4、useEffect 何时执行？ 

　　它会在组件 mount 和 unmount 以及每次从新渲染的时候都会执行，也就是会在 componentDidMount、componentDidUpdate、componentWillUnmount 这三个时期执行

 

5、hooks的好处　　面向生命周期编程变成了面向业务逻辑编程