ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

学习使用react-hooks中useEffect的例子

2020-06-30 15:05:27  阅读:387  来源: 互联网

标签:调用 函数 hooks effect react 组件 useEffect


之前学习hooks时根据官方例子整理的简单用法

HOOK的规则

  1. 只在最顶层使用hook

  2. 只在react函数中调用hook,不要在普通js函数中调用(在自定义hook中调用hook)

    那么 React 怎么知道哪个 state 对应哪个 useState?
    答案是 React 靠的是 Hook 调用的顺序。
    因为我们的示例中,Hook 的调用顺序在每次渲染中都是相同的,
    所以它能够正常工作
    

useEffect的基础语法

import React, { useEffect } from 'react';

	//useEffect是在页面渲染完成后执行的
 	useEffect(() => {
	    // Update the document title using the browser API
	    document.title = `You clicked ${count} times`;
    }

Effect Hook 可以在函数组件中执行副作用操作

  1. 在react的class组件中,render函数是不应该有任何副作用的,在这里执行操作太早了,应该在更新dom之后才执行我们的操作
  2. class中把副作用放在componentDidMount和componentDidUpdata函数中,相当于函数组件的useEffect

在这里useEffect做了什么呢

  1. 告诉react组件需要在渲染后执行某些操作,react会保存你传递的函数(effect),在执行dom更新之后调用他。
  2. 为什么在组件内部调用useEffect,放在组件内部方便访问state变量或者其他props。
  3. useEffect在每次渲染之后都会执行,react保证每次运行effect的同时,dom都已经更新完毕。

需要清除的effect

在react class中,在componentDidMount中设置订阅,
在componentWillUnmount中清除他,在effect中订阅和清除是在同一个地方执行

effect返回一个函数时,react在执行清除操作时会调用它
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
  • react会在组件卸载时执行清除操作,不需要清除的直接写不需要返回,需要清除的动作写在返回函数里面。
  • 可以使用多个effect,就像state的hook一样,写多个useEffect,将多个不相关的逻辑分离到不同的effect中。

useEffect的第二个参数

  1. 传递数组作为第二个可选参数,假设第二个参数值和要更新的数据相同则跳过effect的调用。实现性能优化
  2. 如果数组中有多个元素,即使只有一个元素发生变化,也会调用effect
  3. 对于有清除函数的effect同样适用,仅在第二个参数发生变化时重新订阅。
  4. 注意:使用此方法时,确保数组中包含了外部作用域中会随时间变化并且在effect中使用的变量。
  5. 如果想只执行一次effct,可以传递一个空数组

标签:调用,函数,hooks,effect,react,组件,useEffect
来源: https://blog.csdn.net/zeal_Y/article/details/107022826

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有