React篇-滚动条下移的触发在react的生命周期分析
项目的要求是一个chartUI方式的聊天显示页面,根据聊天信息的不断增加,页面需要滑动一定距离,这样能看到最新的聊天结果,这样就需要在聊天结果返回之后触发滚动条向下滚动到一定的距离,代码如下:
componentDidUpdate(){
document.documentElement.getElementsByClassName("speakLineW")[0].scrollTop = 550;//内容更新以后再设置
}
componentDidUpdate 是在组件更新结束之后执行,在初始化render时不执行,
所以触发滚动条的事件写在了 componentDidUpdate 这个周期
React篇-滚动条下移的触发在react的生命周期分析的更多相关文章
- 玩转 React(五)- 组件的内部状态和生命周期
文章标题总算是可以正常一点了-- 通过之前的文章我们已经知道:在 React 体系中所谓的 "在 JavaScript 中编写 HTML 代码" 指的是 React 扩展了 Jav ...
- React.js 小书 Lesson20 - 更新阶段的组件生命周期
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...
- React 学习笔记(1) 基础语法和生命周期
参看:视频地址 简单搭建一个react-cli: 2. React.createElement() 将object转化为 React语法 import React from 'react' impor ...
- 【React】学习笔记(二)——组件的生命周期、React脚手架使用
原教程视频:ttps://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.组件的生命周期 1.1.生命周 ...
- react 入坑笔记(六) - 组件的生命周期
React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...
- Unity3D热更新之LuaFramework篇[06]--Lua中是怎么实现脚本生命周期的
前言 用c#开发的时候,新建的脚本都默认继承自Monobehaviour, 因此脚本才有了自己的生命周期函数,如Awake,Start, Update, OnDestroy等. 在相应的方法中实现游戏 ...
- React.js 小书 Lesson19 - 挂载阶段的组件生命周期(二)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...
- React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...
- React每隔0.2s颜色变淡 之生命周期 ,componentDidMount表示组件已经挂载
05案例 每隔0.2s颜色变淡 componentDidMount表示组件已经挂载,可以进行DOM操作 import React, { Component } from "react&quo ...
随机推荐
- lua第三方库
一.Lua 包管理工具 1.LuaRocks luarocks 是Lua常用的包管理工具(还有一个是LuaDist),其安装方式请参考官网:https://luarocks.org/#quick-st ...
- react学习笔记(二)编写第一个react组件
继续上一节课的内容,打开App.js:会看到如下代码: import React, { Component } from 'react'; //在此文件中引用React,以及reat的组件类 imp ...
- 利用media query让背景图适应不同分辨率的设备
随着上网方式的多样化,用户选择上网的工具不再仅是PC,而可以是手机,或者平板电脑.随之而来的问题是如何让网页适应不同分辨率,这给前端工程师们带来了新的挑战,其中重要的一点是如何让图片能在不同的分辨率下 ...
- tomcat使用同一个http端口如何配置多个web项目?
1. 在server.xml中 如下配置: <Host name="localhost" appBase="webapps2" unpackWARs=&q ...
- xss攻击问题以及如何防范
当用户提交评论的时候,比如如下评论内容 111 <scripy>alert(111);</scripy> 这样当现实评论的时候会先弹出111弹框,再显示评论.这就是xss攻击. ...
- C#调用VB进行简繁转换
首先在C#项目中引用Microsoft.VisualBasic.dll,版本自己选择合适的 然后在项目中添加引用:using Microsoft.VisualBasic; 转换: 转为繁体: outp ...
- 转:关于ROWNUM的使用
转载自:原文:https://blog.csdn.net/songsenkeji/article/details/4432942 ROWNUM的概念ROWNUM是一个虚假的列.它将被分配为 1,2,3 ...
- 简单示例用例(Simple Example Use Cases)--hive GettingStarted用例翻译
1.MovieLens User Ratings First, create a table with tab-delimited text file format: 首先,创建一个通过tab分隔的表 ...
- Javascript:一些基本语法
便于日后复习快速回忆起来,把Javascript一些没那么普遍的语法特性写一写. Javascript作为三剑客的灵魂,我把它写在body里 <!DOCTYPE html> <htm ...
- [knowledge] netmap
900MHz的单核处理10GB的包收/发. netmap has been implemented in FreeBSD and Linux and Gbit/s network adapters. ...