#React 杂谈
@auther 【homker】 @date 【2015 11 30】

最近接触React蛮多的，把一些东西记录下来，为了后面更好的学习。

React是什么

在reactjs.org的官网上，是这么说的哈：

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

那么，很简单喽，这个库，就是一个帮助开发者更好的处理用户界面的东西。

这里注意两个点：

• 这是一个用户界面的库
• 这是一个库

Library 库

作为一个库，区别于angular，同时也区别于vue,虽然这里有一点问题还待商榷的是，vue好像没有说自己是一个框架还是一个库，但是，我个人更偏向于把它看成是前者。那么好了，如果，认为是一个库，那么作为一个库，他只是提供一个辅助工具，来帮助你解决问题，而是不是提出一个完整的解决方案，所以，你会发现，现在react是很自由的，你可以选择任何你喜欢的东西和它搭配在一起工作，他们也能工作的很好。同时，问题也来了，因为他是一个库，所以，有很多东西就变的很不确定。

为什么要用react

使用react的原因有很多，鄙人愚钝，觉得其中比较明显的原因如下：

组件化

react中非常明确的提出了组件(component)的概念，这个组件的概念，不单单指的是web component还包括了native component。而组件化的同时，也自然而然的带来了组件的生命周期。并且，结构代码的语义化在组件化的同时得到了更高层次的实现。

一个react的组件应该看起来是酱的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var React= require('react');

var App = React.createClass({
	
	getInitStates(){
		return {}
	},
	componentWillMount(){
		//do some thing
	},
	componentWillUpdate(){
		//do some thing
	},
	render(){
		return (
			<div>hello word<span>this.props.user</span></div>
		)
	}

})

其中App，就是组件啦，在ES6中，你可以定义为一个class，就像酱：

1
2
3
4
5
6
7
8
9
10

import React,{Component} from 'react';

const App extends Component{
	render(){
		return (
			<div>hello word<span>this.props.user</span></div>
		)
	}
}

个人认为：
组件化的本质其实是对view层的封装。将繁重的view层的变化操作从数据流变化操作中脱离出来，实现数据层和view层的分离。也就是说，在整个代码的组织结构中，数据层将不再处理样式或者说显示上的不同，而是，只要关心数据本身的变化，然后告诉react，变化后的数据集（Date set），剩下的view层变化由react来完成。这样导致了，react希望的数据流每次都是完整的，而不是一个数据片段。这也导致了，react希望使用不可修改类型的数据格式来保证每次的数据是新的。同时，对于数据层而言，自然就希望view层的所有变化应该是可预见的。我提供怎么样的新数据，你就给我显示出来。

生命周期

然后，在其内部定义了生命周期，共有四个。如图：

从生命周期的名字，很清楚的就知道啦，执行顺序如图所示。

组件的生命周期还要注意两点：

1
2
3

ReactDom.render(<MyComponent />, body);
ReactDom.unmountComponentAtNode(body);
ReactDom.render(<MyComponent />, body);

上面的代码是 ReactDom将组件挂载在真实的DOM上的。当然还有移除的方法。要注意的地方是，这里挂载的时候，DOM必须是已经存在着的，不然并不可以啊。也就是说，如果你挂载在动态的DOM的时候，一定要确保DOM是已经生成的，并且真真正正的存在着。
对于React中，生命周期具体的管理方法可以参考这篇文章：React LifeStyle。

Read More

《JavaScript函数式编程》读书笔记

JavaScript是一门很神奇的语言，作为一门现代化的语言，他有很多很有特色的东西，这些东西，让我们看到了一个十分自由化的未来，你永远都不知道，自己是不是掌握了这门奇葩的要命的语言。本文，可能没有那么多高深的编程技巧，有的更多的是，对编程本身的理解。因为，不知道自己有多白痴，所以，要记录下来，等到自己不白痴的时候，就能缅怀当年那个白痴的自己了。

什么是函数式编程

所谓函数式编程，是把函数本身上升到一等公民的地位，进行编程构建。在书中，作者用了这么一句话来形容函数式编程：

函数式编程通过使用函数来将值转换成抽象单元，接着用于构建软件系统。

额，那么好，我们先回忆一下什么叫函数。

函数

一般的，在一个变化过程中，有两个变量x、y，如果给定一个x值，相应的就确定唯一的一个y，那么就称y是x的函数，其中x是自变量，y是因变量，x的取值范围叫做这个函数的定义域，相应y的取值范围叫做函数的值域。

这是数学中的定义，简单的说，函数就是从A到B的关系映射。在计算机中，我们将多条语句组成的程序段（程序块）叫做函数，一个函数本身应该有一定的意义。和数学定义相当的是，变量的生命周期所在的函数空间，为变量的定义域。

面向函数的编程

所谓函数式编程，我们又可以叫做是面向函数的编程。所谓面向函数就是使用函数来作为我们分析和抽象程序的主要工具。

嗯，首先，我们继续来复习一下

• 什么叫做面向过程。

“面向过程”(Procedure Oriented)是一种以过程为中心的编程思想。“面向过程”也可称之为“面向记录”编程思想，他们不支持丰富的“面向对象”特性（比如继承、多态），并且它们不允许混合持久化状态和域逻辑。

其实，说白了，就是想到什么写什么。

• 什么叫做面向对象

按人们认识客观世界的系统思维方式，采用基于对象（实体）的概念建立模型，模拟客观世界分析、设计、实现软件的办法。通过面向对象的理念使计算机软件系统能与现实世界中的系统一一对应。

在面向对象中，我们都知道类和对象是两个很重要的概念。

Read More

今天是我来腾讯六十九天的日子， 迎着南山冉冉升起的朝阳，我不得不和诸位说再见了。在腾讯实习的日子里，我所收获的，远比我付出的多的多的多。

