node第一天

《搭建 Node.js 开发环境》

其实这过程特别简单:

node的版本管理工具，可以用来安装、切换node的版本，

先安装一个 nvm（ https://github.com/creationix/nvm ）

1
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.2/install.sh | bash

nvm 的全称是 Node Version Manager，之所以需要这个工具，是因为 Node.js 的各种特性都没
有稳定下来，所以我们经常由于老项目或尝新的原因，需要切换各种版本。

安装完成后，你的 shell 里面应该就有个 nvm 命令了，调用它试试

1
$ nvm

当看到有输出时，则 nvm 安装成功。

安装 Node.js

使用 nvm 的命令安装 Node.js 最新稳定版，现在是 v0.12.3。

1
$ nvm install 0.12

安装完成后，查看一下

1
$ nvm ls

这时候可以看到自己安装的所有 Node.js 版本，输出应如下：

（图1）

那个绿色小箭头的意思就是现在正在使用的版本，我这里是 v0.10.29。我还安装
了 v0.11.14，但它并非我当前使用的版本。

如果你那里没有出现绿色小箭头的话，告诉 nvm 你要使用 0.12.x 版本

1
$ nvm use 0.12

然后再次查看，这时候小箭头应该出现了。

OK，我们在终端中输入

1
$ node

REPL(read–eval–print loop) 应该就出来了，那我们就成功了。

随便敲两行命令玩玩吧。

比如 > while (true) {}，这时你的 CPU 应该会飚高。

完善安装

上述过程完成后，有时会出现，当开启一个新的 shell 窗口时，找不到 node 命令的情况。

这种情况一般来自两个原因

一、shell 不知道 nvm 的存在

二、nvm 已经存在，但是没有 default 的 Node.js 版本可用。

解决方式：

一、检查 ~/.profile 或者 ~/.bash_profile 中有没有这样两句

1
2
export NVM_DIR="/Users/YOURUSERNAME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

没有的话，加进去。

这两句会在 bash 启动的时候被调用，然后注册 nvm 命令。

二、

调用

$ nvm ls

看看像不像上述图1中一样，有 default 的指向。

如果没有的话，执行

$ nvm alias default 0.12

再

$ nvm ls

看一下

Hello World

首先创建一个js文件，这里我命名为app.js

