React 自定义Hooks 实例

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

首先，自定义Hooks一定要以use开
然后，提取自定义Hook：当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 Hook 都是函数，所以也同样适用这种方式。常用的Hook可见以往文章。实例如下：

import {useEffect, useState} from 'react';
import {useUpdate} from './useUpdate';

const useRecords = () => {
  const [records, setRecords] = useState<RecordItem[]>([]);
  useEffect(() => {
    setRecords(JSON.parse(window.localStorage.getItem('records') || '[]'));
  }, []);
  useUpdate(() => {
    window.localStorage.setItem('records', JSON.stringify(records));
  }, records);
  const addRecord = (newRecord: newRecordItem) => {
    const record = {...newRecord, createdAt: (new Date()).toISOString()};
    setRecords([...records, record]);
    return true;
  };
  return {records, addRecord};
};

export {useRecords};

最后，使用自定义 Hook

import {useRecords} from 'useRecord';

const {records} = useRecords();

• 注意：
• 自定义 Hook 必须以 “use” 开头
• 在两个组件中使用相同的 Hook 不会共享 state