zoukankan      html  css  js  c++  java
  • react Hooks

    useEffect

    1、useEffect是didMount和didUpdate和willUnmount三个函数的集合

    2、useEffec(fun):fun会在每次组件render之后执行,而fun中return的cleanup会在willUnmount中执行

    3、useEffect(fun,[xxx])第二个参数用于订阅哪个props修改后执行,可以利用此优化

    自定义hook

    1、以 “use” 开头的函数,函数内部可以调用其他的 Hook

    2、Hook 是一种复用状态逻辑的机制,所以每次使用自定义 Hook 时,其中的所有 state 和副作用都是完全隔离的。只是处理state的逻辑一样

    // useFriendStatus
    
    import React, { useState, useEffect } from 'react';
    
    function useFriendStatus(friendID) {
      const [isOnline, setIsOnline] = useState(null);
    
      useEffect(() => {
        function handleStatusChange(status) {
          setIsOnline(status.isOnline);
        }
    
        ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
        return () => {
          ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
        };
      });
    
      return isOnline;
    }
    
    
    function FriendStatus(props) {
      const isOnline = useFriendStatus(props.friend.id);
    
      if (isOnline === null) {
        return 'Loading...';
      }
      return isOnline ? 'Online' : 'Offline';
    }
    
    function FriendListItem(props) {
      const isOnline = useFriendStatus(props.friend.id);
    
      return (
        <li style={{ color: isOnline ? 'green' : 'black' }}>
          {props.friend.name}
        </li>
      );
    }
    
  • 相关阅读:
    装饰者模式【结构模式】
    代理模式【结构模式】
    原型模式【构建模式】
    建造者模式【构建模式】
    抽象工厂模式【构建模式】
    工厂模式【构建模式】
    单例模式【构建模式】
    设计原则
    Collector 源码分析
    Maven 包命令
  • 原文地址:https://www.cnblogs.com/laojun/p/10683213.html
Copyright © 2011-2022 走看看