1
2
3
4
5
6
7
8
9
10
11
var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello World');
});
app.listen(3000, function () {
  console.log('app is listening at port 3000');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 这句的意思就是引入 `express` 模块，并将它赋予 `express` 这个变量等待使用。
var express = require('express');
// 调用 express 实例，它是一个函数，不带参数调用时，会返回一个 express 实例，将这个变量赋予 app 变量。
var app = express();
// app 本身有很多方法，其中包括最常用的 get、post、put/patch、delete，在这里我们调用其中的 get 方法，为我们的 `/` 路径指定一个 handler 函数。
// 这个 handler 函数会接收 req 和 res 两个对象，他们分别是请求的 request 和 response。
// request 中包含了浏览器传来的各种信息，比如 query 啊，body 啊，headers 啊之类的，都可以通过 req 对象访问到。
// res 对象，我们一般不从里面取信息，而是通过它来定制我们向浏览器输出的信息，比如 header 信息，比如想要向浏览器输出的内容。这里我们调用了它的 #send 方法，向浏览器输出一个字符串。
app.get('/', function (req, res) {
  res.send('Hello World');
});
// 定义好我们 app 的行为之后，让它监听本地的 3000 端口。这里的第二个函数是个回调函数，会在 listen 动作成功后执行，我们这里执行了一个命令行输出操作，告诉我们监听动作已完成。
app.listen(3000, function () {
  console.log('app is listening at port 3000');
});

然后打开cmd 运行app.js文件我们可以看到

cmd命令

在浏览器中显示的内容

内容

展开全文 >>

http知识点

http知识点

对于http的报文格式就不多细说了，因为做为前端开发，我们需要知道前后端联调时的请求和响应之间请求头和返回头之间的关系和每个字段中的涵意，静态文件资源在加载时我们所观察到能够性能优化的点，和一些日常请求报错如何去解决的坑，更重要的是面试的时候如何去从容的应对面试官。

谈到http，就少不了最常见的一个问题，跨域，当我们使用api接口进行数据请求时，浏览器的控制台控制台中，报出了这样的错误，恭喜你，你跨域了。

1
Failed to load http://http:www.pilishou.com: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

在本地向不同域请求的时候，浏览器会做一个Origin请求头的验证，如果没有设置，在不同域名下或者本地请求时浏览器会向服务端发送请求，服务端也会客户端发送对应的值，但是浏览器考虑到安全策略，会进行一个关于头信息的报错，此时对于后端来说，需要在response的返回头中加入

1
'Access-Control-Allow-Origin': '*'

来告诉浏览器我允许你进行一个跨域请求，不用报错，把值返回给请求者，这样你就可以安然的拿到数据。同时这样也会导致任何一个域名发送过来的请求，都允许跨域的情况下，可以针对’Access-Control-Allow-Origin’: ‘此处设置指定的域名’

1
2
3
4
5
6
7
8
9
10
11
12
13
在简单的跨域请求中
1.请求方法是以下三种方法之一：
HEAD
GET
POST
2.HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

如果不超过以上的限制,后端则只需要提供一个允许跨域的Origin就可以了，如果在请求方法超过了以上三种，需要添加’Access-Control-Allow-Methods’: ‘PUT’,同样浏览器为了安全，不允其它请求方法在台端没有设置允许的方法中进行一个跨域请求

在非同源的请求情况下，浏览器会首先进行Option请求，所谓的预请求，就是试探性请求，向服务端请求的时候，发现此接口设置了允许对应的请求方法或者请求头，会再次发送真正的请求，分别一共会向后台发送两次请求，拿自己想要的数据，在OPTION请求时，服务端也会返回数据，但是在浏览器层被做了屏闭，如果没有检测出对应的跨域设置则会报出对应的错误。

###可以减少预请求次数

在本地联调时，每次发送一个非简单请求时都会发送一个预请求，预请求也是一个花费时间和资源的操作，就像一次实名质认证过了，在一定时间内就不用实名质认正了，原理一样，如果当前请求的域名第一次认证通过，则在一定的时间内不需要进行一个二次认证，但是需要进行一次认证的时间控制，通过’Access-Control-Max-Age’: ‘860000’，返回，一旦在这个时间之内再次发送时，直接发送真正的请求，不通要再通过预请求Option方法进行一个探测认证。

cache-control 的使用场景和性能优化

cache-control这个东西就是对服务端拉取的静态资源打上一个缓存标志
对于cache-control可以设置几种模式，通常前端工程师又需要知道那几种模式

max-age = 10000 (以秒为音位，根据需求设定)
no-cache (每次进行请求时都要向服务端进行验证，需要配合etag,Last-Modified)使用
no-store (每次请求都需要向服务端拉取新的资源)
privite (私有的，不经过代理缓存)
public (公有的，如果本地失效，代理缓存存在的话可以从代理缓存进行通知用过期的资源)

max-age
当加载完资源时，浏览器会自动给我们存储到内存当中，但是浏览内部的失效时间是由内部机制控制的，在用nginx做静态资源的时候，在刷新的时候，浏览会向服务端再次发送是否过期的认证，在资源缓存时间的确定情况下，通过max-age指定强缓存后,浏览器再次加载同样的资源文件时，只需要从memory或者disk上面进行拉取复用
达到以上的功能需要在返回资源的服务端的对返回的资源设置’cache-control’: ‘max-age=时间（以秒为单位）’,当再次刷新页面的时候，在设置的时间之内，刷新页面，不清除缓存的情况下都会重新拉取内存了中的缓存资源。
no-cache
no-cache 字面的字意是不缓存的意思，但是很容易迷惑人，但是本质的函意，意味着每次发送请求静态资源时都需要向服务端进行一次过期认证，通常情况下，过期认真证需要配合（etag和Last-Modified）进行一个比较，这个话题后继再展开讨论，如果验证并没有过期，则会发送304的状态码，通知浏览进复用浏览器的缓存
no-store
no-store 代表每次资源请求都拉取资源服务器的最新资源，就算同时设置max-age , no-store, no-store的优先级则最高，此时max-age则不生效，同样的会从服务端拉取最新的资源
private vs public
在资源请求时，有些情况不会直接到原资源服务器发送请求，中间会经过一些代理服务器，比如说cdn,nginx等一些代理服务器，如果写入public的情况下，所有的代理服务器同样也会进行缓存，比如说s-maxage就是在代理缓存中生效的，如果本地max-age过期了，则会通过代理缓存，代理缓存并没有过期，会告诉浏览器还是可以用本地过期的缓存，但对于private中间代理服务器则不会生效，直接从浏览器端向原服务器进行一个验证。

###缓存验证 Last-Modified 和 Etag

Last-Modified
最后修改时间，一般在服务端，对文件的修改都会有一个修改时间的记录，在nginx做静态资源时，nginx会返回一个Last-Modified最后修改的时间，在浏览器再次请求的时候，会把对应的If-Modified-Since和 If-UnModified-Since在请求头中再次发送给服务端，告诉服务端上次你给我文件改动的时间，但是Last-Modified只能以秒为单位，在有些情况下，是不够精确的
Etag
是一个更加比较严格的验证，主要通过一些数据签名，每个数据都有自己的唯一签名，一旦数据修改，则会生成另一个唯一的签名，最典型的做法就是对内容做一个hash计算，当浏览器端向服务端再请求的时会带上 IF-Match 或者 If-Non-Match,当服务端接收到后之后会对比服务端的签名和浏览器传过来的签名，这也是弥补了Last-Modified只能以秒为单位，在有些情况下，是不够精确的情况
Last-Modified和Etag 配合 no-cache 使用
通常只会在 cache-control 在 no-cache的情况下，浏览器也会对资源进行一个缓存， 同时会对服务端进行一个认证过期，一旦服务端返回304状态码，则说明可以复用浏览器的缓存，则会向服务端重新请求数据。
cookie的策略机制
cookie则是一个服务端和用端之间一个像身份证认证一样的东西，一旦后端在返回头中设置了cookie,则在response中会出现设置的cookie数据，同时也会存在浏览器的application/cookie中，当每次发送请求的时候都会在request的头中带上当前域名下的cookie信息

展开全文 >>

sass语法

SASS语法（上）

学过CSS的人都知道，它不是一种编程语言。


你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
很自然地，有人就开始为CSS加入编程元素，这被叫做”CSS预处理器”（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。各种”CSS预处理器”之中，我自己最喜欢SASS，觉得它有很多优点，打算以后都用它来写CSS。

下面是我整理的sass用法总结。

文件后缀名

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1
//文件后缀名为scss的语法
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

导入

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import ‘reset.css’，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import “mixin”。
被导入sass文件a.scss：

1
2
3
4
5
//a.scss
//-------------------------------
body {
  background: #eee;
}

需要导入样式的sass文件b.scss：

1
2
3
4
5
@import "reset.css";
@import "a";
p{
  background: #0982c1;
}

转译出来的b.css样式：

1
2
3
4
5
6
7
@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。

变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。
普通变量
定义之后可以在全局范围内使用。

1
2
3
4
5
6
7
8
9
10
11
12
//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}
//css style
//-------------------------------
body{
    font-size:12px;
}

默认变量
sass的默认变量仅需要在值后面加上!default即可。

1
2
3
4
5
6
7
8
9
10
11
12
//sass style
//-------------------------------
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
    line-height:1.5;
}

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

1
2
3
4
5
6
7
8
9
10
11
12
13
//sass style
//-------------------------------
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
    line-height:2;
}

