React 16.8 Hook

React 16.8 新增 Hook 文档

简介

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

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

自带的 Hook 函数

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

    1. useState

    // 引入
    import React, { useState } from 'react'
    
    // 函数式组件
    export default (props)=>{
      // 多个state
      const [ 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
      )
    }
    
    1. 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;
}

更多内置 Hook 请查看 Hook API 索引

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值