react-blog
react-blog copied to clipboard
axuebin
:speak_no_evil: 使用React重构自己的博客
试一下自己撸一个图片懒加载... ---- Demo地址：[http://axuebin.com/lazyload](http://axuebin.com/lazyload) 照片都是自己拍的哦~ ## 懒加载 ### 什么是懒加载 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。 ### 什么时候用懒加载 当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。 ### 懒加载原理 我们都知道HTML中的``标签是代表文档中的一个图像。。说了个废话。。 ``标签有一个属性是`src`，用来表示图像的URL，当这个属性的值不为空时，浏览器就会根据这个值发送请求。如果没有`src`属性，就不会发送请求。 嗯？貌似这点可以利用一下？ 我先不设置`src`，需要的时候再设置？ nice，就是这样。 我们先不给``设置`src`，把图片真正的URL放在另一个属性`data-src`中，在需要的时候也就是图片进入可视区域的之前，将URL取出放到`src`中。 ## 实现 ### HTML结构 ```html ``` 仔细观察一下，``标签此时是没有`src`属性的，只有`alt`和`data-src`属性。 > alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。...
初学React，撸一个TodoList熟悉熟悉基本语法，只有最简单最简单的功能。 ----  如上图所示，是一个最简单的TodoList的样子了，我们应该怎样把它拆成一个个的组件呢？ 在之前看来，可能就是这样一个HTML结构： ```html 保存 ``` > React的核心思想是：封装组件。 我们也可以按照这个思路来进行组件设计 ## 组件设计  从小到大，从内到外 ~ 我是这样进行设计的。 除去按钮，input这些之外，``是HTML中最小的元素，我们可以先每一个``当成是一个最小的组件，也就是图中橙色框的部分，它对应着每一条内容，我们先把它命名为`TodoItem`吧。 ``的父级元素是``，那就把它看作一个组件呗，图中位于上方的蓝色部分，命名为`TodoList`。 恩，此时Todo内容的展示组件已经是够的了，我们再来加一个添加Todo内容的组件`AddTodoItem`吧，命名貌似有点丑- -，图中位于下方的蓝色部分。 最后就是最外层的红色部分了，它就是整个app的主体部分，包含着其它小组件，命名为`TodoBox`。 ok，暂时就这几个小组件 ~ 然我们开始愉快的撸代码吧 ~ ## 代码部分 ### Index...
总结一下常见的水平居中和垂直居中的方法。 ---- ## 水平居中 ### 行内元素的居中 对于行内元素，居中简直不要太容易，父级元素中设置一个`text-align:center`即可。  ### 定宽块级元素的居中1 对于块级元素，如果知道它的宽度，居中起来也会很容易，比如这样： ```html 我是块级元素 ``` ```css .demo-2-item{ width:200px; height:30px; background-color: lightblue; margin: 0 auto; } ``` 也就是设置了宽度之后，另它的`margin-left`和`margin-right`为`auto`。  ### 定宽块级元素的居中2 定宽块级元素还能这样：...
一个很基础的知识点，JavaScript中基本数据类型和引用数据类型是如何存储的。 ---- 由于自己是野生程序员，在刚开始学习程序设计的时候没有在意内存这些基础知识，导致后来在提到“什么什么是存在栈中的，栈中只是存了一个引用”这样的话时总是一脸懵逼。。 后来渐渐的了解了一些内存的知识，这部分还是非常有必要了解的。 ## 基本数据结构 ### 栈 > 栈，只允许在一段进行插入或者删除操作的线性表，是一种先进后出的数据结构。 ### 堆 > 堆是基于散列算法的数据结构。 ### 队列 > 队列是一种先进先出（FIFO）的数据结构。 ## JavaScript中数据类型的存储 JavaScript中将数据类型分为基本数据类型和引用数据类型，它们其中有一个区别就是存储的位置不同。 ### 基本数据类型 我们都知道JavaScript中的基本数据类型有： - String - Number - Boolean...
