Rance_King的博客

此文用最速的方法使用react-redux包，省略大量的细节，跑通使用react-redux控制的一个组件。使用redux的基本原因，是为了保证单向数据流和集中状态管理。所有的状态都保存在context中的总体状态(被称为store)里，这样所有组件都访问唯一的store。而组件本身不管理状态，只是向这个store发送action，而发送的action会被reducer处理，进而修改store。store如果被修改，则向页面发送props，令页面重新渲染（大致流向，用词不准确）。如此，数据流成为了单一的

假设有一堆人要去上厕所，然而厕所只能同时容纳固定的人数。这时候有个管理员坐在厕所门口，由他来决定一个人可不可以进入厕所，如果不可以则返回err，如果可以则返回data，这是callback function，以读取文件为例，“不可以”按照规矩要优先抛出，就像是管理员告诉你“里面满了”比“可以进去”要优先一样。const fs = require('fs');fs.readFile('./test.js', 'utf-8', (err, data) => { if(err){

在学习react的过程中，生命周期函数是一个非常核心的概念，对react生命周期函数的了解就是对react工作机制的了解。而生命周期函数对于初学者而言不好记忆，故有此文作为理解和梳理生命周期函数这个知识点。核心是constructor和renderreact的class component最核心的生命周期函数是这两个。constructor是用来初始化state和绑定类方法的，而render...

用react做to-do-list是上手react的一个基本练习。就像玩游戏一样，游戏有一以贯之的逻辑，越早把握基础逻辑的玩家就越能轻松驾驭游戏。这个官方示例对于我来说学习价值极高，试以现在的眼光深入学习一下。示例文件结构拆分：这个示例中，TodoApp包含了TodoList和TodoInput组件，TodoList包含TodoItem组件这个拆分方法其实向我们展示了一种react的惯用结...

js中只有两大类数据类型，即基本数据类型（Number, String, Boolean, Null, undefine, symbol)和引用数据类型(Object)。Object可以用符号{}来表示，比如函数的函数体function(){}也是一个Object。所有的运行环境（context）本质上都是在一个Object的内部，而bind方法则是将一个函数绑定为一个Object的属性，也就...

Link: React学习之道Summary：React与es6有很紧密的关系，很多es6的语法糖可以让react代码极其简洁而可读，初步总结如下：使用模板字符串来拼接URL地址const DEFAULT_QUERY = 'redux';const PATH_BASE = 'https://hn.algolia.com/api/v1';const PATH_SEARCH = '/s...

在js中，经常会出现的一个问题就是路径写不对的问题，尤其是相对路径理解不到位的问题。在此进行总结：首先，相对路径最重要的一点是看：引用者是谁， 经常会搞错路径的原因就在引用者上，因为对于一张背景图片或者字体来讲，引用它的有可能是html标签中的style，有可能是css文件，所以对于引用者不同，路径的写法也有不同。单独写一个/指的是根目录；./指的是同级别的目录，如果写././指的与./是...

在img标签互相靠着的时候，会出现一条小间隙，这个间隙是一个bug，把img标签靠着写就会去掉。解决方案是用给图片加浮动清除

案例中涉及了定位，清除浮动，居中方法等内容。配合position和margin就可以完成定位。<div class="main clearfix"> <div class="left"> <img src="img/left-circle.png" height="30" width="30" alt="img"/> </...

如题

在css3中，box-sizing提供了两种选择，一个是content-box，一个是border-box。content-box的模式里，元素设定的宽和高为内容宽高；而border-box中，元素设定的宽高为整体元素呈现出来的宽高。使用第二种模式就省去了计算，能够十分简单地，不需计算内外边距而设定好整个元素应该占多少宽高 <style> div { ...

在css中，可以使用[]来对元素进行属性选择，找到含有同一个属性的元素。比如a[title=‘me’]可以选中有title为me的a标签。这里面可以进行匹配，使用的字符与正则表达式相同，^表示匹配属性值某个片段前面的所有部分，$表示匹配属性值某个片段后面的所有部分, *表示在属性中出现了某个片段的所有元素。<style> li[class$=me]{ ...

在css中，父子嵌套的元素会发生子元素margin失效的问题。比如：<style> .parent{ width: 100px; height: 100px; background-color: red; margin-top: 100px; } ...

在js中，当要引用html的时候，比如说把一段html赋值给一个变量，这个时候会遇到转义的问题，html中的引号和换行都需要转义。这样就十分麻烦。有一个办法就是使用反引号 ` ，来引用html块，里面的内容就可以不需要转义直接被使用。...

justify-content是在水平轴上进行对齐；align-items是在竖直方向上进行对齐；简单记忆方法，justify-content这个单词更长，在横向上延展——

width:calc(100%-30px);这样写会失效；必须写成：width: calc(100% - 30px); 这里css3莫名其妙地对空格敏感了，要注意。

bootstrap使用的时候，h-100这种class是针对父元素的高度进行计算的，所以很多时候，必须要把body和html的高度在css中修改到100%才可以令h-100这种命令生效。bootstrap使用需要遵守它使用的案例来，不然很容易失效。当bootstrap不好用的时候，就考虑用css直接做是最直接了当的办法。...

```<nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#"> Lawrence </a> <ul class="navbar-nav...

通常会提到的position有几种：position:static 就是标准流定位，是默认设置position:relative 是相对定位，这个相对是相对于标准流的，所以显然元素不会脱离标准流。position:absolute 是绝对定位，元素脱离标准流并且参照父元素进行定位。position:fixed 是固定定位，元素脱离标准流并且参照视窗进行定位（一般用在标题栏），可以预见到使...