React-Hooks-入门

jiezi

5 年前

React Hook 是 React16.8 提出来的一个新特性，其意义就在于我们可以让函数组件变得跟类组件一样有能力管理自己的状态，这意味着我们以后写的所有组件都可以是 Function，对于初学者来说降低了学习成本（压根不用管 this 是个啥），而且我们可以自定义 hook，能够提高状态逻辑的复用，从而也便于维护。

react 为我们提供了 useState 这个函数，使用此函数就可以取代我们之前的每个组件的状态管理了；

import {useState} from 'react'
function count() {
    // useState 函数为我们解构了一个变量 num 和一个 setNum 函数，并且将变量初始值赋值为“0”const [num, setNum] = useState("0");
    // 我们在这里读取 num 的值，并且每点击一次按钮都会使 num+1
    return <button onClick={() => {setNum(num + 1)}}>{num}</button>
}

当我们每次改变 num 的值时，就会重新执行 count 函数，不过不用担心，num 的初始化只会执行一次;

其实 useState 也是基于 useReducer 的，用过 redux 的人对 reducer 不陌生，reducer 是一个纯函数，会根据 action 中 type 的不同返回改变后新的状态;

import {useReducer} from 'react'
// 创建一个 reducer
function myReducer(state, action){switch(action.type) {
        case "add": return state + 1
        case "minus": return state -1
        default:
         return state
    }
}
// 函数组件 
function count() {
    // 传入 reducer 和初始值
    const [num, dispatchNum] = useReducer(myReducer, "0");
    return <button onClick={() => {dispatchNum({type: "add"})}}>{num}</button>
}

Effect Hook 可以看作是代替了一些生命周期函数

import {useState, useEffect} from 'react'

function count() {const [num, setNum] = useState("0");
    useEffect(() => {const interval = setInterval(() => {setNum(num + 1)
        }, 1000)
        // 最后要 return 一下，记得清除定时器
        return () => clearInterval(interval)
    }, [num])
    return <button onClick={() => {setNum(num + 1)}}>{num}</button>
}

useEffect 函数中第一个参数为组件第一次渲染时执行的函数（最后 return 的是定时器卸载的函数，可以看作是 componentWillUnMount 生命周期内做的事），第二参数表示依赖的值，只有依赖的值变化时，useEffect 才会重新执行；

顾名思义这是一个上下文 hook

// 新建一个 context 文件 myContext.js
import React from 'react'
export default React.createContext("")

// 在另一个文件中引入
import MyContext from './myContext'
// 通过 MyContext.Provider 传值
<MyContext.Provider value="test">
    <Component/>
</MyContext.Provider>

// 在组件中使用
import {useContext} from 'react'
import MyContext from './myContext'
function test() {const contextValue = useContext(MyContext)
    return <div>{contextValue}</div>
}

import {useRef} from 'react'
function testRef() {const inputRef = useRef()
    useEffect(() => {console.log(inputRef)
    })
    return <input ref={inputRef}> 测试 ref</input>
}

hook 其实就是一个函数，在这个函数里我们也可以使用其它 hook, 自定义的 hook 要以 use 开头, 下面是官网上的例子，已经很好了；

import {useState, useEffect} from 'react';

function FriendStatus(props) {const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {setIsOnline(status.isOnline);
  }

  useEffect(() => {ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {return 'Loading...';}
  return isOnline ? 'Online' : 'Offline';
}

文章已同步到陈晓拉尼个人博客

React-Hooks-入门

State Hooks

useState

useReducer

Effect Hook

Context Hook

Ref Hook

自定义 Hook