function useXXX(参数A, 参数B, ...) { /* 实现自定义 hooks 逻辑 内部应用了其他 React Hooks */ return [xxx, ...] }使用:
const [xxx, ...] = useXXX(参数A, 参数B, ...)自定义 hooks 参数 可能是以下内容:
4.不需要参数
4.没有返回值
export const LogContext = createContext({}); /* 堆代码 duidaima.com */ export const useLog = () => { /* 定义一些公共参数 */ const message = useContext(LogContext); const listenDOM = useRef(null); /* 分清依赖关系 */ const reportMessage = useCallback( function (data, type) { if (type === "pv") { // 页面浏览量上报 console.log("组件 pv 上报", message); } else if (type === "click") { // 点击上报 console.log("组件 click 上报", message, data); } }, [message] ); useEffect(() => { const handleClick = function (e) { reportMessage(e.target, "click"); }; if (listenDOM.current) { listenDOM.current.addEventListener("click", handleClick); } return function () { listenDOM.current && listenDOM.current.removeEventListener("click", handleClick); }; }, [reportMessage]); return [listenDOM, reportMessage]; };在上面的代码中,使用到了如下4个 React Hooks:
import React, { useState } from "react"; import { LogContext, useLog } from "./hooks/useLog"; // 堆代码 duidaima.com const Home = () => { const [dom, reportMessage] = useLog(); return ( <div> {/* 监听内部点击 */} <div ref={dom}> <button> 按钮 1 (内部点击) </button> <button> 按钮 2 (内部点击) </button> <button> 按钮 3 (内部点击) </button> </div> {/* 外部点击 */} <button onClick={() => { console.log(reportMessage); }} > 外部点击 </button> </div> ); }; // 阻断 useState 的更新效应 const Index = React.memo(Home); const App = () => { const [value, setValue] = useState({}); return ( <LogContext.Provider value={value}> <Index /> <button onClick={() => setValue({ cat: "小猫", color: "棕色" })}> 点击 </button> </LogContext.Provider> ); }; export default App;如上,当 context 发生改变时,能够达到正常上报的效果。小细节:使用 React.memo 来阻断 App 组件改变 state 给 Home 组件带来的更新效应。