react hooks

react hooks

useCallback

用于缓存函数，比如要把函数传递给子组件时，父组件每次跟新函数都会被创建，使用useCallback可以防止子组件不必要的重新渲染实现性能优化。

useMemo

用来缓存值，避免昂贵的多次计算，依赖不变的时候直接返回上次的计算结果。

memo

该函数接受一个react组件作为参数，返回一个新的组件，新的组件有这个特性：组件在 props 没有改变的情况下跳过重新渲染；但是这个特性并不是一定的，如果props是一个对象，前后两次内存引用地址不同值相同，组件依然会重新渲染，react 使用 Object.is 对props进行浅层比较 Object.is({},{}) 值为 false。

如果 props 是一个对象，可以使用 useMemo 避免父组件每次都重新创建该对象：

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  const person = useMemo(
    () => ({ name, age }),
    [name, age]
  );

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) {
  // ...
});

useImperativeHandle

配合 forwardRef ref转发使用，用来定义ref暴露出的数据和方法

/* 子组件 */

import { forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  useImperativeHandle(ref, () => {
    return {
      // ... 你的方法 ...
    };
  }, []);

/* 父组件 */

import {useRef} from 'react'
const Page = () => {
  const inputRef = useRef()
  return <div>
    <MyInput ref={inputRef} />
  </div>
}

useLayoutEffect

在浏览器重新绘制屏幕之前触发：一个组件的位置由他自身的高度决定，渲染前就应该知道他自身的高度，会阻塞浏览器重新绘制

useReducer

在组件的顶层作用域调用 useReducer 以创建一个用于管理状态的 reducer；配合 use-immer 库使用可以减少模版代码

import { useImmerReducer } from 'use-immer';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';

function tasksReducer(draft, action) {
  switch (action.type) {
    case 'added': {
      draft.push({
        id: action.id,
        text: action.text,
        done: false
      });
      break;
    }
    case 'changed': {
      const index = draft.findIndex(t =>
        t.id === action.task.id
      );
      draft[index] = action.task;
      break;
    }
    case 'deleted': {
      return draft.filter(t => t.id !== action.id);
    }
    default: {
      throw Error('Unknown action: ' + action.type);
    }
  }
}

export default function TaskApp() {
  const [tasks, dispatch] = useImmerReducer(
    tasksReducer,
    initialTasks
  );

  function handleAddTask(text) {
    dispatch({
      type: 'added',
      id: nextId++,
      text: text,
    });
  }

  function handleChangeTask(task) {
    dispatch({
      type: 'changed',
      task: task
    });
  }

  function handleDeleteTask(taskId) {
    dispatch({
      type: 'deleted',
      id: taskId
    });
  }

  return (
    <>
      <h1>Prague itinerary</h1>
      <AddTask
        onAddTask={handleAddTask}
      />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}

let nextId = 3;
const initialTasks = [
  { id: 0, text: 'Visit Kafka Museum', done: true },
  { id: 1, text: 'Watch a puppet show', done: false },
  { id: 2, text: 'Lennon Wall pic', done: false },
];

useTransition

标记一个不紧急的不阻断ui交互的更新动作

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ……
}

useDeferredValue

标记不紧急的值，这个值可以被延迟更新