回顾一下，自己这段时间的实习

• 业务需求： 处理的多是，纯前端的一些小需求。
  • 排行榜排序
  • 排行版显示能力实现
  • 优化显示样式
  • 优化文案显示
  • 公用组件增强。

在做这些需求的过程中，犯了很多的错误，万幸，有组里的各位哥哥姐姐们，帮我做codereview，指导我去解决各种各样的技术问题。

• 技术需求： 技术需求包含了预研和开发的两个部分。

  • 预研部分中，处理的是react-bootstrap的可视化编程预研，目的是，希望能够结合react的js组件化和bootstrap的样式组件化，实现大前端的组件化开发，同时，将各个组件通过可视化的操作形式，连接在一起用以提高开发效率和开发质量。
  • 开发部分，为部门的badjs做二次开发。提供分时查询，统计，数据可视化分析的能力，同时对外提供pv查询，错误量查询，历史错误查询等查询接口。

• mini项目： 为hr侧完成了校招内推的宣传h5页面。非常感谢chris能给我们这次机会，也非常感谢我们的一半一半团队，谢谢你们，和我一起的那些日日夜夜，你们让我真真切切的感受到了一支人员齐备的技术团队，应该怎么做事，而你们在工作中表现出来的认真，细致，乐观，向上的精神，也着实令我感动。

  Read More

#badjs是什么

badjs是一个基于node.js的监控终端js错误的系统，包括js错误上报,错误信息统计和分析，数据可视化分析。

假装你已经拥有所有的前置能力要求，如果并不是这样的话，在最后面有详细说明。

首先，看看badjs都有些什么

先看图：

在其开源的github上，我们能很清晰的看到，整个badjs的结构还是很清晰的，主要是以下几个组件，嗯，整套系统都是用node写的。整个都是js的狂欢。

- badjs-web（管理端）
- badjs-storage（存储端）
- badjs-report（终端上报）
- badjs-accepter（服务端接收）

然后，从宏观上的看一下BadJs都干了些什么。

##在浏览器端
这一部分，主要是badjs-report，他的任务是捕捉js的报错，并把报错进行上报。这一部分，主要是要在页面中引入js，并配置，这一部分并不属于二次开发的范畴中，所以，不详述了。

##在服务器端
在服务端，整套badjs包括接收端，存储端和管理端共三个部分，这三个部分都是基于express的框架。

• badjs-web
• badjs-storage
• badjs-accepter
  
  其中，accepter负责接收badsjs-report上报过来的数据，也就是页面上报过来的数据。然后将数据整理一下，校验一下是否是有效数据，然后通过zmq组件将数据传递给badjs-storage，badjs-storage则负责将传递过来的数据进行存储，这里使用了mongoDB作为主存储，file作为辅助cache，在badjs-storage中使用了map-stream作为其数据流的管理。而badjs-web则是将badjs-storage的数据用一种更人性化的形式呈现出来，这里用到了mysql作为存储。嗯，整个体系比较简单的看就是这样的。

Read More

#XSS（Cross-site scripting）

中文名叫跨站攻击脚本,这个攻击方式很是厉害。他经常会出现于一些，你可能永远都想不清楚的地方，然后，突然给你一下，让你不知所云，然后莫名其妙的中枪。

攻击原理

基于js的编译即执行的机制，和其不完善的脚本权限控制，我们很容易构造一个基于js的攻击payload。嗯，google给了一份关于web app 的XSS的介绍，可以点击这里获取。嗯，说道xss攻击，其本质在于其的脚本能力，精悍短小而不易发现，同时，利用脚本的映射性，将攻击性变得特别的诡异。嗯，讲攻击分类之前，先说几个概念性比较强的东西。

反射

在计算机科学中，反射是指计算机程序在运行时（Run
time）可以访问、检测和修改它本身状态或行为的一种能力。用比喻来说，那种程序能够“观察”并且修改自己的行为。要注意反射和内省（type
introspection）的区别。

以上内容来自wiki。说白了，就是程序自己修改自己。

映射

不知道从哪里看到的理解，感觉有点道理，放进来。不是学数学出身，所以并不是很清楚在纯数学里，这个东西是怎么定义。找了很多资料，但是并不能很明确的找到一个官方的定义。wiki中给出的数学概念，映射是函数的一种，看这里，和这里。个人的理解就比较简单啦，把一个函数（function）A的运行环境放到另一个函数B的运行环境下面运行，则我们定义为，A映射在B下。并不知道这个理解对不对啊。那么回到XSS里面来，简单的说，就是一些攻击代码被映射到了正常代码下面，在正常代码的运行环境中运行了攻击代码，导致了一些不可控的事情的发生。

编码

编码这个东西，说起来很奇怪哈，从我和php打交道开始，它就一直萦绕在我的身边根本甩不开，而且很麻烦啊。什么GBK UTF-8 GB2312 ，但是这些都是我们常用的编码集。这些编码的根基是ASCII码表，这个并不需要我多说什么，但是我们一般看到的ASCII码表示是十进制的，但是，计算机的编码不是只有这一种啊，还有八进制，十六进制啊。当然，上面说的都是正统的编码，也就是通用的编码，还有一部分叫做html实体的编码格式则更是让人抓狂。介绍内容看这里。这些实体的本来目的是为了防止html解析出现混乱，但是后来变成了各种payload的利用对象。还有一堆的js编码格式，哦，对了，还有url base64编码嗯，反正这个世界语言一多，就各种编码漫天飞。对应到xss当中，我们在过滤标签的和关键的时候，各种编码就让你目不暇接，分分钟想着，你妹，这TM也行。嗯，水平有限，就不多说了，有兴趣的同学，可以参考这里。

Read More