React 16.8 Hook_综合

React 16.8 新增 Hook 文档

简介

这不是一个函数,也不是一个属性对象什么的,它只是一种特性的称呼
我们可以叫它钩子函数
官方是这么概括它的:

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

自带的 Hook 函数

系统为我们准备了一些自带的钩子函数, 下面介绍一下这些函数的使用方法和特点

useState

// 引入
import React, {
       useState } from 'react'// 函数式组件
export default (props)=>{
      // 多个stateconst [ count, setCount ] = useState(0)const [ name, setName ] = useState('Jack')const [ scores, setScores ] = useState([{
      name: 'Jack', score: 99}])return (<div><div> {
      count} </div>// 调用传入新值<button onClick={
      ()=>{
      setCount(count + 1)}} ></button></div)
}

useEffect

两条使用规则

1. 只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

2. 只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook。 你可以：

在 React 的函数组件中调用 Hook
在自定义 Hook 中调用其他 Hook

自定义 Hook

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。

import React, {
     useState, useEffect } from "react";function useFriendStatus(friendID) {
    const [isOnline, setIsOnline] = useState(null);useEffect(() => {
    function handleStatusChange(status) {
    setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);return () => {
    ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);};});return isOnline;
}

React 16.8 Hook