react 常用hooks

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';
}