Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
import React, { useMemo ,useState,useEffect} from 'react';
const [name, setName] = useState('');
可以让你在函数组件中执行副作用操作
useEffect(() => {
return () => {
// un
};
}, []);
const columns = useMemo(() => {
return [
{
title: '会员编号',
dataIndex: 'id',
render: text => <span>{text}</span>,
},
];
}, [dispatch]);
import { useBoolean, useMount, useUnmount } from 'ahooks';
useUnmount(() => {});
useMount(() => {});
const [editModalVisible, { setTrue: openEditModal, setFalse: closeEditModal }] = useBoolean(false);
通过自定义 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;
}
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}