useEffect Hook 是如何工作的?【www.129028.com金沙】

日期:2020-05-07编辑作者:Web前端

我们把reactjs的初值传递给第一个状态,这是有意义的,这个值永远不会改变。

而现在我们的hook,一方面它是直接用在function当中,而不是class;另一方面每一个hook都是相互独立的,不同组件调用同一个hook也能保证各自状态的独立性。这就是两者的本质区别了。

虽然useEffect会在浏览器绘制后延迟执行,但会保证在任何新的渲染前执行。React 将在组件更新前刷新上一轮渲染的effect。

You clicked {count} times

因此,即使咱们将[inputRef]作为useEffect的第二个参数传递,它实际上只在初始挂载时运行一次。这基本上是componentDidMount效果了。

... componentDidUpdate { // 先把上一个friend.id解绑 ChatAPI.unsubscribeFromFriendStatus( prevProps.friend.id, this.handleStatusChange ); // 再重新注册新但friend.id ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); }...

注意到咱们没有将第二个参数传递给useEffect,这是不好的,不要这样做。

import { useState } from 'react';function Example() { const [count, setCount] = useState; return (  You clicked {count} times  setCount}> Click me   );}

这仍然是硬编码的,但是现在咱们可以通过包装Reddit组件来定制它,该组件允许咱们更改subreddit。

怎么写自定义的Effect Hooks?

虚接着扩展一下示例,以涵盖另一个常见问题:如何在某些内容发生更改时重新获取数据,例如用户ID,名称等。

你在还在为组件中的this指向而晕头转向吗?——既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this。

下面是一个组件,它从Reddit获取帖子并显示它们

React为什么要搞一个Hooks?

单击“Show/Hide”按钮,看看控制台,它在消失之前打印“unmounting...”,并在它再次出现时打印 “render!”。现在,点击Re-render按钮。每次点击,它都会打render!,还会打印umounting,这似乎是奇怪的。

import Cat from 'components/cat'class DataProvider extends React.Component { constructor; this.state = { target: 'Zac' }; } render() { return (  {this.props.render }} ( )}/>虽然这个模式叫Render Props,但不是说非用一个叫render的props不可,习惯上大家更常写成下面这种:... {data => (  )}

为了解决这个问题,我们需要传递一个数组作为第二个参数,数组内容又是啥呢。

你还在为该使用无状态组件还是有状态组件而烦恼吗?——拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function。

useEffect所依赖的唯一变量是setPosts。因此,咱们应该在这里传递数组[setPosts]。因为setPosts是useState返回的setter,所以不会在每次渲染时重新创建它,因此effect只会运行一次。

function add { const result = 0; return result + 1;}add; //1

使用useEffect就像瑞士军刀。它可以用于很多事情,从设置订阅到创建和清理计时器,再到更改ref的值。

回到一开始我们用的例子,我们分解来看到底state hooks做了什么:

记住,useState是有状态的。它只使用初始状态一次,即第一次渲染,之后它就被忽略了。所以传递一个瞬态值是安全的,比如一个可能改变或其他变量的prop。

useEffect怎么解绑一些副作用

再来看看另一个常见的用例:获取数据并显示它。在类组件中,无们通过可以将此代码放在componentDidMount方法中。在 hook 中可以使用 useEffect hook 来实现,当然还需要用useState来存储数据。

