javascript 将带参数的匿名函数传递给 Package 在memo中的子组件

q3qa4bjr 于 2022-12-21 发布在 Java

关注(0)|答案(2)|浏览(129)

我有一个组件 * 标记 *，除非确实需要，否则我不想重新渲染它。
所以它被 Package 在一个memo钩子中，但是因为其中一个props是匿名函数，所以 Marker 仍然会在它的父函数每次重新呈现时重新呈现。
现在，这将有一个简单的解决方案，只是 Package 在useCallback钩子函数prop传入，但由于该函数也有一个参数，那么我有点卡住了寻找一个很好的解决方案。记忆在父组件中的函数与useMemo也将无法工作，因为该参数。

const Map = () => {
  ...
  ...
  return(
    {markers.map(marker => {
        <Marker {...props} onPress={() => selectMarker(marker.id)}
    })
  )
}

const Marker = (...props, onPress) => {
    ... memoized function that at some point calls onPress()
}

JavaScript

来源：https://stackoverflow.com/questions/74864683/passing-anonymous-function-with-a-parameter-to-child-component-wrapped-in-memo

2条答案

按热度按时间

h79rfbju1#

最简单的解决方案是从Marker组件本身传递所有必需的参数，通过这种更改，可以使onPress处理程序成为纯处理程序。

const Map = () => {
  const handleMarkerPress = useCallback((markerId) => {
    selectMarker(markerId);
  }, []);

  return(
    {markers.map(marker => {
        <Marker {...props} marker={marker} onPress={handleMarkerPress}
    })
  )
}

const Marker = (...props, marker, onPress) => {
   return <div onClick={() => onPress(marker.id)}>...</div>;
}

赞(0）回复(0）举报 2022-12-21

qnakjoqk2#

尝试使用父组件中的useCallback钩子创建onPress函数，并将marker.id作为参数传递给回调函数。这样，只有在marker.id值发生变化时，才会重新创建该函数，并且Marker组件不会进行不必要的重新呈现。
下面是您可以如何做到这一点：

const Map = () => {
  ...
  ...
  const selectMarker = useCallback((id) => {
    // do something with the marker id
  }, []);

  return(
    {markers.map(marker => {
        <Marker {...props} onPress={() => selectMarker(marker.id)}
    })
  )
}

const Marker = ({ onPress }) => {
    ...
    ...
    // call onPress when necessary
    onPress();
}

useCallback钩子将返回selectMarker函数的记忆版本，该函数仅在dependency数组（在本例中为空数组）中的值发生变化时才发生变化。由于selectMarker函数是作为prop传递给Marker组件的，因此Marker组件仅在selectMarker函数发生变化时才会重新呈现，而只有www.example.com值发生变化时才会发生这种marker.id情况。

赞(0）回复(0）举报 2022-12-21

我来回答

javascript 将带参数的匿名函数传递给 Package 在memo中的子组件

2条答案

相关问题

热门标签

最新问答