React 读书笔记

　　序言: 领导安排部门同事本月内看一本跟自己职业相关的书籍, 根基类的书籍已经看过了，重复阅读的意义不大，所以我平时看的都是视频，也许是视频作者没有出书的条件，也许是现在出书看的人越来越少了，也许有其他各种原因，总之我左挑右选, 发现其实网上没有适合当前时间段看的书了, 为什么说不适合本时间段, 是因为我找遍了所有的购物网站, 京东、当当、万能的某宝、亚马逊，没有发现有书籍是最新的适合2016年看的，在近两年的发展可谓是几乎没人跟得上，虽然现在已经是2017，适合二字是因为互联网前端开发技术，往前倒十年，基本是平稳的发展，但近两年忽然进入了爆发期，这么形容吧，就好像是朝鲜的北逃者忽然到了美国的纽约时代广场的感觉。这种感觉是让人心中慌张的，但同时也有一种特别兴奋的刺激感。

　　其实近两年的互联网各个方面基本上都已经改变了世界，但不是平稳改变的，我想各位也可能有所感觉，无论是外卖、滴滴、网购，各种线上线下的结合，包括我们在做的在线教育培训，都在改变着之前的生活方式、习惯。

　　好了，聊我们的正题，读书笔记，我看的书是《React，引领未来的用户界面开发框架》，这本书是介绍如何改变浏览器对服务端的响应的一门技术（在互联网上已经很流行，但是在我国并未非常流行，因为诸多原因），由一个并不存在的网站Facebook出品，他出现的原因是因为每次浏览器需要获取信息展示给用户时，需要重新加载全部的DOM结构，也就是我们右键点击网页时查看源代码所看到的一大堆东西，该公司开发了此框架的用意是用户点击某按钮的时候发出的请求有时候不需要用户完全刷新整个页面就可以获取到新的信息，例如：我们公司的官网，我们比如切换一个页面，点击“课程体系”的时候，事实上导航条和页尾部分是没有发生变化的，但我们现在是向服务器发送请求，服务器接收到请求后，从数据库或者自行计算一些数据，然后将数据解析处理后，将需要展示的源代码编译为html、css、javascript代码，并返回给浏览器端，浏览器再将代码渲染后的页面展示给用户，这其中服务器和浏览器的压力不堪重负，特别是服务器，属于后端服务类语言，在这部分中却干了编译html、css等工作，这些不是它擅长的，他却无力吐槽。

　　现在fb出来的这个框架的解决方案是：浏览器依然发出请求，服务端返回刚刚所说的从数据库或自行计算的数据，编译工作不用它来干了，编译工作在前端完成，前端收到数据后，用javascript的dom操作（或者是其他的），将需要修改的部分替换掉，替换dom在老旧的技术中应用也是很广泛的，事实上是一种很危险的操作，而且对浏览器的压力很大，但是fb提供的框架集成了一套非常厉害的算法，让这个操作非常的流畅。相当于服务器只需要完成他原来工作的三分之一，前端浏览器也将他的工作量减少了三分之一，而且用户的体验感会好三倍甚至以上，唯一不太开心的就是前端工程师，他们的代码量和学习成本增加了三倍，但是我却是非常开心的，因为我感觉到了代码变得更加的优雅，逻辑性和严谨性更强，这都是令我欣慰的。（事实上即使世界上所有的网站都使用了该技术，用户其实是不会有感觉的，因为用户只在乎信息的传递，这点卡顿与速度，我完全不在乎，但是对程序员来说，这个变化是飞跃性的，一会儿下面会说道）

