[React] Capture values using the lifecycle hook getSnapshotBeforeUpdate in React 16.3
React in The Using hook VALUES Capture lifecycle
2023-09-14 09:00:50 时间
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;
相关文章
- activiti7入门_react demo
- 05-React Antd UI库
- React Error: Failed at the xxx@0.1.0 start script 'react-scripts start'.
- 深度分析React源码中的合成事件
- React
- react踩坑笔记
- React源码分析8-状态更新的优先级机制_2023-02-06
- React源码解读之更新的创建_2023-02-20
- 问:React的useState和setState到底是同步还是异步呢?_2023-03-13
- 4k字介绍 React Router 6.4 超大变化:引入 Data API。你不纯粹了!
- ORA-31053: The value of the depth argument in the operator cannot be negative ORACLE 报错 故障修复 远程处理
- ORA-48414: The string in the execution option exceeds maximum length [string] ORACLE 报错 故障修复 远程处理
- ORA-48444: The single “.” and “*” cannot appear in the middle of the path ORACLE 报错 故障修复 远程处理
- in Neo4j查询:使用Not In操作(neo4j查询not)
- Oracle替代in:抛弃IN,开启新的查询方式(oracle代替in)
- 查询Oracle中执行多列IN查询的技巧(oracle多列in)
- The Power of ‘if z’ in the Linux World
- 语法应用Oracle中IN语法的多种方式(oracle中in)
- MySQL中IN语句的参数化使用方法(mysql中in参数化)
- 深入探究Mysql中IN与AND逻辑运算的应用(mysql中in与and)
- Oracle的IN走索引技术(in走索引 oracle)
- MySQL中为什么不能使用IN子查询(mysql不能in子查询)
- 优化MySQL查询避免使用IN关键字(mysql 不用 in)
- Oracle中IN运算符的强大用法(oracle中in的使用)
- 查询Oracle IN查询两个字段的精彩之处(oracle两个字段in)
- acle joinOracle IN与Oracle Join的差异探讨(oracle in与or)