React实现图片懒加载
前言图片懒加载是一种优化网页性能的技术，它允许在用户滚动到图片位置之前延迟加载图片。通过懒加载，可以在用户需要查看图片时才加载图片，避免了不必要的图片加载，从而提高了网页的加载速度和用户体验。
方法一实现思路在说明思路之前，先了解几个常见的视图属性。
clientHeight：元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距。
scrollTop：滚动条滚动的高度，它指的是内容区的顶部到可视区域顶部的距离。
offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。
offsetTop：元素到offsetParent顶部的距离。
滚动条的滚动高度：表示滚动条已经向下滚动的距离，即页面顶部到可视区域顶部的距离。
可视区域的高度：表示当前浏览器窗口或容器中可见的部分的高度。
当前图片的 offsetTop：表示图片顶部相对于文档顶部的距离。
根据上面的图解可知，当图片的滚动条滚动的高度加上可视区域的高度大于当前的图片的offsetTop，那么说 ...
闭包
闭包（Closure）作用
避免变量全局污染
使数据私有化，外部无法修改内部数据
可以让外部可以使用内部的私有数据
以上三点其实都是函数的作用，而不是闭包的独特作用
！闭包的核心作用是：使变量可以驻留在内存，不被回收
代码讲解let a = 10;function fn(){ a++; console.log(a);}fn();fn();fn();
结果输出为11，12，13
但是此时a为全局变量，如果别人不小心对a又重复赋值了，那么结果就不是我们预期的结果
那此时我们就不让a成为全局变量，把a的定义放在函数内部，让a成为函数的私有变量
function fn(){ let a = 10; a++; console.log(a);}fn();fn();fn();
此时就可以满足上面提到的函数的作用（第三条只要加个return就可以实现）
但是问题出现了：这次的结果三次都为11，这是因为函数在执行完一次后里面的变量就会被释放掉，下一次执行时又会重新对a进行赋值，所以结果一直为11
创建闭包function fn( ...
this（普通函数）————初版
this（普通函数)this是什么this———用于访问当前方法所属的对象
let obj = { a: 12, fn：function (){ console.log(this===obj) }}obj.fn();
当前这个方法fn是属于obj，所以this就是obj，所以结果为true
这时用另一种写法
let obj = { a: 12,}obj.fn = function (){ console.log(this===obj)}obj.fn();
这种后添的写法结果也是完全一样
this绑定方式this和函数的定义无关，和函数的调用有关，也可以说同一个函数的this可以有很多种值，这取决于怎么调用这个函数
1.直接调用——window || undefined PS:在node环境里为global或者undefined
下面是直接调用函数
function show(){ console.log(this)}show()
结果 ...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post$ hexo new "My New Post"
More info: Writing
Run server$ hexo server
More info: Server
Generate static files$ hexo generate
More info: Generating
Deploy to remote sites$ hexo deploy
More info: Deployment