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

时间:2020-6-30 作者:admin


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

HOOK的规则

  1. 只在最顶层使用hook

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

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

useEffect的基础语法

import React, { useEffect } from 'react';

 	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,可以传递一个空数组
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:87074139@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。