• 自定义hook的作用在于提取公共逻辑，所以一般不会返回一个JSX对象，而是会根据需要返回特定的数据或者方法

  • 自定义hook必须要以use开头

    用法

  • 封装好一个组件,然后把读和写接口暴露出去就可以了 ```javascript import { useState, useEffect } from “react”;

const useList = () => { const [list, setList] = useState(null); useEffect(() => { ajax(“/list”).then(list => { setList(list); }); }, []); // [] 确保只在第一次运行

return { //这个地方直接把读和写暴露出去就可以了 list: list, setList: setList }; }; export default useList;

function ajax() { return new Promise((resolve, reject) => { setTimeout(() => { resolve([ { id: 1, name: “Frank” }, { id: 2, name: “Jack” }, { id: 3, name: “Alice” }, { id: 4, name: “Bob” } ]); }, 2000); }); }

  2. - 直接使用这个暴露出来的Hook 就可以了
  3. ```javascript
  4. import React, { useRef, useState, useEffect } from "react";
  5. import ReactDOM from "react-dom";
  6. import useList from "./hooks/useList";
  8. function App() {
  9.   const { list, setList } = useList();  //直接使用这个封装好的 Hook 就可以了
  10.   //这个 list 就是 封装Hook里面的list
  12.   return (
  13.     <div className="App">
  14.       <h1>List</h1>
  15.       {list ? (
  16.         <ol>
  17.           {list.map(item => (
  18.             <li key={item.id}>{item.name}</li>
  19.           ))}
  20.         </ol>
  21.       ) : (
  22.         "加载中..."
  23.       )}
  24.     </div>
  25.   );
  26. }
  28. const rootElement = document.getElementById("root");
  29. ReactDOM.render(<App />, rootElement);