React Hooks 的简单使用

2020-03-14 本文已影响0人鹤仔z

先了解一下类组件和函数组件

react 的特点就是：一切皆为组件。其中，组件种类有很多，不同种类的组件有不同的功能。

我们熟知的组件种类：函数组件、类组件、受控组件、非受控组件、ui组件、容器组件、高阶组件等。

我们先介绍一下类组件和函数组件，让我们清楚为什么会有 hooks

类组件

其中，我们最熟悉的类组件，也就是有状态组件，是这个样子的：
```
import React, { Component } from 'react'

export default class MyComponent extends Component {
    constructor(){
        super();
        this.state = {
            count:0
        }
    }
    render() {
        return (
            <div>
                类组件
            </div>
        )
    }
}
```
类组件的特点就是功能强大。不仅有自己的状态 state ，还拥有自己的实例和一套完整的生命周期。在类组件里，你可以：
1. 使用状态 state
2. 使用完整的生命周期
3. 访问 this
正是因为它太强大，所以也迎来了一个弊端：渲染速度慢
函数组件

顾名思义，函数组件就是一个 Function ：
```
function FnComponent(){
    return (
      <div>
          函数组件
        </div>
    )
}
```
就那么简单，所以函数组件的渲染速度更快。考虑到性能问题，我们在开发的时候更推荐使用函数组件。但是也有一些问题：函数组件局限性太多，身上没有我们需要的 state 和生命周期。

那怎么办呢？

它来了

react 16.8 版本中更新了强大的 hooks

【hooks ：n. 钩子；[机] 挂钩（hook的复数）】——来自有道翻译

简而言之， hooks 可以让函数组件拥有类组件的特点

下面将介绍一下几个 hooks 的使用

useState

实现了在函数组件中创建并使用 state

语法：

定义状态

const [变量名，修改变量函数] = useState(变量值)

取值

正常取值即可

赋值

函数名(新值)

函数名(回调函数) ：回调函数的参数是当前值，返回值是新值

注意：

如果定义的是一个对象的话，返回值需要是一个新的对象（克隆），因为对象是引用类型，所以只有对象的地址发生变化视图才会更新。

hooks 只能在函数组件的内部调用。

import React,{ useState } from 'react'

function App() {
    // useState 的使用
    const [count,setCount] = useState(0);
    return (
        <div>
            {/* 直接变量名取值 */}
            <h2>{count}</h2>
            {/* 修改变量的值 */}
            <button onClick={()=>{setCount((val)=>(val+1))}}>点击+1</button>
            <button onClick={()=>{setCount(0)}}>点击归零</button>
        </div>
    )
}

useEffect

让函数组件拥有特定的生命周期。

语法：

useEffect(参数1,参数2)

参数1：回调函数，就是在当前生命周期内需要做的事情

如果在当前函数 return 了一个函数，那么返回的这个函数就是 componentWillUnmount —— 销毁时执行的函数。

参数2：对比值，根据参数2的不同来决定 useEffect 执行的是哪个生命周期。

参数2为 []：模拟 componentDidMount ——挂载成功

参数2为空：模拟 componentDidUpdate ——更新成功

componentDidMount 挂载成功

import { useEffect } from 'react'

// ...
useEffect(()=>{
    console.log('挂载成功')
},[])
// ...

componentDidUpdate 更新成功

import { useEffect } from 'react'

// ...
useEffect(()=>{
    console.log('更新成功')
})
// ...

componentWillUnmount 销毁时

import { useEffect } from 'react'

// ...
useEffect(()=>{
    // ...
    return ()=>{
        console.log('销毁时')
    }
})
// ...

useRef

在函数组件中获取到真实的dom结构

语法：

定义一个存储ref的变量

let dom = useRef

在想要获取的标签的属性上定义ref属性

<h2 ref={dom}>你好</h2>

获取dom

console.log(dom.current) --> <h2>你好</h2>

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

export default function App() {
    let dom = useRef();
    useEffect(()=>{
        console.log('挂载成功');
        console.log(dom.current); // <h2>你好</h2>
    },[])
    return (
        <div>
            <h2 ref={dom}>你好</h2>
        </div>
    )
}

useReducer

它是函数组件中的状态管理方案，一般在简单的情况下用 useState 就足够了，在一些复杂的情况下适合使用 useReducer ，因为它可以在函数组件中操作action

操作方法和 Redux 中的状态管理相似

语法：

let [state,dispatch] = useReducer(reducer,myState)

参数：

回调函数——reducer

状态——state

返回值：

state

dispatch

import React,{ useReducer } from 'react'

// 定义 reducer 和 state
function reducer(state,action){
    switch(action.type){
        case "ADD": return {count:++state.count}
        case "REDUCE": return {count:--state.count}
    }
}
let myState = {
    count:1
}

function App() {
    // 使用 useReducer 
    let [state,dispatch] = useReducer(reducer,myState)

    return (
        <div>
            <h2>{state.count}</h2>
            <button onClick={addHandler}>+</button>
            <button onClick={reduceHandler}>-</button>
        </div>
    )
    
    function addHandler(){
        let action = {type:"ADD"};
        dispatch(action)
    }
    function reduceHandler(){
        let action = {type:"REDUCE"};
        dispatch(action)
    }
}

export default App;