有时组件中的数据需要与外部系统的数据或操作同步,React提供了Hook Effect。

Effect 会在组件渲染后运行一些代码,以便将组件与 React 之外的某些系统同步,包比如浏览器 API、第三方小部件,以及网络请求等。

如以下的video播放器的简单加载:

// 声明 Effect
import { useEffect, useRef } from 'react';
/*
* src:来自父组件的props,视频资源的地址
* isPlaying:来自父组件的props,视频是否播放,boolean值
* */
function VideoPlayer({ src, isPlaying }) {
const ref = useRef(null);
/*
Effect 依赖 isPlaying prop 控制逻辑
如果 isPlaying 在上一次渲染时与当前相同,跳过运行 Effect
如果不添加依赖,组件每次渲染后都会执行 Effect
如果依赖为[],组件只在挂载后执行 Effect */
useEffect(() => {
// 组件渲染之后执行以下代码
// 否则video dom尚未渲染,不存在play() 和 pause()方法
if (isPlaying) {
ref.current.play();
} else {
ref.current.pause();
}
}, [isPlaying]);
// 同步到 React state 的“外部系统”是浏览器媒体 API
return <video ref={ref} src={src} loop playsInline />;
}
export default function App() {
const [isPlaying, setIsPlaying] = useState(false);
return (
<>
<button onClick={() => setIsPlaying(!isPlaying)}>
{isPlaying ? 'Pause' : 'Play'}
</button>
<VideoPlayer
isPlaying={isPlaying}
src="water.mp4"
/>
</>
);
}

有时 Effect 需要指定如何停止、撤销,或者清除它的效果。例如,“连接”操作需要“断连”,“获取”既需要“取消”也需要“忽略”。这时候就需要使用清理函数。

每次重新执行 Effect 之前,React 都会调用清理函数;组件被卸载时,也会调用清理函数。

严格模式时,在开发环境下,Effect出现额外的执行,是 React 正在调试你的代码。

通常的解决办法是实现清理函数,停止或撤销 Effect 正在执行的任何操作。

在生产环境下,Effect只会执行一次。

App.js

import { useState, useEffect } from 'react';
import { createConnection } from './chat.js'; export default function ChatRoom() {
useEffect(() => {
//建立连接
const connection = createConnection();
connection.connect();
//清理函数,断开连接
return () => connection.disconnect();
}, []);
return <h1>欢迎来到聊天室!</h1>;
}

chat.js

export function createConnection() {
// 连接的示例
return {
connect() {
console.log('连接中……');
},
disconnect() {
console.log('连接断开。');
}
};
}

Effect应用举例:

1、订阅事件

如果 Effect 订阅了某些事件,清理函数应该退订这些事件:

useEffect(() => {
function handleScroll(e) {
console.log(window.scrollX, window.scrollY);
}
//页面滚动事件
window.addEventListener('scroll', handleScroll);
//清理页面滚动事件
return () => window.removeEventListener('scroll', handleScroll);
}, []);

2、触发动画

如果 Effect 对某些内容加入了动画,清理函数应将动画重置:

useEffect(() => {
const node = ref.current;
node.style.opacity = 1; // 触发动画
return () => {
node.style.opacity = 0; // 重置为初始值
};
}, []);

3、获取数据

如果 Effect 将会获取数据,清理函数应该要么终止数据获取操作,要么忽略其结果:

useEffect(() => {
let ignore = false; async function startFetching() {
const json = await fetchTodos(userId);
//不忽略结果,更新数据
if (!ignore) {
setTodos(json);
}
} startFetching(); return () => {
ignore = true;
};
}, [userId]);

还有一些情形看似需要使用 Effect 实则并不需要,比如:初始化应用时,某些逻辑只需要在应用程序启动时运行一次。比如,验证登陆状态和加载本地程序数据,可以将其放在组件之外:

if (typeof window !== 'undefined') { // 检查是否在浏览器中运行
checkAuthToken();
loadDataFromLocalStorage();
} function App() {
// ……
}

