将一些组件的逻辑状态提取到可重用的函数中去

场景1:很多地方都需要一个获取玩家在线状态的函数

1 .比如聊天组件中需要知道显示好友在线状态，联系人列表需要把名字设置为绿色
2 .如果是vue中，或者是之前的思路，这种实时的数据肯定是需要websocket连接，返回一个好友列表，里面有状态，然后按照列表显示，渲染组件
3 .但是这个是以id为基础的，更加细粒度的操作，根据id来请求是否有玩家在线，如果在线，那就返回true,不在线，就返回失败
4 .其实就是写一个函数，这个函数可以存储自己的局部变量，然后根据传入参数值，做一些操作，最后返回一个值

基本使用

import React,{useState,useEffect} from 'react'
//引入基本的库

//功能介绍：传入一个id，返回他是否在线，如果这是一个函数，好像也是可以的吧。


function useFroentStatus(frientID){
    const [isOnline,setIsOnline]=useState(null)
//定义一个局部变量

    useEffect(()=>{
        function getStatus(){
            return setTimeout(()=>{
                let num=Math.random()
                if(num>0.5){
                    setIsOnline(false)
                }else{
                    setIsOnline(true)
                }
            },1000)
        }
        // 假装请求了一下数据
        let timeer=getStatus()

        return ()=>{
            clearTimeout(timer)
            // 离开的时候清除数据
        }
    })

    return isOnline
}

//使用
function FrientStatus(props){
    const isOnline=useFroentStatus(props.friend.id)
    if(isOnline==null){
        return 'Lodaing'
    }else{
        return isOnline?"Online":"offline"
    }
}

function FrientListItem(props){
    const isOnline=useFroentStatus(props.friend.id)

    return (
        <li style={{color:isOnline?"green":"black"}}>
            {props.friend.id}
        </li>
    )
}