chevron_left

React 实践教程

免费
第 3.7 回

教程文档

React 实践教程 - 自定义 hook

2023年12月20日
React 实践教程

自定义 hook

随着功能越来越复杂,你会发现App()封装了大量的代码,例如加载中的处理,错误的处理等等。其实这些东西是所有接口调用都需要用到的。编界有一句话,叫做Don't Repeat Yourself,如果反复的写重复的内容,就造成代码大量的冗余、复杂、难以维护。

所以解决的方法,是通过自定义 hook,将这些重复的内容提取封装出来。

拆分出自定义的 hook

新建一个useFetchData.js文件,里面存放要拆出来的自定义 hook 代码

import React, {useState, useEffect} from 'react';
import axios from 'axios';

const useFetchData = (url, initData) => {
  // initData是初始值,如果用户不传,默认就是 []
  const [data, setData] = useState(initData || []);
  const [loading, setLoading] = useSt...

课程介绍

「长乐未央」出品的 React 开发教程。

React 是用于构建用户界面的 JavaScript 库,起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在 2013 年 5 月开源了。

由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大,从最早的 UI 引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI,就能同时运行在服务器、浏览器和手机。

React 主要用于构建 UI。你可以在 React 里传递多种类型的参数,如声明代码,帮助你渲染出 UI、也可以是静态的 HTML DOM 元素、也可以传递动态变量、甚至是可交互的应用组件。

  1. 声明式设计:React 采用声明范式,可以轻松描述应用。
  2. 高效:React 通过对 DOM 的模拟,最大限度地减少与 DOM 的交互。
  3. 灵活:React 可以与已知的库或框架很好地配合。

适合这样的人

有一定开发基础,最好之前学过Vue的同学