性能优化总是有代价的。有时这个成本低于要优化的操作，有时更高。useCallback它是一个与 非常相似的钩子useMemo，实际上您可以将其视为useMemo只能在函数中使用的特化。例如，下面的语句是等价的

const callback = value => value * 2

const memoizedCb = useCallback(callback, [])
const memoizedWithUseMemo = useMemo(() => callback, [])

所以现在每个断言 aboutuseCallback都可以应用于useMemo.

的要点memoization是保留旧值的副本，以便在我们获得相同依赖项的情况下返回，当您有expensive要计算的东西时，这可能很棒。看看下面的代码

const Component = ({ items }) =>{
    const array = items.map(x => x*2)
}

Uppon每一个renderconst的array将作为的结果而产生map的执行items。因此，您可能会很想执行以下操作

const Component = ({ items }) =>{
    const array = useMemo(() => items.map(x => x*2), [items])
}

现在items.map(x => x*2)只会在items更改时执行，但值得吗？最简洁的答案是不。通过这样做获得的性能是微不足道的，有时使用起来memoization比每次渲染时只执行函数更昂贵。hooks(useCallback和useMemo) 在两个不同的用例中都很有用：

• 参照平等

当您需要确保引用类型不会因为失败而触发重新渲染时 shallow comparison

• 计算成本高的操作（仅useMemo）

像这样的东西

const serializedValue = {item: props.item.map(x => ({...x, override: x ? y : z}))}

现在您有了memoized操作的理由并懒惰地检索serializedValue每次props.item更改：

const serializedValue = useMemo(() => ({item: props.item.map(x => ({...x, override: x ? y : z}))}), [props.item])

任何其他用例几乎总是值得再次重新计算所有值，React它非常有效，附加渲染几乎不会导致性能问题。请记住，有时您优化代码的努力可能会反其道而行，并生成大量额外/不必要的代码，这不会产生太多好处（有时只会导致更多问题）。

List 组件管理它自己的状态（列表），删除功能取决于此列表在其闭包中是否可用。因此，当列表更改时，删除功能必须更改。

使用 redux 这不会是一个问题，因为删除项目将通过调度 action 来完成，并将由始终相同功能的 reducer 更改。

React 恰好有一个useReducer钩子，您可以使用它：

import React, { useMemo, useReducer, memo } from 'react';

const Item = props => {
  //calling remove will dispatch {type:'REMOVE', payload:{id}}
  //no arguments are needed
  const { remove } = props;
  console.log('component render', props);
  return (
    <div>
      <div>{JSON.stringify(props)}</div>
      <div>
        <button onClick={remove}>REMOVE</button>
      </div>
    </div>
  );
};
//wrap in React.memo so when props don't change
//  the ItemContainer will not re render (pure component)
const ItemContainer = memo(props => {
  console.log('in the item container');
  //dispatch passed by parent use it to dispatch an action
  const { dispatch, id } = props;
  const remove = () =>
    dispatch({
      type: 'REMOVE',
      payload: { id },
    });
  return <Item {...props} remove={remove} />;
});
const initialState = [{ id: 1 }, { id: 2 }, { id: 3 }];
//Reducer is static it doesn't need list to be in it's
// scope through closure
const reducer = (state, action) => {
  if (action.type === 'REMOVE') {
    //remove the id from the list
    return state.filter(
      item => item.id !== action.payload.id
    );
  }
  return state;
};
export default () => {
  //initialize state and reducer
  const [list, dispatch] = useReducer(
    reducer,
    initialState
  );
  console.log('parent render', list);
  return (
    <div>
      {list.map(({ id }) => (
        <ItemContainer
          key={id}
          id={id}
          dispatch={dispatch}
        />
      ))}
    </div>
  );
};