react 常用hooks

这里写目录标题

  • react hooks
    • Effect Hook
    • ahooks
    • 自定义hooks
    • 使用自定义 Hook

react hooks

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

import React, { useMemo ,useState,useEffect} from 'react';

 const [name, setName] = useState('');

Effect Hook

可以让你在函数组件中执行副作用操作

  useEffect(() => {
        return () => {
            // un
        };
    }, []);
  const columns = useMemo(() => {
        return [
            {
                title: '会员编号',
                dataIndex: 'id',
                render: text => <span>{text}</span>,
            },
        ];
    }, [dispatch]);

ahooks

import { useBoolean, useMount, useUnmount } from 'ahooks';
useUnmount(() => {});

useMount(() => {});

const [editModalVisible, { setTrue: openEditModal, setFalse: closeEditModal }] = useBoolean(false);

自定义hooks

通过自定义 Hook,可以将组件逻辑提取到可重用的函数中。

当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。而组件和 Hook 都是函数,所以也同样适用这种方式。

自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook。 例如,下面的 useFriendStatus 是我们第一个自定义的 Hook:

import { 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

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

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

你可能感兴趣的:(React相关)