【高级React技术】Hook在企业项目中的使用心得以及一些组件的原理(State Hook)

简介: 【高级React技术】Hook在企业项目中的使用心得以及一些组件的原理(State Hook)

Hook

完全可选。可以在某些组件中尝试Hook,而无需重写任何现有代码。但如果你不想,你现在就不必学习或使用Hook。

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
AI 代码解读

100%向后兼容。钩子不包含任何破坏性更改。
现在可用。钩子已在v16.8.0中释放。
没有计划从React中删除该类。可以在本页底部的章节中阅读更多关于Hook的进步战略。
Hook不会影响对React概念的理解。相反,Hook为已知的React概念提供了更直接的API:props、state、context、refs和生命周期。正如我们稍后将看到的,Hook还提供了一种更强大的方式来组合它们。

如果不想知道添加Hook的具体原因,可以跳到下一章开始学习Hook!当然,也可以继续阅读本章以了解原因,并学习如何在不重写应用程序的情况下使用Hook。

function ExampleWithManyStates() {
  // 声明多个 state 变量!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}
AI 代码解读

我们经常维护一些组件。起初,组件很简单,但逐渐地,它们将充满状态逻辑和副作用。每个生命周期通常包含一些不相关的逻辑。例如,组件通常在componentDidMount和componentDidUpdate中获取数据。然而,相同的componentDidMount还可能包含许多其他逻辑,例如设置事件侦听,这需要稍后在componentWillUnmount中清除。相关且需要通过比较修改的代码被拆分,而完全不相关的代码以相同的方法组合。很容易产生错误并导致逻辑不一致。
使用浏览器的 API 更新页面标题

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

function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
AI 代码解读

在大多数情况下,不可能将组件分割成更小的粒度,因为状态逻辑无处不在。这也给测试带来了挑战。同时,这也是许多人将React与状态管理库一起使用的原因之一。然而,这通常会引入许多抽象概念,需要在不同的文件之间来回切换,从而使重用变得更加困难。
调用useEffect时,告诉React在完成对DOM的更改后运行“副作用”函数。因为副作用函数是在组件中声明的,所以它们可以访问组件的属性和状态。默认情况下,React在每次渲染(包括第一次渲染)后调用副作用函数。(我们将在使用Effect Hook时与类组件的生命周期方法进行更详细的比较。)

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

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
AI 代码解读

副作用函数还可以指定如何通过返回函数来“清除”副作用。例如,使用以下组件中的副作用功能订阅朋友的在线状态,并取消订阅以清除该状态

State Hook

介绍React中的useStateHook。它允许我们在函数组件中存储内部状态。
在Example组件中,我们通过调用useStateHook来声明一个新的状态变量。它向命名变量返回一对值。我们将变量命名为count,因为它存储了点击次数。我们通过传递0作为唯一参数,将useState初始化为0。第二个返回值本身就是一个函数。它允许我们更新count的值,所以我们称它为setCount。

function ExampleWithManyStates() {
  // 声明多个 state 变量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '学习 Hook' }]);
AI 代码解读

当用户单击按钮时,我们向setCount传递一个新值。React将重新渲染Example组件并将最新计数传递给它。

  function handleOrangeClick() {
    // 和 this.setState({ fruit: 'orange' }) 类似
    setFruit('orange');
  }
AI 代码解读

乍一看,这似乎太多了。不要急于求成!如果你不明白什么,请重新阅读上面的代码并从头到尾阅读。我们保证,一旦试图“忘记”状态在类中的工作方式,并以新的视角来看待这段代码,就会很容易理解。
不必使用多个状态变量。State变量可以很好地存储对象和数组,因此仍然可以将相关数据分组。然而,与SetState类中的情况不同。更新状态变量总是替换它,而不是合并它。

目录
打赏
0
0
0
0
154
分享
相关文章
React 视频播放控制组件 Video Controls
本文深入探讨了如何使用React创建功能丰富的视频播放控制组件(Video Controls)。首先介绍了React与HTML5 `&lt;video&gt;` 标签的基础知识,展示了如何通过状态管理和事件处理实现自定义控件。接着分析了常见问题如视频加载失败、控件样式不一致、状态管理混乱和性能问题,并提供了相应的解决方案。最后通过完整代码案例详细解释了播放、暂停、进度条和音量控制的实现方法,帮助开发者在React中构建高质量的视频播放组件。
35 17
React 音频预览组件:Audio Preview
本文介绍如何使用 React 构建音频预览组件,涵盖基础实现、常见问题及解决方案。通过 HTML5 `&lt;audio&gt;` 标签和 React 状态管理,实现播放控制。解决文件路径、浏览器兼容性等问题,并优化性能,避免状态不同步和内存泄漏,提升用户体验。
53 22
React 音频播放器组件 Audio Player
本文介绍如何使用React创建功能丰富的音频播放器组件。基于HTML5 `&lt;audio&gt;` 标签,结合React的状态管理和事件处理,实现播放、暂停、进度和音量控制等功能。通过代码示例展示基本实现,并探讨常见问题如自动播放限制、进度条不更新、文件加载失败及多实例冲突的解决方案。同时,避免易错点如忽略生命周期管理、错误处理和性能优化,确保高效开发与良好用户体验。
61 23
React 视频弹幕组件 Video Danmaku
本文介绍了如何在React中构建视频弹幕组件,提升用户观看体验和互动性。首先通过Create React App初始化项目,并集成`react-player`作为视频播放器。接着实现基本弹幕功能,包括评论的接收与显示,使用CSS动画实现滚动效果。针对常见问题如弹幕重叠、性能下降及同步问题,提供了随机化位置、分批加载和监听播放进度等解决方案。最后探讨了弹幕分类和特效等高级技巧,确保弹幕系统的高性能和良好用户体验。
51 23
React 视频播放控制组件 Video Controls
本文介绍了如何使用 React 构建视频播放控制组件(Video Controls),涵盖基本概念、创建步骤和常见问题解决。首先,通过 HTML5 `&lt;video&gt;` 标签和 React 组件化思想,实现播放/暂停按钮和进度条等基础功能。接着,详细讲解了初始化项目、构建 `VideoControls` 组件及与主应用的集成方法。最后,针对视频无法播放、控制器状态不同步、进度条卡顿和音量控制失效等问题提供了具体解决方案,并介绍了全屏播放和自定义样式等进阶功能。希望这些内容能帮助你在实际项目中更好地实现和优化视频播放功能。
83 40
React 视频上传组件 Video Upload
随着互联网的发展,视频内容在网站和应用中愈发重要。本文探讨如何使用React构建高效、可靠的视频上传组件,涵盖基础概念、常见问题及解决方案。通过React的虚拟DOM和组件化开发模式,实现文件选择、进度显示、格式验证等功能,并解决跨域请求、并发上传等易错点。提供完整代码案例,确保用户能顺畅上传视频。
128 92
React 视频播放器组件:Video Player
本文介绍了如何使用 React 和 HTML5 `&lt;video&gt;` 标签构建自定义视频播放器组件。首先,通过创建基础的 React 项目和 VideoPlayer 组件,实现了基本的播放、暂停功能。接着,探讨了常见问题如视频加载失败、控制条样式不一致、性能优化不足及状态管理混乱,并提供了相应的解决方案。最后,总结了构建高效视频播放器的关键要点,帮助开发者应对实际开发中的挑战。
109 27
React 图片灯箱组件 Image Lightbox
图片灯箱组件是一种常见的Web交互模式,用户点击缩略图后弹出全屏窗口展示大图,并提供导航功能。本文介绍了基于React框架的图片灯箱组件开发,涵盖初始化状态管理、图片加载与预加载、键盘和鼠标事件处理等常见问题及解决方案。通过`useState`和`useEffect`钩子管理状态,使用懒加载和预加载优化性能,确保流畅的用户体验。代码案例展示了组件的基本功能实现,包括打开/关闭灯箱、切换图片及键盘操作。
126 80
React 图片轮播组件 Image Carousel
本文介绍了如何使用React创建图片轮播组件。首先,解释了图片轮播的基本概念和组件结构,包括图片容器、导航按钮、指示器和自动播放功能。接着,通过代码示例详细说明了创建基本组件、添加自动播放、处理边界情况的步骤。还探讨了常见问题如状态更新不及时、内存泄漏和样式问题,并提供了解决方案。最后,介绍了进阶优化,如添加过渡效果、支持触摸事件和动态加载图片,帮助读者构建更完善的轮播组件。
50 16
React 图片放大组件 Image Zoom
本文介绍如何使用React创建图片放大组件(Image Zoom),提升用户体验。组件通过鼠标悬停或点击触发放大效果,利用`useState`管理状态,CSS实现视觉效果。常见问题包括图片失真、性能下降和移动端支持,分别可通过高质量图片源、优化事件处理和添加触摸事件解决。易错点涉及状态管理混乱、样式冲突和过多事件绑定,建议使用上下文API、CSS模块及优化事件绑定逻辑。高级功能扩展如多张图片支持和自定义放大区域进一步丰富了组件的实用性。
58 25
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等