5

我想开始讨论创建回调的推荐方法，该回调从循环内创建的组件中获取参数。

例如，如果我正在填充将具有“删除”按钮的项目列表，我希望“onDeleteItem”回调知道要删除的项目的索引。所以是这样的：

  const onDeleteItem = useCallback(index => () => {
    setList(list.slice(0, index).concat(list.slice(index + 1)));
  }, [list]);

  return (
    <div>
      {list.map((item, index) =>
        <div>
          <span>{item}</span>
          <button type="button" onClick={onDeleteItem(index)}>Delete</button>
        </div>
      )}
    </div>
  );

但是这样做的问题是 onDeleteItem 总是会向 onClick 处理程序返回一个新函数，从而导致重新呈现按钮，即使列表没有更改也是如此。所以它违背了useCallback.

我想出了我自己的钩子，我称之为useLoopCallback，它通过将主回调以及循环参数映射到他们自己的回调来解决问题：

import React, {useCallback, useMemo} from "react";

export function useLoopCallback(code, dependencies) {
  const callback = useCallback(code, dependencies);
  const loopCallbacks = useMemo(() => ({map: new Map(), callback}), [callback]);

  return useCallback(loopParam => {
    let loopCallback = loopCallbacks.map.get(loopParam);
    if (!loopCallback) {
      loopCallback = (...otherParams) => loopCallbacks.callback(loopParam, ...otherParams);
      loopCallbacks.map.set(loopParam, loopCallback);
    }
    return loopCallback;
  }, [callback]);
}

所以现在上面的处理程序看起来像这样：

  const onDeleteItem = useLoopCallback(index => {
    setList(list.slice(0, index).concat(list.slice(index + 1)));
  }, [list]);

这很好，但现在我想知道这个额外的逻辑是否真的让事情变得更快或者只是增加了不必要的开销。谁能提供一些见解？

编辑： 上述方法的替代方法是将列表项包装在它们自己的组件中。所以是这样的：

function ListItem({key, item, onDeleteItem}) {
  const onDelete = useCallback(() => {
    onDeleteItem(key);
  }, [onDeleteItem, key]);

  return (
    <div>
      <span>{item}</span>
      <button type="button" onClick={onDelete}>Delete</button>
    </div>
  );
}

export default function List(...) {
  ...

  const onDeleteItem = useCallback(index => {
    setList(list.slice(0, index).concat(list.slice(index + 1)));
  }, [list]);

  return (
    <div>
      {list.map((item, index) =>
        <ListItem key={index} item={item} onDeleteItem={onDeleteItem} />
      )}
    </div>
  ); 
}
4

2 回答 2

4

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

const callback = value => value * 2

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

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

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

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

在每个renderconstarray将作为map执行 in的结果而创建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它非常有效，并且附加渲染几乎不会导致性能问题。请记住，有时您优化代码的努力可能会反过来并生成大量额外/不必要的代码，这不会产生太多好处（有时只会导致更多问题）。

于 2019-08-26T19:25:20.457 回答
3

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

使用 redux 这不会是一个问题，因为删除项目将通过调度一个动作来完成，并且将由一个始终具有相同功能的减速器进行更改。

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>
  );
};
于 2019-08-26T19:09:05.027 回答