react高阶语法

useSyncExternalStore 的使用

import React, {Fragment, useSyncExternalStore} from "react";

function subscribe(callback){
  window.addEventListener('online', callback)
  window.addEventListener('offline', callback)

  return () => {
    window.removeEventListener('online', callback)
    window.removeEventListener('offline', callback)
  }
}

function App() {
  const isOnline = useSyncExternalStore(subscribe, () => window.navigator.onLine)
  return <Fragment>
    {isOnline.toString()}
  </Fragment>
}

useEffectEvent

useCallback()

• useCallback 避免render过程 反复生成新函数

import React, {Fragment, useCallback, useState} from "react";

function App() {
  const [content, setContent] = useState('')

  const handleContentChange = useCallback((e) => {
    setContent(e.target.value)
  }, [])

  return <Fragment>
    <input value={content ? content : ''} onChange={handleContentChange} />
  </Fragment>
}

useImperativeHandle

import React, {Fragment, forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";

const UseInfo = forwardRef ((props, ref) => {
  const inputRef = useRef(null);

  // 父组件调用子组件DOM时，能够对DOM节点上的返回内容中转做一层限制
  useImperativeHandle(ref, () => {
    return {
      blur(){
        // inputRef.current.blur()
      },
      focaus(){
        // inputRef.current.focaus()
        console.log(inputRef);
        inputRef.current.focaus()
      },
      value: inputRef.current.value
    }
  })
  const [value, setValue ] = useState('deLl');
  return <input ref={inputRef} value={value} onChange={(e) => {setValue(e.target.value)}}></input>
})


function App() {
  const parentRef = useRef(null);

  useEffect(()=>{
    // parentRef.current.focaus();
  console.log( parentRef.current.value);
  }, [])
  return <Fragment>
    <UseInfo ref={parentRef} />
  </Fragment>
}

Suspense

import React, {Fragment, Suspense} from "react";

const TodoList = React.lazy(() => import('./todoList'))

function App() {
  
  return <Fragment>
    <Suspense fallback={<div>loading...</div>}>
      <TodoList />
    </Suspense>
  </Fragment>
}