可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。
特殊变量
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//sass style
//-------------------------------
$borderDirection:       top !default;
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}
//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值变量
多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
list
list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等
定义

1
2
3
4
5
6
//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}
//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

map
map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可）
定义

1
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css style
//-------------------------------
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}

全局变量
在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。
目前变量机制
在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//sass style
//-------------------------------
$fontSize:      12px;
body{
    $fontSize: 14px;
    font-size:$fontSize;
}
p{
    font-size:$fontSize;
}
//css style
//-------------------------------
body{
    font-size:14px;
}
p{
    font-size:14px;
}

启用global之后的机制
请注意，这个目前还无法使用，所以样式不是真实解析出来的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//sass style
//-------------------------------
$fontSize:      12px;
$color:         #333;
body{
    $fontSize: 14px;
    $color：   #fff !global;
    font-size:$fontSize;
    color:$color;
}
p{
    font-size:$fontSize;
    color:$color;
}
//css style
//-------------------------------
body{
    font-size:14px;
    color:#fff;
}
p{
    font-size:12px;
    color:#fff;
}

这里设置了两个变量，然后在body里面重新设置了下，有点不同的是对于$color变量，我们设置了!global。通过编译后的css可以看到font-size取值不同，而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量，而只有设置了!global之后才会成为全局变量。

展开全文 >>

React Router

1、React Router的作用

一、React Router解决了React components 到URl之间的同步映射关系
二、Route组件定义了URL路径与组件的对应关系
三、路由器Router其实就是React的一个组件，在使用的时候，直接引用。