　　第一大章：网页也是一种程序，每个网站都是一个“独立”的程序，使用component将网页中的每一个可拆分的部分改写为可以复用的组件，这是非常有意义的，例如创建一个一号标签正常使用的代码是　var oH1 = document.createElement("h1"); oText = ducument.createTextNode("我是一个标题"); oH1.appendChild(oText); window.body[0].appendChild(oH1);，这段代码是Javascript的原生写法，但是是很让人作呕的，因为他需要先创建一个标签h1，然后再创建一个文本节点，然后将文本节点插入到h1标签中，再然后将处理后的h1标签插入到页面的body中；react提供了一套JSX语法，上面的代码可以一句话来写完：React.DOM.h1("我是一个文本节点"); 简直6到不行啊，而且其中fb已经用算法帮忙做好了DOM操作，不会像上面的代码那么生硬的改变页面，如果重复一万次上面两种操作，用户一定可以感受到其中的差别。而且上面的代码可以赋值为某个变量，到处拿来用，一个网页中样式和事件重复的地方有很多，都可以拿来复用，而且这样的更加语义化。更加抽象化！在component中，可以进行变量的操作，也就是可以直接在熟悉的“html”中进行计算，这在之前只能通过单独的DOM操作来修改，例如存储变量 var text = "美洲虎少儿英语"; 在创建上面的h1标签或者其他任何标签的时候可以将这个变量值与字符串进行拼接，例如：React.DOM.h1("品牌名：" + text);，将显示品牌名美洲虎少儿英语，这样的好处是如果以后要修改品牌名为“美洲虎演讲英语”，只需要修改这里的变量值，页面自然的会根据变量的变化而变化；在component中，与平时的javascript一样，可以进行变量值的计算，使用函数，使用数值操作，使用条件的判断，这些都是允许的，最后将该组件定义为变量名oH1，就可以在页面中使用<oH1></oH1>来生成上面写的h1标签了，当然组件中可以放很多代码，多重嵌套，与html无异。

　　事件部分，在React中，各种用户行为已经被封装为一个个可以兼容的各个浏览器厂商的prototype，并统一化为驼峰式命名，click封装为onClick，mouseMove封装为onMousemove，而且可以在封装的component组件中使用，使每个组件可以有自己独立的事件行为，不用定义事件的作用域，因为不会污染到全局，在jsx中，捕获一个事件就像给组件的方法设置一个属性一样简单。

handleClick: function (event) {...},
render: function ) {
    return <div onClick={this.handleClick}>...</div>
}

　　注释部分与普通javascript无异，故不写了

　　在component中还可以使用对象的形式为组件添加样式，但是要注意有横杠的css类型需要使用驼峰式命名，不然会因为javascript的计算原理而报错。

var styles = {
　　borderColor: "#f00",
　　borderRadius: "10px",
　　color: #666;
}
React.renderComponent(<div style={style}>..</div>, node)

　　要创建组件元素，只需要调用createElement方法即可，要创建一个工厂，首先要使用createFactory方法

Props数据流（参数的传递）

在使用组件时常常需要将组件的某些部分通过传递参数的形式赋给组件，然后组件拿到后调用或者计算或者做某些操作，一般是通过props

由于react的数据流向是单向的（其父节点传递到子节点），因此组件是简单且易于把握的（它们只需要从父节点获取props渲染即可）

假如顶层组件的某个prop改变了，react会递归地向下遍历整个组件树，重新渲染所有使用这个属性的组件。

react组件内部还具有自己的状态，这些状态只能在组件内修改。可以把它们看成是一个函数，它接受props和state作为参数，返回一个虚拟的dom表现。

2种方式设置props

挂载组件时：

1.<myComponent surveys={surveys}/>

2.调用组件实例的setProps方法：myComponent.setProps({ surveys: survey });使用条件是：在子组件上或组件树外

props还可以用来添加事件处理程序：

createClass用于创建一个实例化的对象

var SaveButton = React.createClass({
    render: function() {
        return (
            <a className='button save' onClike={this.handleClick}>Save</a>
        ),
        handleClick: function() {
            console.log(this)
        }
    }
});

PropTypes，参数的定义传递

1.用途：通过定义一个配置对象，来验证props的方式

