Reactjs 在React Native中呈现特定组件

我使用ScrollView的onMomentumScrollEnd处理程序根据组件中的contentOffset确定当前页面

 const [currentPage, setCurrentPage] = useState(0);

 const onScrollEnd = (e) => {
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    setCurrentPage(pageNum);
  };

return (
   <View style={{ flex: 1 }}>
        <RecyclerListView
          rowRenderer={({ item }, index) => <Page item={item} id={index} />}
          dataProvider={list}
          layoutProvider={layoutProvider}
          onMomentumScrollEnd={onScrollEnd}
          isHorizontal
          pagingEnabled
        />
        <View style={{ flex: 0.1, backgroundColor:"gold" }}>
          <Text>{`current page: ${currentPage}`}</Text>
       </View>
      </View>
  );

const[currentPage，setCurrentPage]=useState（0）；
const onScrollEnd=（e）=>{
设contentOffset=e.nativeEvent.contentOffset；
让viewSize=e.nativeEvent.layoutMeasurement；
让pageNum=Math.floor（contentOffset.x/viewSize.width）；
setCurrentPage（pageNum）；
};
返回(
}
数据提供程序={list}
layoutProvider={layoutProvider}
onMomentumScrollEnd={onScrollEnd}
水平的
分页
/>
{`当前页面：${currentPage}`}
);

---

我想在文本组件中显示当前页面，但当当前页面状态在onMomentumScrollEnd处理程序中更改时，整个应用程序将重新呈现。我只需要重新渲染文本组件，有什么建议吗。

我找到了一个解决方案。最简单的方法是创建一个类组件并将显示的组件放入其中，然后我引用它并使用ref hook更改当前页面

 class DisplayCurrentPage extends React.Component {
   contractor(prop){
    super(prop)
    state:{currentPage:0}
   }
   updateCurrentPage = (index) => {this.setState({CurrentPage: index})}
   render(){
    return(
      <View style={{ flex: 0.1, backgroundColor:"gold" }}>
          <Text>{`current page: ${this.state.currentPage}`}</Text>
       </View>
     );

   }

 };
  

 const reference = createRef();
 const onScrollEnd = (e) => {
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    reference.current.updateCurrentPage(pageNum);
  };

return (
   <View style={{ flex: 1 }}>
        <RecyclerListView
          rowRenderer={({ item }, index) => <Page item={item} id={index} />}
          dataProvider={list}
          layoutProvider={layoutProvider}
          onMomentumScrollEnd={onScrollEnd}
          isHorizontal
          pagingEnabled
        />
        <DisplayCurrentPage ref={reference} />
      </View>
  );

class DisplayCurrentPage扩展了React.Component{
承包商（道具）{
超级（道具）
状态：{currentPage:0}
}
updateCurrentPage=（index）=>{this.setState（{CurrentPage:index}）}
render（）{
返回(
{`当前页面：${this.state.currentPage}`}
);
}
};
const reference=createRef（）；
const onScrollEnd=（e）=>{
设contentOffset=e.nativeEvent.contentOffset；
让viewSize=e.nativeEvent.layoutMeasurement；
让pageNum=Math.floor（contentOffset.x/viewSize.width）；
reference.current.updateCurrentPage（pageNum）；
};
返回(
}
数据提供程序={list}
layoutProvider={layoutProvider}
onMomentumScrollEnd={onScrollEnd}
水平的
分页
/>
);

更改页面时，仅重新呈现DisplayCurrentPage。

您可以使用它来替代功能组件的shouldComponentUpdate。它告诉React何时根据上一个和下一个道具重新渲染组件

const Item = React.memo(({ item }) => {  
  return (
    <View>
      ........
    </View>
  );
});

const Item=React.memo（{Item}）=>{
返回(
........
);
});

我尝试使用React.memo，但不起作用，因为当状态更改时，整个应用程序将重新呈现，包括recyclelistview组件。