下面举一个例子，在没有使用React Router时，我们的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var About = React.createClass({
  render: function () {
    return <h2>About</h2>;
  }
});
var Inbox = React.createClass({
  render: function () {
    return <h2>Inbox</h2>;
  }
});
var Home = React.createClass({
  render: function () {
    return <h2>Home</h2>;
  }
});
var App = React.createClass({
  render () {
    var Child;
    switch (this.props.route) {
      case 'about': Child = About; break;
      case 'inbox': Child = Inbox; break;
      default:      Child = Home;
    }
    return (
      <div>
        <h1>App</h1>
        <Child/>
      </div>
    )
  }
});
function render () {
  var route = window.location.hash.substr(1);
  React.render(<App route={route} />, document.body);
}
window.addEventListener('hashchange', render);
render(); // render initially

一、在hash值改变的时候，App 将会根据this.props.route值的改变来动态渲染 component。
二、这样的做法虽然看起来很直接，但是会导致整个应用程序变得更加复杂。比如，如果组件 Inbox 有一些内嵌的子组件需要根据 例如 inbox/message/:id 或者 inbox/unread 等这样的路由规则做动态渲染的时候。我们需要一些更加智能的手段来把路由信息传递给我们的App，这样Inbox 组件可以根据URL的映射关系来控制哪些子组件应该需要被渲染。
三、很多组件应该根据URL的规则来做动态渲染。在不使用路由规则的前提下，复杂一点的路由需求就需要我们写很多条件判断的代码去去解决实RL和层级组件的同步问题。

引入React Router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var Router = require('react-router');
 var Route = Router.Route;
 // declare our routes and their hierarchy
 var routes = (
   <Route handler={App}>
     <Route path="about" handler={About}/>
     <Route path="inbox" handler={Inbox}/>
   </Route>
 );
 var RouteHandler = Router.RouteHandler;
 var App = React.createClass({
   render () {
     return (
       <div>
         <h1>App</h1>
         <RouteHandler/>
       </div>
     )
   }
 });
  Router.run(routes, Router.HashLocation, (Root) => {
   React.render(<Root/>, document.body);
 });
 var Message = React.createClass({
   render () {
     return <h3>Message</h3>;
   }
 });
 var routes = (
   <Route handler={App}>
     <Route path="about" handler={About}/>
     <Route path="inbox" handler={Inbox}>
       <Route path="messages/:id" handler={Message}/>
     </Route>
   </Route>
 );

一、Root 是 React Router 路由匹配后决定渲染的最高层级的组件，告诉 RouterHandle 应该渲染的内容是什么。 组件是不会被渲染的。只是一个创建内部路由规则的配置对象。
二、解决复杂的URL和层级组件之间的映射关系式React Router 的核心。
三、使用声明式的方式为举的例子引入路由。使用JSX的方式来进行路由的配置，这样就可以通过属性的方式来配置页面视图的层级关系。

2、Redirect 组件

