React - useCallback 在 renderProps 函數上拋出錯誤

Question

我正在道具中傳遞 renderProps 函數。 我想用 useCallback 包裝它，所以優化的子組件不會在函數創建時重新渲染。

使用 useCallback 包裝函數時，出現此錯誤：

無效的鈎子調用。 鈎子只能在函數組件的主體內部調用。 這可能是由於以下原因之一造成的：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 你可能會違反 Hooks 規則
3. 您可能在同一個應用程序中擁有多個 React 副本

以上都不適用於我的情況。

renderCell = React.useCallback((
    {
      events,
      popperPlacement,
      popperStyle,
      time
    }
  ) => {
    const { localeToggle } = this.state;
    const { weekStarter, isTimeShown } = this.props;
    const eventsListPopperStyle = utils.isWeekFirst(time, weekStarter) ||
      utils.isWeekSecond(time, weekStarter) ? { left: '-17% !important' } : { left: '17% !important' };
    return (
      <MonthlyCell
        events={events}
        isTimeShown={isTimeShown}
        popperPlacement={popperPlacement}
        popperStyle={popperStyle}
        time={time}
        eventsListPopperStyle={eventsListPopperStyle}
      />
    )
  }, [])

Answer 1

因為鈎子在類組件內不起作用，所以拋出了錯誤。 通過為 React.memo 提供第二個參數，我設法找到了解決方法。 在我提供的函數中，我比較了 prevProps 和 nextProps，當 prop 是一個函數時，我會忽略它並返回 true。 它可能並不適用於所有人，因為有時功能確實會發生變化，但對於不發生變化的情況，也沒關系。

const equalizers = {
  object: (prevProp, nextProp) => JSON.stringify(prevProp) === JSON.stringify(nextProp),


  function: () => true, // disregarding function type props


  string: (prevProp, nextProp) => prevProp === nextProp,
  boolean: (prevProp, nextProp) => prevProp === nextProp,
  number: (prevProp, nextProp) => prevProp === nextProp,
}

export const areEqualProps = (prevProps, nextProps) => {
  for (const prop in prevProps) {
    const prevValue = prevProps[prop];
    const nextValue = nextProps[prop];
    if (!equalizers[typeof prevValue](prevValue, nextValue)) { return false; }
  }
  return true
}

export default React.memo(MyComponent, areEqualProps)