React入门实例教程读书笔记

这份读书笔记是看了阮一峰的《React 入门实例教程》之后撰写的,留作记录。需要看原文的可以点击前面的书名访问对应链接。

这篇文章的目的

  • 介绍react
  • 如何下载react
  • 如何安装react
  • 如何使用react

文章的组织架构

从易到难的开始介绍。

react在页面的部署

  1. 依赖的两个js
  2. jsx 模板的标签规范
  3. 模板的编译应该放到服务器完成

模板语法

  1. React.render() 转换模板为HTML并插入节点
  2. 允许HTML和javascript混写。
    1. 规则是:遇到HTML标签(以<开头)则视为HTML,遇到代码块(以{)开头,视为javascript
    2. HTML内容可以直接写在javascript变量里
    3. javascript变量可以直接插入到模板。如果变量是数组,则自动展开这个数组的所有成员

组件

组件介绍

  1. 用React.createClass来生成组件类
  2. createClass的传参对象,需要一个render方法,用来描述组件的渲染
  3. 组件类以大驼峰方式书写
  4. 组件类以模板的方式调用,写法可以有单标签和双标签两种
  5. 组件类以模板的方式调用,实际是实例化了产生了一个对象,以下简称为组件
  6. 组件的调用和HTML标签完全一致,能加入属性。属性的调用,可以通过组件类的实例在javascript中,以this.props.xxx的方式调用
  7. 组件的style属性设定的时候,期望的值是一个对象{opacity: 0.5, marginLeft: ‘1px’} 而不是一个字符串,最终的写法是{{opacity: 0.5, marginLeft: ‘1px’}} 外面一对大括号表明是javascript代码块,里面的一对大括号,表明是对象
  8. 冲突的属性名class和for 要对应改为className和htmlFor,因为class和for是javascript的保留字
  9. this.props的属性和组件HTML属性一一对应,但是this.props.children例外,它表示组件的子节点
  10. 在用双标签的方式调用组件的时候,标签之间的HTML即为组件的子节点,完全和原生HTML一致

组件的特性

  1. findDOMNode
    1. virtual DOM
    2. virtual DOM 通过 DOM diff算法映射到真实DOM上
    3. findDOMNode用于获取跟组件关联的真实DOM的节点
    4. 只有在virtual DOM插入文档之后才能起作用
  2. this.state
    1. 类似状态机的概念
    2. getInitialState方法来设定初始状态
    3. 通过用户互动修改状态,一般是对应的event function来setState
    4. render里面,根据不同的状态渲染出不同的UI
    5. setState自动调用render重绘UI
    6. 区分this.props和this.state: this.props类似常量,设定之后不改变;this.state是随着用户互动而变化的特性
    7. 表单内容的变化也是通过state来进行更新的

组件生命周期

  1. 三个状态
    1. Mounting 已插入真实DOM
    2. Updating 正在被重新渲染
    3. Unmounting 已移出真实DOM
  2. 每个状态提供两个回调函数,will在进入状态之前调用,did在进入状态之后调用
  3. 三个状态共计五种回调函数,书写方式component是前缀,will/did是行为,Mount/Update/Unmount是状态
    1. componentWillMount()
    2. componentDidMount()
    3. componentWillUpdate(object nextProps, object nextState)
    4. componentDidUpdate(object prevProps, object prevState)
    5. componentWillUnmount()   为什么没有componentDidUnmount() ?
  4. 特殊状态的回调
    1. componentWillReceiveProps(object nextProps) 已加载组件收到新参数
    2. shouldComponentUpdate(object nextProps, object nextState) 组件判断是否重新渲染时调用 不明白

结合其他库或者框架使用

  1. react没有任何依赖
  2. react只关注表现层
  3. 如果希望对组件的DOM进行操作,尽量在componentDidMount中进行,保证真实DOM已经存在

主旨

React是一个关注表现层,以组件来构建内容,以状态机来完成交互的UI改变的,可以在浏览器端和服务器端同时运行的前端框架。

Sublime Text的使用-推荐的包/插件

回到目录:Sublime Text的使用

DocBlockr

一个便捷的文档构建工具,能方便的给js文档本身,js函数/方法 进行详细的文档描述

触发的方式很简单,输入 /** 然后Enter,就会自动出一个格式化的模板,修改完一个,打Tab键,就可以自动去修改下一个

Emmet

这个是zen coding的后续升级维护版,进行HTML开发是必不可少的一大利器,通过简单的css选择器语法,能快速的构建出需要的HTML代码。当然还有很多别的很方便的使用方法,具体可以查看官方文档

HTML-CSS-JS Prettify

这是前端团队风格统一化比较方面的一个插件,能快速的针对html, css和js文件进行格式化

LESS

这个是less文件语法高亮的一个插件,对前端同学来说也是很有必要性的一个工具

Markdown Preview

这个是对写完的markdown文件,进行预览的一种工具,提供两个主题的预览或者保存。

Control+Shift+P的命令界面中输入markdown(前提是已经安装了该插件),就能看到相关的命令

markdown命令

其中preview in browser就是在浏览器中预览,save to html就是在当前md所在文件夹,以同样的文件名,保存一个生成的和预览效果一致的html文件

JSONLint

这个是一个JSON的语法检测工具,能在当前打开的json文件中标示出语法错误的地方

JSONLint

这个对平时我们用json写一些接口假数据的时候,比较方便

// and more …

Sublime Text的使用-Package Control

回到目录:Sublime Text的使用

Package Control

Package Control,是一个方便的管理Sublime Text插件的包管理器,几乎是必备的Sublime 工具

安装

从菜单 View – Show Console 或者 ctrl + ~ 快捷键,调出 console。将以下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装。

Sublime Text 3

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = 
sublime.installed_packages_path(); urllib.request.install_opener( 
urllib.request.build_opener( urllib.request.ProxyHandler()) ); 
open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 
'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

Sublime Text 2

import urllib2,os; pf='Package Control.sublime-package'; ipp = 
sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) 
else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( 
))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 
'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please 
restart Sublime Text to finish installation')

使用

使用的时候使用快捷键 Ctrl + Shift + P (Windows) 或者 Command + Shift + P(Mac) 调用命令输入界面(注意,此界面非Package Control专有)

Package Control

在输入框里面,输入Package Control就能看到所有Package Control相关的命令

相关命令

Package Control: Install Package

一般输入install就能通过模糊匹配查找到

会列出Sublime Text官网上的所有包供浏览

能根据输入的内容进行模糊查找相关的包

点击需要的包,就能自动安装。

PS: 已经安装的包不会在此展示

搜索Less相关的包

Package Control: List Package

列出当前已经安装的包,在命令行里面输入list,也能模糊匹配到,不需要整个命令全部输入

也能支持模糊匹配相应安装的包

点击对应的包,会打开文件夹指向对应包的目录。

这个时候,可以看这个包里面的文件和相关说明(一般包的文件里面都会包含一个readme.md用来进行使用方面的相关说明)

Mac下JSHint包的文件内容

Package Control: Remove Package

删除安装的包

通过remove 也能快速模糊匹配到

会列出当前已经安装的包,点击选中的包,就能删除(慎重)

Sublime Text的使用-配置

回到目录:Sublime Text的使用

说明

通过修改Sublime Text的配置,能让Sublime Text使用起来更加便捷

配置分为两种:一个是Default,这个是默认配置,建议不要动,而是作为一个参考。另一个是User,这个才是建议用户去修改和搭配的配置。

配置的写法都是json,所以书写的时候一定要注意规范,比如字段名都是用双引号包裹。如果语法书写有错误,是没法起作用的,不过会有提示

配置说明

下面将列举一些常见的配置命令和对应说明:

  • font_size {Number} 设置字体大小的,在编辑界面通过Ctrl+鼠标滚轮 或者 Ctrl++/- 调整的字体大小也会对应的修改到User下的这个命令下,一般13、14、15都是比较合适的值,可以自行调配
  • highlight_line {Boolean} 是否高亮当前光标所在行
  • ignored_packages {Array} 要忽略的包 有些包,可能暂时不需要用但是又不想卸载,这个时候,可以选择忽略,使其不起作用,最常见的忽略就是vim包
  • translate_tabs_to_spaces {Boolean} 是否把制表符转换为空格 建议开启,因为制表符,每个编辑器设定的长度都不一样,而空格的长度都是一样的。这样能保证在不同平台,不同编辑器,不同开发人员的情况下,代码的格式和缩进都一样
  • trim_trailing_white_space_on_save {Boolean} 是否在保存的时候去掉多余的空格。最常见的情况就是有一个空行没有任何代码,但是这个空行里面有很多制表符或者空格。如果开启了,那么保存的时候,空行还是保留,但是行内的空白字符(制表符,空格等)会被清除掉
  • word_separators {String} 定义哪些字符可以分隔单词 这个在想双击选中某些单词的时候很有用。比如在前端开发中,class的定义是字母之间用连字符间隔。可是在Default配置里面,-是可以分隔单词的,这导致的结果就是我们双击class的时候,没法完整的选中整个class。解决的方法就是从Defult里面复制word_separators的值(这就是为什么不要动Default配置而是当做参考的原因之一),在User里面新建这个字段,然后把值里面的连字符去掉。
  • word_wrap {Boolean} 定义在输入的内容到达右边距的时候,是不换行继续输入还是会自动折行展示

推荐的一个初始配置


{
    "font_size": 15,
    "highlight_line": true,
    "ignored_packages":
    [
    ],
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true,
    "word_separators": "./\()"':,.;<>~!@#$%^&*|+=[]{}`~?",
    "word_wrap": true
}


wordpress的twentyfifteen主题下JiaThis和uJian样式问题修复

介绍了如何修复在Wordpress的twentyfifteen主题下JiaThis和uJian的样式问题

最近升级Wordpress的主题到twentyfifteen,清爽的界面看着果然高大上。然后问题来了,一直工作很好的分享工具JiaThis和uJian出问题了。找了客服问了下(自己太懒,不愿意debug),解决了JiaThis的问题,然后按照发现的问题的思路,顺便解决了uJian的问题。

JiaThis的分享按钮过小的问题

最开始的分享按钮是这样的

按钮很小

加上如下样式:

.jiathis_style img {
    max-width: 26px;
}

即可修复,变成

按钮正常

JiaThis的分享渠道面板

最开始的样式

无法展开

面板在鼠标放到按钮上的时候无法展开

加上如下样式:

.jiathis_style table{
    table-layout: auto;
}

使得表格的宽度计算方法恢复为默认的按内容来计算,样式就正常了

正常面板

uJian的展开样式

最开始是这样的扭曲

变形的uJian

加上和上面JiaThis的面板同样的样式之后

.jiathis_style table, #ujian-side table {
    table-layout: auto;
}

可以看的下去一点了

好一点的面板

再加上如下这段

#ujian-side a {
    box-sizing: content-box;
}

解决盒模型的计算方法

最终正常了:

效果? 看右侧的分享 ===============================>

所有的样式收集整理如下:

.jiathis_style img{ max-width:26px;}
.jiathis_style table,#ujian-side table{table-layout: auto;}
#ujian-side a{box-sizing: content-box;}

选择器优化

翻译自:http://learn.jquery.com/performance/optimize-selectors/

在越来越多的浏览器支持document.querySelectorAll()之后,使得查找DOM的压力从jQuery转移到浏览器,选择器的优化,已经没有以往那么重要。然而,仍然有一些小技巧要记住。

基于ID的选择器(ID-Based Selectors)

基于ID进行查找永远是最好的方法。

// 快速:
$( "#container div.robotarm" );
 
// 更加快速:
$( "#container" ).find( "div.robotarm" );

使用.find()的方法更快,因为第一个选择器是没法脱离Sizzle选择器引擎的处理 – 而只有一个ID不包含其他类型的选择器,是直接由document.getElementById来处理的,这个是原生方法,超级快

特异性(Specificity)

把更特异的选择器放右侧,更简单的选择器放左侧。(Sizzle选择器在某些情况下,是会从右往左进行查找,这个时候,右侧的特异性,使得查找出来的结果集很小,然后再往上遍历查找符合条件的父级,效率就会很高 — 编者译)

// 没优化的:
$( "div.data .gonzalez" );
 
// 优化了的:
$( ".data td.gonzalez" );

避免过度特异性(Avoid Excessive Specificity)

$( ".data table.attendees td.gonzalez" );
 
// 更好的: 如果可以尽量去除中间的多余的条件
$( ".data td.gonzalez" );

一个轻简的DOM有助于提升选择器的性能(原文是:A “flatter” DOM also helps improve selector performance,不太好翻译),因为这样可以在查找dom的时候,减少需要检索的层级

避免全部选择器(Avoid the Universal Selector)

如果明确的或隐晦的的全部选择器(结果如果是会匹配绝大多数的DOM),这样的选择器会非常的缓慢

$( ".buttons > *" ); // 非常耗性能
$( ".buttons" ).children(); // 更好的方式
 
$( ".category :radio" ); // 隐晦的全部选择器
$( ".category *:radio" ); // 和上面的效果一样,只是更加明确
$( ".category input:radio" ); // 更好的写法

javascript漂移广告效果

今天要帮人实现一个可以在窗口上飘来飘去的广告,虽然对这类漂浮移动的广告很不感冒,但是写还是得写的。

原理知道,但是自己写,总是麻烦,就去网上找了个demo,然后再基于那个demo做了点修改。

话不多说,上代码:




    
    Document
    


效果看这里:

主要的修改有如下几点:

  • requestAnimationFrame — 使得在高级浏览器下的性能呢更好
  • document.documentElement.clientHeight/clientWidth — W3C标准的获取窗口尺寸的方法
  • 数据缓存 把部分固定不变的变量移动到动画主函数之外,避免多余的计算消耗和DOM查找

Bootstrap的Carousel实现垂直滚动效果

介绍了实现bootstrap里面carousel的垂直滚动的方法

Bootstrap的Carousel默认是水平滚动的,下面介绍实现其垂直滚动的方式,看代码:

html结构,相对于bootstrap,新增了vertical的class



css样式,设定.carousel.vertical 对应的一些控制class的效果和动画

.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
  top: 0;
}

.carousel.vertical .next {
  top: 100%;
}

.carousel.vertical .prev {
  top: -100%;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}

.carousel.vertical .active.left {
  top: -100%;
}

.carousel.vertical .active.right {
  top: 100%;
}

.carousel.vertical .item {
    left: 0;
}​

js代码,设定滚动的间隔

$('.carousel').carousel({
  interval: 3000
})

以上就可以顺利实现一个垂直滚动的Carousel

参考网址:

twitter-bootstrap-carousel-vertical-sliding

Carousel vertical Bootstrap slider