React的hooks学习

官方链接：react文档

useEffect

useEffect(()=>{
	// 执行副作用，将设为sideEffect()
	sideEffect();
	// 此处代码会在每一次渲染的时候执行，此时已经更改了真实的DOM，并且用户已经看到了UI的更新。

	return ()=>{
		//此处代码会再下一次渲染（即非首次渲染）后，在执行上方的副作用前调用，可用于对上一次sideEffect()中一些定时器、监听方法的移除
	}
)

useEffect(()=>{
	// 执行副作用，将设为sideEffect()
	sideEffect();
	// 此处代码只在挂载时运行一次
	return ()=>{
		// 此处代码只在卸载时运行一次
	},[]
)

useEffect(()=>{
	// 执行副作用，将设为sideEffect()
	sideEffect();
	return ()=>{
	},[依赖项1，依赖项2……]
	// 仅在依赖项发生变化才执行副作用
)

useContext ——接收一个上下文对象并且返回该上下文的当前值

const testContext= React.createContext();
function App(){
	return <ctx.Provider value={提供的值}>
		<Test />
	</ctx.Provider>
}

function Test(){
	const test=useContext(testContext); //test是否为响应式的变量是根据传递的value中提供的值
	return <>上下文的值：{test}</>
}

useCallback——会用于得到一个固定引用值的函数，通常用于性能优化

解决的痛点：函数地址每次渲染之后都发生了变化，如果传递函数给子组件，即使子组件使用React.memo同样会导致子组件重新渲染。

const test = useCallback(()=>{
	//执行操作
},[依赖项1，依赖项2])
//只要依赖项不发生变化，则始终返回之前函数的地址

useMemo——对计算结果进行缓存，以避免不必要的重复计算，类似vue中的computed

相当useCallback的加强版

const test = useMemo(()=>{
	//执行操作
	return 返回值 // 必须返回的
},[依赖项1，依赖项2])
// 当依赖项发生变化，则重新计算结果，反则返回上一次计算的结果

useImperativeHandle——实现父组件访问子组件的实例或者操作，搭配forwardRef使用

forwardRef可以实现父组件将ref转发到子组件中，脱离useImperativeHandle也可以单独使用。

import { useRef } from 'react';
function FancyInput(props, ref) {
  const inputRef = useRef();
  const inputRef2 = useRef();
  useImperativeHandle(ref, () => ({
    // 提供访问子组件的实例或操作
    focus: () => {
      inputRef.current.focus();
    },
    number: 1,
    ref: inputRef2
  }));
  return (
    <>
      <input ref={inputRef} />
      <input ref={inputRef2} />
    </>
  );
}
const FancyInputMiddle = forwardRef(FancyInput);

export default function Analysis() {
  const testRef = useRef();
  const clickHanle = () => {
    console.log(testRef.current);
    testRef.current.focus();
  };
  return (
    <>
      <FancyInputMiddle ref={testRef} />
      {/* 需要使用forwardRef是因为函数组件不能直接绑ref */}
      <button onClick={clickHanle}>click</button>
    </>
  );
}

useLayoutEffect

跟useEffect用法类似，useLayoutEffect是在DOM改动后，在浏览器 layout （布局）之后、paint（绘制）之前立即同步调用的。这意味着它会阻塞浏览器的渲染过程，直到其执行完成。

时间点：对DOM进行改动（同步）→useLayoutEffect\componentDidMount\componentDidUpdate → 在浏览器下一次渲染的时间点达到的时候，对比差异进行渲染（异步）用户看到新的效果 → useEffect

useTransition（方法）

降低方法执行的优先级，触发的更新可以让更紧急地更新先进行

function App() {
  const arr = Array.from({ length: 1000 }, (_, index) => index + 1);
  const [data, setData] = useState(arr);
  const [isPending, startTransition] = useTransition();
  function handleChange(e) {
    startTransition(() => {
      // 可以在此处执行复杂的操作
      setData(arr.filter((i) => i % e.target.value === 0));
    });
  }

  return (
    <>
      <input type="text" onChange={handleChange} />
      <div>
        {isPending ? (
          <span>加载中</span>
        ) : (
          <>
            {data.map((i) => (
              <div key={i}>{i}</div>
            ))}
          </>
        )}
      </div>
    </>
  );
}

useDeferredValue（值）

接受一个值，并返回该值的新副本，该副本将推迟到更紧急地更新之后。

function App() {
  const arr = Array.from({ length: 2000 }, (_, index) => index + 1);
  const [data, setData] = useState(arr);
  const deferedData = useDeferredValue(data);
  function handleChange(e) {
    setData(arr.filter((i) => i % e.target.value === 0));
  }

  return (
    <>
      <input type="text" onChange={handleChange} />
      <div>
        {deferedData.map((i) => (
          <div key={i}>{i}</div>
        ))}
      </div>
    </>
  );
}

useId

useId 是一个用于生成横跨服务端和客户端的稳定的唯一 ID，避免 hydration 不匹配