import { useState, useEffect } from 'react';function FriendStatus { const [isOnline, setIsOnline] = useState; function handleStatusChange { setIsOnline; } useEffect => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // 一定注意下这个顺序:告诉react在下次重新渲染组件之后,同时是下次调用ChatAPI.subscribeToFriendStatus之前执行cleanup return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if  { return 'Loading...'; } return isOnline ? 'Online' : 'Offline';}

各位可以只使用一个状态来存储输入,然后将相同的值发送到Reddit,但是Reddit组件会在每次按键时获取数据。

以上这两种模式看上去都挺不错的,很多库也运用了这种模式,比如我们常用的React Router。但我们仔细看这两种模式,会发现它们会增加我们代码的层级关系。最直观的体现,打开devtool看看你的组件层级嵌套是不是很夸张吧。这时候再回过头看我们上一节给出的hooks例子,是不是简洁多了,没有多余的层级嵌套。把各种想要的功能写成一个一个可复用的自定义hook,当你的组件想用什么功能时,直接在组件里调用这个hook即可。

与componentDidMount、componentDidUpdate不同的是,在浏览器完成布局与绘制之后,传给useEffect的函数会延迟调用。这使得它适用于许多常见的副作用场景,比如如设置订阅和事件处理等情况,因此不应在函数中执行阻塞浏览器更新屏幕的操作。

渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到我们的DataProvider组件包含了所有跟状态相关的代码,而Cat组件则可以是一个单纯的展示型组件,这样一来DataProvider就可以单独复用了。

仅在挂载和卸载的时候执行

我们在上一节的例子中增加一个新功能:

作者:Dave Ceddia译者:前端小智原文链接:-hook-examples/

function FriendListItem { const isOnline = useFriendStatus; return ( 
const [value, setValue] = useState('initial');useEffect(() = { // 仅在 value 更改时更新 console.log(value);}, [value]) 

Hooks本质上就是一类特殊的函数,它们可以为你的函数型组件注入一些特殊的功能。咦?这听起来有点像被诟病的Mixins啊?难道是Mixins要在react中死灰复燃了吗?当然不会了,等会我们再来谈两者的区别。总而言之,这些hooks的目标就是让你不再写class,让function一统江湖。

然而,并非所有effect都可以被延迟执行。例如,在浏览器执行下一次绘制前,用户可见的 DOM 变更就必须同步执行,这样用户才不会感觉到视觉上的不一致。(概念上类似于被动监听事件和主动监听事件的区别。)React为此提供了一个额外的useLayoutEffectHook 来处理这类effect。它和useEffect的结构相同,区别只是调用时机不同。

这种场景很常见,当我们在componentDidMount里添加了一个注册,我们得马上在componentWillUnmount中,也就是组件被注销之前清除掉我们添加的注册,否则内存泄漏的问题就出现了。

// 从props中解构`subreddit`:function Reddit({ subreddit }) { const [posts, setPosts] = useState([]); useEffect(async () = { const res = await fetch( `${subreddit}.json` ); const json = await res.json(); setPosts(json.data.children.map(c = c.data)); // 当`subreddit`改变时重新运行useEffect: }, [subreddit, setPosts]); return ( ul {posts.map(post = ( li key={post.id}{post.title}/li ))} /ul );}ReactDOM.render( Reddit subreddit='reactjs' /, document.querySelector("#root"));

其实我们看hook的“形态”,有点类似之前被官方否定掉的Mixins这种方案,都是提供一种“插拔式的功能注入”的能力。而mixins之所以被否定,是因为Mixins机制是让多个Mixins共享一个对象的数据空间,这样就很难确保不同Mixins依赖的状态不发生冲突。

上面这个示例中,咱们传入[value]作为第二个参数。这个参数是什么作用呢?如果value的值是5,而且咱们的组件重渲染的时候value还是等于 5,React 将对前一次渲染的[5]和后一次渲染的[5]进行比较。因为数组中的所有元素都是相等的(5 === 5),React 会跳过这个effect,这就实现了性能的优化。

function FriendStatus { const isOnline = useFriendStatus; if  { return 'Loading...'; } return isOnline ? 'Online' : 'Offline';}

只在挂载的时候执行

我们再梳理一遍下面代码的逻辑:

当数据改变时重新获取

首先,useState是可以多次调用的,所以我们完全可以这样写:

在顶部,我们使用useRef创建一个空的ref。 将它传递给input的ref prop,在渲染DOM 时设置它。 而且,重要的是,useRef返回的值在渲染之间是稳定的 - 它不会改变。

鉴于此,react规定我们必须把hooks写在函数的最外层,不能写在ifelse等条件语句当中,来确保hooks的执行顺序一致。

使用useEffect,可以直接在函数组件内处理生命周期事件。 如果你熟悉 React class 的生命周期函数,你可以把useEffectHook 看做componentDidMount,componentDidUpdate和componentWillUnmount这三个函数的组合。来看看例子:

是不是简单多了!可以看到,Example变成了一个函数,但这个函数却有自己的状态,同时它还可以更新自己的状态。这个函数之所以这么了不得,就是因为它注入了一个hook--useState,就是这个hook让我们的函数变成了一个有状态的函数。

为啥每次渲染都会打印 'unmounting'。咱们可以有选择性地从useEffect返回的cleanup函数只在组件卸载时调用。React 会在组件卸载的时候执行清除操作。正如之前学到的,effect在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个effect进行清除。这实际上比componentWillUnmount生命周期更强大,因为如果需要的话,它允许咱们在每次渲染之前和之后执行副作用。

还有一件让我很苦恼的事情。我在之前的react系列文章当中曾经说过,尽可能把你的组件写成无状态组件的形式,因为它们更方便复用,可独立测试。然而很多时候,我们用function写了一个简洁完美的无状态组件,后来因为需求变动这个组件必须得有自己的state,我们又得很麻烦的把function改成class。

不过,这隐藏了一个问题:传递空数组容易出现bug。如果咱们添加了依赖项,那么很容易忘记向其中添加项,如果错过了一个依赖项,那么该值将在下一次运行useEffect时失效,并且可能会导致一些奇怪的问题。

读取状态值

在CodeSandbox中尝试一下。

除了上文重点介绍的useState和useEffect,react还给我们提供来很多有用的hooks:

import React, { useEffect, useState } from 'react';import ReactDOM from 'react-dom';function LifecycleDemo() { useEffect(() = { // 默认情况下,每次渲染后都会调用该函数 console.log('render!'); // 如果要实现 componentWillUnmount, // 在末尾处返回一个函数 // React 在该函数组件卸载前调用该方法 // 其命名为 cleanup 是为了表明此函数的目的, // 但其实也可以返回一个箭头函数或者给起一个别的名字。 return function cleanup () { console.log('unmounting...'); } }) return "I'm a lifecycle demo";}function App() { // 建立一个状态,为了方便 // 触发重新渲染的方法。 const [random, setRandom] = useState(Math.random()); // 建立一个状态来切换 LifecycleDemo 的显示和隐藏 const [mounted, setMounted] = useState(true); // 这个函数改变 random,并触发重新渲染 // 在控制台会看到 render 被打印 const reRender = () = setRandom(Math.random()); // 该函数将卸载并重新挂载 LifecycleDemo // 在控制台可以看到 unmounting 被打印 const toggle = () = setMounted(!mounted); return (  button onClick={reRender}Re-render/button button onClick={toggle}Show/Hide LifecycleDemo/button {mounted  LifecycleDemo/} / );}ReactDOM.render(App/, document.querySelector('#root'));

假如一个组件有多个状态值怎么办?

如果希望effect较少运行,可以提供第二个参数 - 值数组。 将它们视为该effect的依赖关系。 如果其中一个依赖项自上次更改后,effect将再次运行。

想要复用一个有状态的组件太麻烦了!

这个应用程序在这里保留了两个状态:当前的输入值和当前的subreddit。提交表单将提交subreddit,这会导致Reddit重新获取数据。

classes真的太让人困惑了!

顶部的useState看起来有点奇怪,尤其是第二行:

按照上一节的思路,每次重新渲染都要执行一遍这些副作用函数,显然是不经济的。怎么跳过一些不必要的计算呢?我们只需要给useEffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改变时,才执行我们传的副作用函数。

首先,咱们更改Reddit组件以接受subreddit作为一个prop,并基于该subreddit获取数据,只有当prop更改时才重新运行effect.

在这样的背景下,Hooks便横空出世了!

不传递第二个参数会导致每次渲染都会运行useEffect。然后,当它运行时,它获取数据并更新状态。然后,一旦状态更新,组件将重新呈现,这将再次触发useEffect,这就是问题所在。

所以我们做的事情其实就是,声明了一个状态变量count,把它的初始值设为0,同时提供了一个可以更改count的函数setCount。

useEffect(() = { console.log('mounted'); return () = console.log('unmounting...');}, []) 

useState是react自带的一个hook函数,它的作用就是用来声明状态变量。useState这个函数接收的参数是我们的状态初始值,它返回了一个数组,这个数组的第[0]项是当前当前的状态值,第[1]项是可以改变状态值的方法函数。

在这个例子中,一起来看下如何使用useEffect和useRefhook 将input控件聚焦在第一次渲染上。

首先,我们声明了一个状态变量count,将它的初始值设为0。然后我们告诉react,我们的这个组件有一个副作用。我们给useEffecthook传了一个匿名函数,这个匿名函数就是我们的副作用。在这个例子里,我们的副作用是调用browser API来修改文档标题。当react要渲染我们的组件时,它会先记住我们用到的副作用。等react更新了DOM之后,它再依次执行我们定义的副作用函数。

与其将useEffect看作一个函数来完成3个独立生命周期的工作,不如将它简单地看作是在渲染之后执行副作用的一种方式,包括在每次渲染之前和卸载之前咱们希望执行的需要清理的东西。

let _useState = useState;let count = _useState[0];let setCount = _useState[1];

如果想执行只运行一次的effect(仅在组件挂载和卸载时执行),可以传递一个空数组([])作为第二个参数。这就告诉 React 你的effect不依赖于props或state中的任何值,所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。

 componentDidMount() { ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); } componentWillUnmount() { ChatAPI.unsubscribeFromFriendStatus( this.props.friend.id, this.handleStatusChange ); }

这样只会在组件初次渲染的时候打印mounted,在组件卸载后打印:unmounting。

简直Fabulous!

import React, { useEffect, useState } from "react";import ReactDOM from "react-dom";function Reddit() { const [posts, setPosts] = useState([]); useEffect(async () = { const res = await fetch( "" ); const json = await res.json(); setPosts(json.data.children.map(c = c.data)); }); // 这里没有传入第二个参数,你猜猜会发生什么? // Render as usual return ( ul {posts.map(post = ( li key={post.id}{post.title}/li ))} /ul );}ReactDOM.render( Reddit /, document.querySelector("#root"));

我不再一一介绍,大家自行去查阅官方文档。

const [inputValue, setValue] = useState("reactjs");const [subreddit, setSubreddit] = useState(inputValue);

我们通常希望一个函数只做一件事情,但我们的生命周期钩子函数里通常同时做了很多事情。比如我们需要在componentDidMount中发起ajax请求获取数据,绑定一些事件监听等等。同时,有时候我们还需要在componentDidUpdate做一遍同样的事情。当项目变复杂后,这一块的代码也变得不那么直观。

使用 useEffect 获取数据

const withUser = WrappedComponent => { const user = sessionStorage.getItem; return props => ;};const UserPage = props => (  My name is {props.user}! );export default withUser;

阻止每次重新渲染都会执行 useEffect

function ExampleWithManyStates() { const [age, setAge] = useState; const [fruit, setFruit] = useState; const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

顺便说一下:输入的时候要小心,因为没有错误处理,所以当你输入的subreddit不存在,应用程序将会爆炸,实现错误处理就作为你们的练习。

react是怎么保证多个useState的相互独立的?

在 CodeSandbox 试试这个示例。

为什么要让副作用函数每次组件更新都执行一遍?

useEffect在每次渲染后运行(默认情况下),并且可以选择在再次运行之前自行清理。

我们都知道react都核心思想就是,将一个页面拆成一堆独立的,可复用的组件,并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react,你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那些写成class的组件,它们本身包含了状态,所以复用这类组件就变得很麻烦。

时间: 2019-09-06阅读: 256标签: hooks

这里我们就发现了问题,通常来说我们在一个函数中声明的变量,当函数运行完成后,这个变量也就销毁了,比如考虑下面的例子:

那么第二行呢,如果初始状态改变了呢,如当你输入box时候。

还有哪些自带的Effect Hooks?

import React, { useEffect, useState, useRef } from "react";import ReactDOM from "react-dom";function App() { // 存储对 input 的DOM节点的引用 const inputRef = useRef(); // 将输入值存储在状态中 const [value, setValue] = useState(""); useEffect( () = { // 这在第一次渲染之后运行 console.log("render"); // inputRef.current.focus(); }, // effect 依赖 inputRef [inputRef] ); return ( input ref={inputRef} value={value} onChange={e = setValue(e.target.value)} / );}ReactDOM.render(App /, document.querySelector("#root"));

其次,useState接收的初始值没有规定一定要是string/number/boolean这种简单数据类型,它完全可以接收对象或者数组作为参数。唯一需要注意的点是,之前我们的this.setState做的是合并状态后返回一个新状态,而useState是直接替换老状态后返回新状态。最后,react也给我们提供了一个useReducer的hook,如果你更喜欢redux式的状态管理方案的话。

不完全的生命周期

结尾

许许多多的用途

不管我们反复调用add函数多少次,结果都是1。因为每一次我们调用add时,result变量都是从初始值0开始的。那为什么上面的Example函数每次执行的时候,都是拿的上一次执行完的状态值作为初始值?答案是:是react帮我们记住的。至于react是用什么机制记住的,我们可以再思考一下。

想象一下:你有一个非常好用的函数组件,然后有一天,咱们需要向它添加一个生命周期方法。刚开始咱们可能会想怎么能解决这个问题,然后最后变成,通常的做法是将它转换成一个类。但有时候咱们就是要用函数方式,怎么破?useEffecthook 出现就是为了解决这种情况。

不知道你阅读完整篇文章的感受如何,或者对hooks有任何角度的看法和思考都欢迎在评论区一起讨论。另外如果你有换工作的打算,我们部门真的很缺人,欢迎私信勾搭~

本文由www.129028.com金沙发布于Web前端,转载请注明出处:useEffect Hook 是如何工作的?【www.129028.com金沙】

关键词:

ES6+ 中对象解构小技巧

3.解构中的 rest(变量由多变少) 与spread(变量由少变多) 对象解构不仅可以用于变量声明,还可以用于变量赋值 : let ...

详细>>

JS如何提高扩展运算符的性能?

时间: 2019-08-04阅读: 175标签: 性能 在这篇文章中,我们会进行一个有趣的测试,看看我们如何提高扩展运算符的性能。...

详细>>

node中的内置模块fswww.129028.com金沙

获取文件或文件夹的信息异步 fs.stat(路径,(err,data)={})同步 let res =fs.statSync(路径)流式读取1、创建可读流2、创建一个可...

详细>>

Vue中在新窗口打开页面及Vue-router的使用_vue.js_脚本之家

时间: 2019-09-07阅读: 110标签: 跳转 背景 route-link是在html中静态定义的,也可以在代码中动态跳转: 在开发提分加项目...

详细>>