react 备忘录

自定义hook

import { useState, useEffect } from 'react'
// 获取window滚动条高度
export function useWindowScroll(): Array<number> {
    const [y, setY] = useState(0)
    window.addEventListener('scroll', () => {
        let h: number = document.documentElement.scrollTop
        setY(h)
    })
    return [y]
}

// 设置localStorage
export function useLocalStorage(key: string, defaultValue: any): any {
    const [message, setMessage] = useState(defaultValue)
    useEffect(() => {
        window.localStorage.setItem(key, message)
    }, [message, key])
    return [message, setMessage]
}


// 函数式组件中使用，和useState/useEffect一样

清除hook-useEffect 副作用

在useEffect 中return一个函数，在函数中清除定时器，消除组件卸载后的副作用

function Temp () {
    useEffect(() => {
        let timer = setInterval(() => {
            console.log('loading')
        }, 2000);
        // 在useEffect 中return一个函数，在函数中清除定时器，消除组件卸载后的副作用
        return () => {
            clearInterval(timer)
        }
    })
    return (
        <div>Temp</div>
    )
}

createContext useContext 跨组件传参

1. 新建ts文件

import {createContext} from 'react'
const Context = createContext(null)
export default Context

2. 父组件 提供数据的组件

import Context from './context.ts'
const DemoA = () => {
    const [count,setCount] = useState(10)
    return (
        <Context.Provider value={count}>
            <div>
                <DemoB></DemoB>
            </div>
        </Context.Provider>
	)
}

3. 子组件 消费数据的组件

import React,{useContext} from 'react'
import Context from './context.js'

let num = useContext(Context)
 const DemoC = ()=>{
    return (
        <div>
            <h1>{num}</h1>
        </div>
    )
}