react Effect副作用 - 避免滥用Effect

react Effect副作用 - 避免滥用Effect

  • react Effect副作用
    • 基础概率
      • 什么是纯函数? 什么是副作用函数?
        • 纯函数
        • 副作用函数
      • 什么时候使用Effect
      • 如何使用Effect
    • 避免滥用Effect
      • 根据 props 或 state 来更新 state
      • 当 props 变化时重置所有 state
      • 将数据传递给父组件
      • 获取异步数据

react Effect副作用

基础概率

阅读文章
React新文档:不要滥用effect哦
react 中文文档

什么是纯函数? 什么是副作用函数?

纯函数

仅执行计算操作,不做其他操作,这类函数通常被称为纯函数

纯函数的特征
1.只负责自己的任务,它不会更改在该函数调用前就已存在的对象或变量。
2.输入相同,则输出相同,给定相同的输入,纯函数应总是返回相同的结果。

React 便围绕着这个概念进行设计,假设编写的所有组件都是纯函数。

React渲染过程必须自始至终是纯粹的,不改变在渲染前,就已存在的任何对象或变量。 – 这将会使其变得不纯粹,也就是我们说的产生副作用

/*案例1:不纯粹组件的写法该组件正在读写其外部声明的 guest 变量。这意味着 多次调用这个组件会产生不同的 JSX!并且,如果 其他 组件读取 guest ,它们也会产生不同的 JSX,其结果取决于它们何时被渲染!这是无法预测的。
*/
let guest = 0;function Cup() {// Bad:正在更改预先存在的变量!guest = guest + 1;return <h2>Tea cup for guest #{guest}</h2>;
}export default function TeaSet() {return (<><Cup /><Cup /><Cup /></>);
}// 案例2:纯粹组件的写法
function Cup({ guest }) {return <h2>Tea cup for guest #{guest}</h2>;
}export default function TeaSet() {return (<><Cup guest={1} /><Cup guest={2} /><Cup guest={3} /></>);
}

React 提供了 “严格模式”,在严格模式下开发时,会调用每个组件函数两次。通过重复调用组件函数,严格模式有助于找到违反这些规则的组件。严格模式在生产环境下不生效,因此不会降低应用程序的速度。如需引入严格模式,可以用 <React.StrictMode> 包裹根组件。

副作用函数

在 React 中,副作用通常属于 事件处理程序。事件处理程序是 React 在你执行某些操作(如单击按钮)时运行的函数。即使事件处理程序是在组件内部定义的,它们也不会在渲染期间运行! 因此事件处理程序无需是纯函数

可以理解副作用为:额外发生的事情,与渲染过程无关。

如果无法为副作用找到合适的事件处理程序,可以选择使用useEffect

什么时候使用Effect

React中有两个重要的概念

  • Rendering code渲染代码是不带副作用的纯函数,开发者编写的组件渲染逻辑,最终会返回一段JSX。
    // 渲染代码
    function App() {
    const [age, setAge] = useState(10);
    return <div>{age}</div>;
    }// 包含副作用:在 React 中,JSX 的渲染必须是纯粹操作,不应该包含任何像修改 DOM 的副作用。
    import { useState, useRef, useEffect } from 'react';
    function VideoPlayer({ src, isPlaying }) {const ref = useRef(null);
    if (isPlaying) {ref.current.play();  // 渲染期间不能调用 `play()`,获取不到ref.current的值。
    } else {ref.current.pause(); // 同样,调用 `pause()` 也不行。
    }
    return <video ref={ref} src={src} loop playsInline />;
    }
    
  • Event handlers事件处理器是组件内部的函数,用于执行用户操作,可以包含副作用。
    function App() {const [age, setAge] = useState(10);const changAge = () => {setAge(11);}
    return <div onClick={changAge }>{age}</div>;
    }
    

但是并不是所有副作用都能在Event handlers事件处理器中解决,比如初始化进入页面之后需要请求数据,也就是说不是由用户触发的可以让useEffect处理。

所以使用Event handlers还是useEffect的一个思路是:判断需求是否由用户行为触发

如何使用Effect

每个React组件都经历相同的生命周期
1.当组件被添加到屏幕上时,会进行组件的 挂载
2.当组件接收到新的 props state 时,通常是作为对交互的响应,它会进行组件的更新
3.当组件从屏幕上移除时,它会进行组件的卸载

使用说明
1.useEffect的参数只能是一般函数,不能是异步函数(async)。如果在useEffect里使用异步函数请求数据,需要其外部包装一个一般函数并调用。
2.默认情况下,Effect会在每次渲染后都会执行。如果添加依赖,当依赖发生变化时Effect会执行。
3.useEffect参数函数会在组件每次渲染完毕(dom渲染完毕)后执行。
在这里插入图片描述
4.在useEffect的回调函数中,可以返回一个函数,该函数被称为清理函数,该函数会在下次Effect执行前调用。可以在清理函数中,清除上一次Effect执行所带来的影响。

