【高级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 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
166 68
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
147 67
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
154 62
React 图片组件样式自定义:常见问题与解决方案
在 React 开发中,图片组件的样式自定义常因细节问题导致布局错乱、性能损耗或交互异常。本文系统梳理常见问题及解决方案,涵盖基础样式应用、响应式设计、加载状态与性能优化等,结合代码案例帮助开发者高效实现图片组件的样式控制。重点解决图片尺寸不匹配、边框阴影不一致、移动端显示模糊、加载失败处理及懒加载等问题,并总结易错点和最佳实践,助力开发者提升开发效率和用户体验。
138 22
React音频播放列表组件:常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践,帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法,确保高效实现功能并减少调试时间。
161 30
React 音频音量控制组件 Audio Volume Control
在现代Web应用中,音频播放功能不可或缺。React以其声明式编程和组件化开发模式,非常适合构建复杂的音频音量控制组件。本文介绍了如何使用HTML5 `&lt;audio&gt;`元素与React结合,实现直观的音量控制系统,并解决了常见问题如音量范围不合理、初始音量设置及性能优化等,帮助开发者打造优秀的音频播放器。
149 27
React 音频进度条组件 Audio Progress Bar
在现代Web开发中,音频播放功能不可或缺。使用React构建音频进度条组件,不仅能实现播放控制和拖动跳转,还能确保代码的可维护性和复用性。本文介绍了如何利用HTML5 `&lt;audio&gt;`标签的基础功能、解决获取音频时长和当前时间的问题、动态更新进度条样式,并避免常见错误如忘记移除事件监听器和忽略跨浏览器兼容性。通过这些方法,开发者可以打造高质量的音频播放器,提升用户体验。
123 6
AI助理

你好,我是AI助理

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

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问