1
2
3
4
<Route path="inbox" component={Inbox}>
   {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
   ＜Redirect from="messages/:id" to="/messages/:id" />
 </Route>

一、Redirect组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。
二、{/ 从 /inbox/messages/:id 跳转到 /messages/:id /}

展开全文 >>

React练习Todolist

todolist

页面效果
页面效果

基本功能

  • 1、用户可以添加任务，当用户输入的内容为空时，不添加。
  • 2、用户可以随时切换任务的完成状态，并进行显示提示已完成数量与总任务数量
  • 3、用户可以删除列表中的任一任务。
    Demo地址：查看Demo地址

创建React组件

所有Todolist组件

创建TodoBox组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var TodoBox = React.createClass({
  getInitialState: function() {
    return {
      data: [
        {"id": "0001", "task":"吃饭", "complete": "false"},
        {"id": "0002", "task":"睡觉", "complete": "false"},
        {"id": "0003", "task":"打豆豆", "complete": "true"}
      ]
    };
  },
  // 根据id删除一项任务
  handleTaskDelete: function(taskId) {
    var data = this.state.data;
    data = data.filter(function(task) {
      return task.id !== taskId;
    });
    this.setState({data});
  },
  // 切换一项任务的完成状态
  handleToggleComplete: function(taksId) {
    var data = this.state.data;
    for(var i in data) {
      if (data[i].id === taksId) {
        data[i].complete = data[i].complete === "true" ? "false" : "true";
        break;
      }
    }
    this.setState({data});
  },
  // 给新增的任务一个随机的id
  generateId: function() {
    return Math.floor(Math.random() * 9000) + 1000;
  },
  // 新增一项任务
  handleSubmit: function(task) {
    var data = this.state.data;
    var id = this.generateId();
    var complete = "false";
    data = data.concat([{"id": id, "task": task, "complete": "false"}]);//链接两个对象
    this.setState({data});
  },
  render: function() {
    var statistics = {
      // 统计任务总数及完成的数量
      todoCount: this.state.data.length || 0,
      todoCompleteCount: this.state.data.filter(function(item) {
        return item.complete === "true";
      }).length
    };
    return (
      <div className="well">
        <h1 className="text-center">React Todo</h1>
        <TodoList data={this.state.data}
          deleteTask={this.handleTaskDelete}
          toggleComplete={this.handleToggleComplete}
          todoCount={statistics.todoCount}
          todoCompleteCount={statistics.todoCompleteCount} />
        <TodoForm submitTask={this.handleSubmit} />
      </div>
    )
  }
});
  • 1、获取当前组件的初始化状态，在TodoBox组件中，定义该组件所要使用的方法。

  • 2、删除该项任务的功能：根据Id删除一项任务，首先获取该组件在删除任务之前的所有任务列表，根据传入的id进行过滤判断，返回其他项任务，进行删除传入id的任务项。更新当前状态值。

    1
    2
    3
    4
    5
    6
    7
    handleTaskDelete: function(taskId) {
      var data = this.state.data;
      data = data.filter(function(task) {
        return task.id !== taskId;
      });
      this.setState({data});
    },

  • 3、切换任务的完成状态功能：传入的值仍为任务当前的Id值，先获取初始数据进行遍历，判断当前任务的complete属性值是什么，使用三元表达式进行判断转换，如：初始值为true，就转换成false，反之亦然。更新当前状态值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    handleToggleComplete: function(taksId) {
      var data = this.state.data;
      for(var i in data) {
        if (data[i].id === taksId) {
          data[i].complete = data[i].complete === "true" ? "false" : "true";
          break;
        }
      }
      this.setState({data});
    },

  • 4、添加任务功能：设定该任务项的基本属性（id，task,complete）,并与之前获得的状态任务列表进行合并并更新当前状态值。

    1
    2
    3
    4
    5
    6
    7
    handleSubmit: function(task) {
        var data = this.state.data;
        var id = this.generateId();
        var complete = "false";
        data = data.concat([{"id": id, "task": task, "complete": "false"}]);//连接两个对象
        this.setState({data});
      },

创建TodoList组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var TodoList = React.createClass({
  render: function() {
    var taskList = this.props.data.map(function(listItem) {
      return (
        <TodoItem
          taskId={listItem.id}
          key={listItem.id}
          task={listItem.task}
          complete={listItem.complete}
          deleteTask={this.props.deleteTask}
          toggleComplete={this.props.toggleComplete} />
      )
    }, this);
    return (
        <ul className="list-group">
          {taskList}
          <TodoFooter todoCount={this.props.todoCount} todoCompleteCount={this.props.todoCompleteCount} />
        </ul>
    );
  }
});
  • 1、这里介绍一下React中的props与state的区别
    state作用 更新组件的state，会导致用户界面的重新渲染（不用操作DOM）,直白来说就是用户的界面会跟着state的变化而变化。
    props作用 是一种父级向子级传递数据的方式，也就是说从拥有者流向归属者。
    这里this.props.data.map()组件从父级获取数据并进行遍历。

创建TodoItem组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var TodoItem = React.createClass({
  toggleComplete: function() {
    this.props.toggleComplete(this.props.taskId);
  },
  deleteTask: function() {
    this.props.deleteTask(this.props.taskId);
  },
  // 鼠标移入显示删除按钮
  handleMouseOver: function() {
    ReactDOM.findDOMNode(this.refs.deleteBtn).style.display = "inline";
  },
  handleMouseOut: function() {
    ReactDOM.findDOMNode(this.refs.deleteBtn).style.display = "none";
  },
  render: function() {
    var task = this.props.task;
    var classes = "list-group-item";
    var itemChecked;
    if (this.props.complete === "true") {
      task = <s>{task}</s>;
      itemChecked = true;
      classes += " list-group-item-success"
    } else {
      itemChecked = false;
    }
    return (
      <li className={classes}
        onMouseOver={this.handleMouseOver}
        onMouseOut={this.handleMouseOut}>
        <input type="checkbox" checked={itemChecked} onChange={this.toggleComplete} className="pull-left" />
        {task}
        <div className="pull-right">
          <button type="button" className="btn btn-xs close" onClick={this.deleteTask} ref="deleteBtn">删除</button>
        </div>
      </li>
    );
  }
});
  • 1、要介绍ref属性，首先得介绍一下render()
    特别注意的是：从 render() 返回来的不是你实际绘制的子组件的实例。从 render() 返回来的仅仅是一个特定的时刻在你组成部分的 sub-hierarchy 中的子组件实例的描述。所以，要想获得在TodoItem中render()里返回的删除按钮，需要在按钮本身上添加ref属性。
  • 2、这里介绍一下React中的ref属性
    refs作用 React 支持一个非常特殊的属性，你可以附加到任何从 render() 输出的组件中。这个特殊的属性允许你涉及相应的任何从 render() 返回的支持实例。它总是保证成为适当的实例，在任何时候。

其余组件的创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var TodoFooter = React.createClass({
  render: function() {
    return (
      <li className="list-group-item">{this.props.todoCompleteCount}已完成 / {this.props.todoCount}总数</li>
    )
  }
});
var TodoForm = React.createClass({
  submitTask: function(e) {
    e.preventDefault();
    var task = ReactDOM.findDOMNode(this.refs.task).value.trim();
    if (!task) {
      return;
    }
    this.props.submitTask(task);
    ReactDOM.findDOMNode(this.refs.task).value = "";
  },
  render: function() {
    return (
      <div>
        <hr />
        <form className="form-horizontal" onSubmit={this.submitTask}>
          <div className="form-group">
            <label for="task" className="col-md-2 control-label">Task</label>
            <div className="col-md-10">
              <input type="text" id="task" ref="task" className="form-control" placeholder="你想做点什么"></input>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-right">
              <input type="submit" value="Save Task" className="btn btn-primary" />
            </div>
          </div>
        </form>
      </div>
    )
  }
});

心得总结

刚开始使用React做简单的案例，总感觉没有了以前的DOM操作，很不适应，尤其是React中的JSX语法糖中html与js混合编写，真的是感觉很不适应。但是当真正做完一两个项目以后，
才发现React组件化的思想对于后续代码的管理和维护，以及编程前的思维逻辑方便了很多，自己在React的道路上才刚刚开始，希望在探索React的道路上，努力前行！！！

展开全文 >>

React组件生命周期

React 组件生命周期

React组件的生命周期可分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

组件生命周期

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。

componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount 在组件从 DOM 中移除的时候立刻被调用。

总结

生命周期的回调函数

生命周期 调用次数 能否使用setSate()
getDefaultProps 1(全局调用一次) 否
getInitialState 1 否
componentWillMount 1 是
render >=1 否
componentDidMount 1 是
componentWillReceiveProps >=0 是
shouldComponentUpdate >=0 否
componentWillUpdate >=0 否
componentDidUpdate >=0 否
componentWillUnmount 1 否

展开全文 >>

React表单组件

1、像是input、textarea、option这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。
2、交互属性
表单组件支持几个受用户交互影响的属性
value，用于input、textarea组件；checked，用于类型为checkbox或者radio的input组件；selected，用于option组件。
在HTML中，textarea的值通过子节点设置，在React中则应该使用value代替。表单组件可以通过onChange会调函数来监听组件变化。当用户做出以下交互时，onChange执行并通过浏览器做出响应：

  • input 或 textarea 的 value 发生变化时。
  • input 的 checked 状态改变时。
  • option 的 selected 状态改变时。

和所有的DOM事件一样，所有的HTML原生组件都支持onChange属性，而且可以用来监听冒泡的change事件。

展开全文 >>

React历程

React介绍

1、React 是一个用于构建用户界面的 JAVASCRIPT 库。
2、React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
3、React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
4、React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React的特点

1、声明式设计 −React采用声明范式，可以轻松描述应用。
2、高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3、灵活 −React可以与已知的库或框架很好地配合。
4、JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5、组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6、单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React组件API

1、SetState:设置状态
2、replaceState:替换状态
3、setProps:设置属性
4、replaceProps:替换属性
5、forceUpdate:强制更新
6、findDomNode:获取DOM节点
7、isMounted:判断组件挂载状态

Tip

  • 原生HTML元素名以小写字母开头，而自定义的React类名以大写字母开头，还需注意组件类只能包含一个顶层标签。
  • React只需更新组件的state,然后根据新的state重新渲染用户界面。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

乐于分享,喜欢环境音乐,爱看动漫,偶尔写写技术博客的小程一枚...