[React] Capture values using the lifecycle hook getSnapshotBeforeUpdate in React 16.3
React in The Using hook VALUES Capture lifecycle
2023-09-14 08:59:17 时间
getSnapshotBeforeUpdate
is a lifecycle hook that was introduced with React 16.3. It is invoked right before the most recently rendered output is committed and the value returned by it will be passed as a third parameter to componentDidUpdate
. It enables your component to capture current values for example a scroll position before they are potentially changed.
import React, { Component } from "react"; class Chat extends Component { wrapperRef = React.createRef(); componentDidMount() { this.wrapperRef.current.scrollTop = this.wrapperRef.current.scrollHeight; } getSnapshotBeforeUpdate(prevProps, prevState) { const wrapper = this.wrapperRef.current; return wrapper.scrollTop + wrapper.offsetHeight >= wrapper.scrollHeight; } componentDidUpdate(prevProps, prevState, snapshot) { if (snapshot) { this.wrapperRef.current.scrollTop = this.wrapperRef.current.scrollHeight; } } render() { return ( <div style={{ height: 200, overflowY: "scroll", border: "1px solid #ccc" }} ref={this.wrapperRef} children={this.props.children} > {this.props.children} </div> ); } } export default Chat;
相关文章
- react开发教程(六)React与DOM
- [React] Use react styled system with styled components
- [React] Handle Deep Object Comparison in React's useEffect hook with the useRef Hook
- [PWA] Access the Camera in a PWA built with React
- [React] Use the Fragment Short Syntax in Create React App 2.0
- [ReactVR] Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR
- [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [PReact] Reduce the Size of a React App in Two Lines with preact-compat
- [React Native] Disable and Ignore Yellow Box Warnings in React Native
- [React] Update Component State in React With Ramda Lenses
- sharepoint2010:The number of items in this list exceeds the list view threshold, which is 20000 items.
- [React Recoil] Write a Custom Recoil Hook to Reset a Value in the Recoil State
- [React Testing] Mock react-transition-group in React Component Tests with jest.mock
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React Native] Reduce Long Import Statements in React Native with Absolute Imports
- [ReactVR] Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR
- [ReactVR] Render Custom 3D Objects Using the Model Component in React VR
- [React Native] Dismiss the Keyboard in React Native
- [React] Render Elements Outside the Current React Tree using Portals in React 16
- [React] Create component variations in React with styled-components and "extend"
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React Intl] Render Content with Placeholders using react-intl FormattedMessage
- [React Native] Installing and Linking Modules with Native Code in React Native
- [React] React Router: setRouteWillLeaveHook
- [React] React components in ES6 classes