2.此函数是一种极好的描述组件API方式（.isRequired）很常用，用于验证数据是否为空值

getDefaultProps

1.用途：设置属性的默认值（针对那些非必需属性）

2.此函数react.createClass调用时被调用，而不是组件实例化时

返回值被保存起来（所以不能在此函数中使用任何特定的实例数据）

State

1.每个react组件都会有自己的state，state与props的区别在于：state只存在于组件的内部

2.state可以用来确定一个元素的视图状态。

mixin

mixin用于定义一个在多个组件中公用的方法，

　　使用getInitialState来创建一个construct，例如写一个getNowDay，像正常的函数一样，定义在createClass的内部，在创建组件时，将函数的返回值直接通过花括号插入到组件内，这种方式的劣势在于如果有另外一个组件要使用这个方法，需要重写一遍，因为每个组件是独立的，他们的函数、方法、变量等统统是自私的。

　　定义一个新的createClass，将第一个参数写为：mixins: [nowDat(1000)]，下面的该怎么写就怎么写，最后将该createClass定义为变量，就可以灵活的在各个位置使用了，mixin使得不仅html/css可以实现公用，现在函数也可以实现公共函数了！

Dom操作

　　虽然fb为我们封装的代码提倡不要手动操作dom，但是我们有的时候因为业务需求，或者是因为其他某些原因，不得不去操作的DOM，好在fb已经考虑到了，这里可以使用ref方法将组件暴露出来，在return代码JSX的时候可以为JSX添加ref属性，然后就可以通过this.refs.<定义的ref名>访问到组件，并且返回的是原生的DOM结构，ref属性要保证是唯一性的，与html中的id是一样的性质。

表单操作

　　在表单中，可以使用预设函数，或者是mixin来定义一个函数，供表单发生事件时来使用，在return时可以直接将表单的onSubmit事件设置为该函数
　　可以约束表单提交的一些验证规则，如果在表单发生变化时执行某函数，这是非常方便的
　　在表单中，有一些特殊字段，如label标签的for会与javascript的for循环变量冲突，需要使用htmlFor的驼峰式写法。
　　表单的name属性不是那么的重要，在html中name表单的数据全靠name属性来获取，在react中已经把值存储了，并且可以很方便的对其进行处理。

react的动画
　　使用动画功能可以很方便的做出页面动画，但是主要还是依托css3，react在动画方面主要的工作是在不同的时间改变标签的class值，在class值被修改的时候，通过css3的transition属性来修改需要改变的样式，在不支持css3的浏览器，这些动画将不会显示，在添加动画后的html代码会自动的修改几个不同周期的class值，直到动画的生命周期结束，也可以创建循环的动画，生命周期的4个class包含 enter enter-active leave leave-active 分别是进入时，进入完成，离开时，离开完成，可以使用javascript的setTimeout定时器函数来定义间隔型的循环动画，这种动画在移动端稍微常见一些。

结合webpack
　　Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
　　通过结合webpack，和webpack的html server微型服务器，可以实时打包，实现代码的热更新，并且可以生成打包为最小化压缩版本，保证了页面的访问速度

通过这本书，我看到的是网页应用的未来，使用react创建的应用是流畅、用户体验极佳的web应用，同时跟react对比的有vue框架，比react使用起来更胜一筹，这个变化是巨大的，以后也许桌面级的应用将越来越少，因为在网页中可以实现的事情，而且功能与流畅度与桌面应用无异的话，我想没有人喜欢下载一个不常用的软件在自己的电脑或者手机中！

下个月我将看的书我希望是vue相关，或者是google刚出的golang语言的，可是买不到合适的，也许是因为纸质书的流程太多吧，所以我可能会看一本电子版的书！

本文章内可能会有一些差池的地方，如果有指出的请联系aa009@foxmail.com，我就厚着脸皮发布了，望见谅

Fea，2017.4.9

完