react学习笔记9 useRef、useCallback

useRef

用途：创建一个可变引用对象，通常用来访问 DOM 元素。

返回值：返回一个可变的 ref 对象，其 current 属性被初始化为传入的 initialValue。

示例：

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // 当按钮被点击时，使文本框获得焦点
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useCallback

用途：返回一个被优化过的函数，该函数只在依赖发生改变时才会重新创建。

返回值：一个 memoized 函数。

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const callback = useCallback(
    (number) => {
      console.log('Callback fired', number);
    },
    [count]
  );

  return <ChildComponent callback={callback} />;
}

function ChildComponent({ callback }) {
  return <button onClick={() => callback(10)}>Click me</button>;
}