React Hook 之 Effect :同步与外部系统的数据的更多相关文章

  1. GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)

    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频) GraphQL + React Apollo + React Hook 大型项目实战 #1 介绍「 ...

  2. React Hook:使用 useEffect

    React Hook:使用 useEffect 一.描述 二.需要清理的副作用 1.在 class 组件中 2.使用 effect Hook 的示例 1.useEffect 做了什么? 2.为什么在组 ...

  3. 使用React Hook后的一些体会

    一.前言 距离React Hook发布已经有一段时间了,笔者在之前也一直在等待机会来尝试一下Hook,这个尝试不是像文档中介绍的可以先在已有项目中的小组件和新组件上尝试,而是尝试用Hook的方式构建整 ...

  4. React Hook上车

    React Hook 是 v16.8 的新功能,自诞生以来,受到广泛的好评,在 React 版本更新中具有里程碑的意义.现在都2020年了,再不上车 React Hook 就真的 out 了... H ...

  5. React Hook Flow Diagram

    一.概述 Donovon has created this nice flowchart that explains the new lifecycle of a Hooks component. C ...

  6. 【翻译】Flink Table Api & SQL —— 连接到外部系统

    本文翻译自官网:Connect to External Systems  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev ...

  7. React Hook挖坑

    React Hook挖坑 如果已经使用过 Hook,相信你一定回不去了,这种用函数的方式去编写有状态组件简直太爽啦. 如果还没使用过 Hook,那你要赶紧升级你的 React(v16.8+),投入 H ...

  8. 【译】值得推荐的十大React Hook 库

    十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文作者:Juraj Pavlo ...

  9. Akka(25): Stream:对接外部系统-Integration

    在现实应用中akka-stream往往需要集成其它的外部系统形成完整的应用.这些外部系统可能是akka系列系统或者其它类型的系统.所以,akka-stream必须提供一些函数和方法来实现与各种不同类型 ...

  10. Dynamics CRM2013 从外部系统取到CRM系统的用户头像

    CRM从2013开始引入了entityimage的概念,具体这个字段怎么设置的,图像是怎么上传的这里就不谈了.说实在的这玩意在项目中没啥用,所以也没去关注,直到最近遇到了个难题,要在外部系统去获取这个 ...

随机推荐

  1. 一篇文章让你弄懂分布式一致性协议Paxos

    一.Paxos协议简介 Paxos算法由Leslie Lamport在1990年提出,它是少数在工程实践中被证实的强一致性.高可用.去中心的分布式协议.Paxos协议用于在多个副本之间在有限时间内对某 ...

  2. PostgreSQL-分区表介绍

    一.分区简介 表分区是解决一些因单表过大引用的性能问题的方式,比如某张表过大就会造成查询变慢,可能分区是一种解决方案.一般建议当单表大小超过内存就可以考虑表分区了. 表的分区就是将一个逻辑上的大表(主 ...

  3. Avalonia开发(二)项目结构解析

    一.前言 在Avalonia开发(一)环境搭建 文章中介绍了Avalonia的介绍.开发环境的搭建.项目创建,以及项目FirstAvaloniaApp项目结构的介绍.本篇文章将介绍各平台的项目介绍. ...

  4. Solution -「营业」「CF 527C」Glass Carving

    Description Link. 有一个块 \(n\times m\) 的矩形,有 \(q\) 次操作,每次把矩形横 / 竖着切一刀,问切完后的最大矩形面积. Solution 一个不同于大多数人. ...

  5. Linux 安装 helm

    下载helm压缩包,地址   https://github.com/helm/helm/releases/tag/v3.10.1 选择适合自己操作系统的包 上传解压安装 1 root@calico-m ...

  6. UVA10054 The Necklace 题解

    好可恶一道题,怎么没人告诉我输出之间有空行( 思路是先抽象成图,然后跑一边dfs记录边的前后顺序. 对于不能成环的情况,只需要再开个数组记录度数判断奇点即可. 若存在奇点则break掉,剩下的跑dfs ...

  7. 《最新出炉》系列初窥篇-Python+Playwright自动化测试-21-处理鼠标拖拽-番外篇

    1.简介 前边宏哥拖拽有提到那个反爬虫机制,加了各种参数,以及加载js脚本文件还是有问题,偶尔宏哥好像发现了解决问题的办法,看到了黎明的曙光,宏哥就说试一下看看行不行,万一实现了.结果宏哥试了结果真的 ...

  8. Util应用框架 UI 开发快速入门

    本文是Util应用框架 Angular UI 开发快速入门教程. Util前端技术概述 Util 应用框架目前仅支持用于开发管理后台的 UI. 本文介绍了 Util UI 的技术特点和功能支持. UI ...

  9. [Python急救站课程]日期和时间的输出

    日期和时间的输出 from datetime import datetime # 引用datetime 库 now = datetime.now() # 获得当前日期和时间信息 print(now) ...

  10. JavaScript 语法:注释与输入 / 输出

    作者:WangMin 格言:努力做好自己喜欢的每一件事 JavaScript 注释 JavaScript 注释用于解释 JavaScript 代码,提高代码的可读性,也可以用于在测试替代代码时阻止执行 ...