如何在React Hook中实现无限滚动。
如何正确渲染多达10000个元素的列表。
?
无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。
滚动元素内有大量DOM,容易造成卡顿。
?
后来出现交叉观察者IntersectionObserver API
,在与Vue、React这类数据驱动视图的框架后,无限滚动的通用方案就出来了。
2.
原理
实现一个组件,可以显示具有15个元素的固定窗口大小的n个项目的列表:
即在任何时候,无限滚动n元素上也仅存在15个DOM节点。
?
$bottomElement = useRef();
const $topElement = useRef();
正常的无限向下滚动只需关注一个dom元素,但由于我们是固定15个dom元素渲染,需要判断向上或向下滚动
/Constants';
function App() {
return (
html中元素分为三种:块级元素、行内元素(也叫内联元素),内联块级元素。
常用块级元素: 、 行元素:整行排列,不能改变大小(宽度和高度),宽度默认文字宽度,当行元素排列过多时(
超过浏览器的宽度时自动强制换行
)。
块元素:一个块元素独占一行,宽度默认浏览器的宽度,可以改变宽度和高度。
行内块元素:属于行元素,但又有块元素的属性,横行排列但又可以设置宽度和高度。
标签定义段落
HTML 元素由开始标记、一些内容和结束标记定义。
HTML 元素
HTML元素是从开始标记到结束标记的所有内容:
<tagname>内容在这里....
My first paragraph.
----
空的 HTML 元素
没有内容的 HTML 元素称为空元素。行内元素的padding和margin是否无效
...
首先行内元素是否具有盒子模型?
答:行内元素同样具有盒子模型。
行内元素的padding、margin是否无效?
答:
行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的
行内元素的padding-left、padding-right、margin-left
、margin-right属性设置是有效的
行内元素的padding-top、padding-bottom从显示的效果上是增加的,但其实设置的是无效的。
总结:行内标签(也叫内联标签)的padding和margin左右设置有效,而padding上下有显示效果,但是设置无效,margin上下也是设置无效,显示也无效。
HTML的行元素和块元素
定义有序列表
定义无序列表
定义预格式化的文本
标签定义 HTML 表格
标签表格主体(正文)
表格中的标准单元格
定义表格的页脚(脚注或表注)
定义表头单元格
标签定义表格的表头
定义表格中的行
本博客所有文章如无特别注明均为原创。
原文地址《HTML的行元素和块元素》 HTML元素
none none
注意:一些 HTML 元素没有内容(如
元素)。这些元素称为空元素。空元素没有结束标签!
----
嵌套的 HTML 元素
HTML 元素可以嵌套(这意味着元素可以包含其他元素)。
所有 HTML 文档都由嵌套的 HTML 元素组成。
然后,在<html>元素内部有一个<body> 元素:
<body>
My First Heading
相关资讯