【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的好處　　面向生命週期編程變成了面向業務邏輯編程