// 初始化 先Effect回调再清理函数
// 其他情况,先清理函数再Effect
const [keyword,setKeyword] = useState();useEffect(()=>{ const timer = setTimeout();//初始化时,先设置一个定时器A// 清理函数return ()=>{/*这里形成了一个闭包,timer是定时器A的值。下一次Effect执行前,先清理定时器A再生成新的定时器*/clearTimeout(timer);     }},[keyword])
}

避免滥用Effect

核心:Effect通常用于暂时“跳出” React 代码并与一些外部系统进行同步。
思路
1.能使用Event handlers的优先使用Event handlersuseEffect是最后的选择。
2.可以在渲染时期进行的计算,就在渲染期间执行。

根据 props 或 state 来更新 state

先是用 fullName 的旧值执行了整个渲染流程,然后useEffect修改了fullName立即使用更新后的值又重新渲染了一遍。

function Form() {const [firstName, setFirstName] = useState('Taylor');const [lastName, setLastName] = useState('Swift');// 🔴 避免:多余的 state 和不必要的 Effectconst [fullName, setFullName] = useState('');useEffect(() => {setFullName(firstName + ' ' + lastName);}, [firstName, lastName]);// ...
}

如果一个值可以基于现有的 propsstate 计算得出,不要把它作为一个 state,而是在渲染期间直接计算这个值。

function Form() {const [firstName, setFirstName] = useState('Taylor');const [lastName, setLastName] = useState('Swift');// ✅ 非常好:在渲染期间进行计算const fullName = firstName + ' ' + lastName;// ...
}

当 props 变化时重置所有 state

一个ProfilePage组件,它接收一个userId代表当前正在操作的用户,里面有一个评论输入框,用一个state来记录输入框中的内容。为了防止切换用户后,原用户输入的内容被当前的用户发出这种误操作,有必要在userId改变时置空state,包括ProfilePage组件的所有子组件中的评论state

export default function ProfilePage({ userId }) {const [comment, setComment] = useState('');// 🔴 避免:当 prop 变化时,在 Effect 中重置 stateuseEffect(() => {setComment('');}, [userId]);// ...
}

当在相同的位置渲染相同的组件时,React 会保留状态。通过组件的key来判断当前的组件是否相同,每当 key(这里是 userId)变化时,React 将重新加载组件。

export default function ProfilePage({ userId }) {return (<ProfileuserId={userId}key={userId}/>);
}function Profile({ userId }) {// ✅ 当 key 变化时,该组件内的 comment 或其他 state 会自动被重置const [comment, setComment] = useState('');// ...
}

将数据传递给父组件

父组件:将修改state的方法传递给子组件
子组件:调用修改state的方法

在 React 中,数据从父组件流向子组件,当子组件在Effect 中更新其父组件的 state 时,数据流变得非常难以追踪。

// 不是很理解怎么会有这种写法??
function Parent() {const [data, setData] = useState(null);// ...return <Child onFetched={setData} />;
}function Child({ onFetched }) {const data = useSomeAPI();// 🔴 避免:在 Effect 中传递数据给父组件useEffect(() => {if (data) {onFetched(data);}}, [onFetched, data]);// ...
}

如果组件和父组件都需要相同的数据,那么可以让父组件获取那些数据,并将其向下传递给子组件

function Parent() {const data = useSomeAPI();// ...// ✅ 非常好:向子组件传递数据return <Child data={data} />;
}function Child({ data }) {// ...
}

获取异步数据

非常常见的一种写法是在effect中异步获取数据,但这种代码存在一个问题
假设快速地输入 “hello”。那么 query 会从 “h” 变成 “he”,“hel”,“hell” 最后是 “hello”。这会触发一连串不同的数据获取请求,但无法保证对应的返回顺序。例如,“hell” 的响应可能在 “hello” 的响应 之后 返回。这种情况被称为 竞态条件:两个不同的请求 “相互竞争”,并以与你预期不符的顺序返回。

function SearchResults({ query }) {const [results, setResults] = useState([]);const [page, setPage] = useState(1);useEffect(() => {// 🔴 避免:没有清除逻辑的获取数据fetchResults(query, page).then(json => {setResults(json);});}, [query, page]);function handleNextPageClick() {setPage(page + 1);}// ...
}

可以给Effect添加一个清理函数,来忽略较早的返回结果。下面的案例采用一个变量ignore来控制这个Effect回调的"有效性",只要是执行了下一个Effect回调,上一个的ignore就变成了true,此时如果刚好上一个Effect的请求结束,由于ignore=true会跳过setResults

function SearchResults({ query }) {const [results, setResults] = useState([]);const [page, setPage] = useState(1);useEffect(() => {let ignore = false;fetchResults(query, page).then(json => {if (!ignore) {setResults(json);}});return () => {ignore = true;};}, [query, page]);function handleNextPageClick() {setPage(page + 1);}// ...
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/698433.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Activity因配置改变重建,ViewModel#onClear方法为什么不被调用?

1&#xff0c;问题 注意到切换语言或字体大小改变时&#xff0c;Activity会发生重建&#xff0c;但对应的ViewModel却不会被clear&#xff0c;甚至在重建的Activity&#xff0c;通过new ViewModelProvider(this).get(ViewModel.class)也是上一个Activity的实例&#xff0c;为什…

c++高级篇(一) —— 初识Linux下的进程控制

linux的信号 信号的概念 在Linux中&#xff0c;信号是一种用于进程间通信和处理异步事件的机制&#xff0c;用于进程之间相互传递消息和通知进程发生了事件&#xff0c;但是&#xff0c;它不能给进程传递任何数据。 信号产生的原因有很多种&#xff0c;在shell中&#xff0c…

C/C++ VScode: launch: program ...... dose not exist

VScode: launch: program … dose not exist 介绍 参考VS Code 配置 C/C 编程运行环境&#xff08;保姆级教程&#xff09;教程配置了VSCode。在配置launch.json适用多个.c 文件编译时&#xff0c;弹出下面错误。 原因和解决方法 是task.json 默认配置的问题。 默认的 cwd参…

Java数据类型:基本类型

Java是一种强类型语言&#xff0c;定义变量时&#xff0c;必须指定数据类型。 // 变量必须指定数据类型 private String username;初学者不免有个疑问&#xff1a;在实际编写代码的过程中&#xff0c;该如何选择数据类型呢&#xff1f; 回答这个问题之前&#xff0c;先来解决…

黑马点评项目总结及个人优化

怎么根据前端代码实现自己的后端业务,实现不同接口 查阅文档:如果有完善的接口文档,可以直接查阅文档来了解后端所有接口的业务逻辑和功能。 阅读后端代码:通过阅读后端代码,特别是控制器(Controller)层和服务(Service)层的代码,可以了解后端所有接口的具体实现逻辑。…

vscode主侧栏源代码管理(Source Control)不见了!!!

今天上班突然发现vscode中主侧栏中源代码管理&#xff08;Source Control&#xff09;不见了&#xff0c;项目又着急赶工&#xff0c;没时间找它&#xff0c;可真愁死我了。 以为这样代码没办法提交了&#xff1f;&#xff1f;&#xff1f; 嘿嘿&#xff0c; 还好我用命令&a…

不限经验,专业,也能月薪2-3W,这个神仙副业今年太火了!

哈喽&#xff0c;大家好&#xff0c;我是醒醒团队电商花花。 一个月前&#xff0c;有朋友找我咨询视频号的问题&#xff0c;关于营业执照的问题&#xff0c;问我做视频号小店用什么营业执照&#xff0c;我就把视频号小店的营业执照问题给讲一下。 因为个体店执照在视频号上不…

PCB笔记(二十六):PCB检查

前言 首先检查元器件是否100&#xff05; 放置 文章目录 1、打开DRC2、database check3、检查DRC4、检查多余的线5、其他需要注意的点a.检查差分线、等长线是否已调好b.注意检查晶振、电感等元件上/下方是否其他线经过&#xff08;一般不允许线经过&#xff09;c.打开place_bo…

【启明智显技术分享】SSD201/SSD202D核心板UI界面开发全攻略:LVGL使用指南

提示&#xff1a;作为Espressif&#xff08;乐鑫科技&#xff09;大中华区合作伙伴及sigmastar&#xff08;厦门星宸&#xff09;VAD合作伙伴&#xff0c;我们不仅用心整理了你在开发过程中可能会遇到的问题以及快速上手的简明教程供开发小伙伴参考。同时也用心整理了乐鑫及星宸…

浅谈电动汽车充电站的电气安全

1 引言 1月14日日上午10点左右&#xff0c;青岛市市北区辽宁路63号公交停车场内&#xff0c;一辆报废公交车突然起火&#xff0c;由于大风天气&#xff0c;大火很快引燃了停在旁边的几辆报废车。消防人员快速赶到&#xff0c;迅速控制住火势。11时30分&#xff0c;停车场内的…

AR项目的技术难点

AR项目的技术难点主要体现在以下几个方面&#xff0c;AR项目的技术难点体现在多个方面&#xff0c;需要从多个角度进行综合考虑。随着技术的进步和标准的完善&#xff0c;AR项目开发将会变得更加容易&#xff0c;AR技术也将得到更加广泛的应用。北京木奇移动技术有限公司&#…

电脑桌面便签软件推荐,电脑桌面怎么设置便签

在日常工作中&#xff0c;电脑已成为我们不可或缺的办公工具。面对繁杂的工作任务和信息&#xff0c;如何在电脑桌面上高效管理待办事项&#xff0c;成为了提升工作效率的关键。为了更好的管理内容&#xff0c;很多人会选择一款优秀的电脑桌面便签软件&#xff0c;这类软件能帮…