【www.bbyears.com--js教程】
模块引用
在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：
//ES5
var React = require("react-native");
var {
Image,
Text,
View,
} = React; //引用不同的React Native组件
在ES6里，import写法更为标准
//ES6
import React, {
Image,
Text,
View,
} from "react-native";
注意React Native 0.12之后的版本才支持import语法
导出单个类模块
在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出
//ES5
var MyComponent = React.createClass({
...
});
module.exports = MyComponent;
在ES6里，通常用export default来实现相同的功能：
//ES6
export default class MyComponent extends React.Component{
...
}
引用类的时候ES5和ES6也有区别:
//ES5
var MyComponent = require("./MyComponent.js");
//ES6
import MyComponent from "./MyComponent.js";
定义组件
在ES5里，通常通过React.createClass来定义一个组件类，像这样：
//ES5
var Todo = React.createClass({
render: function() {
return (
);
},
});
在ES6里，我们通过定义一个继承自React.Component的class来定义一个组件类，像这样：
//ES6
class Todo extends React.Component {
render() {
return (
);
}
}
定义组件的方法
从上面的例子里可以看到，给组件定义方法不再用 名字: function()的写法，而是直接用名字()，在方法的最后也不能有逗号了。
//ES5
var Todo = React.createClass({
componentWillMount: function(){
},
render: function() {
return (
);
},
});
//ES6
class Todo extends React.Component {
componentWillMount() {
}
render() {
return (
);
}
}
定义组件的属性类型和默认属性
在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现
//ES5
var Video = React.createClass({
getDefaultProps: function() {
return {
autoPlay: false,
maxLoops: 10,
};
},
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
},
render: function() {
return (
);
},
});
在ES6里，可以统一使用static成员来实现
//ES6
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}
render() {
return (
);
}
}
注意: 对React开发者而言，static成员在IE10及之前版本不能被继承，而在IE11和其它浏览器上可以，这有时候会带来一些问题。React Native开发者可以不用担心这个问题。
初始化state
ES5:
//ES5
var Video = React.createClass({
getInitialState: function() {
return {
loopsRemaining: this.props.maxLoops,
};
},
})
6可以这样实现：
//ES6
class Video extends React.Component {
state = {
loopsRemaining: this.props.maxLoops,
}
}
ES6也可以在构造函数中初始化：
//ES6
class Video extends React.Component {
constructor(props){
super(props);
this.state = {
loopsRemaining: this.props.maxLoops,
};
}
}
把方法作为回调提供
ES5中React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但官方现在逐步认为这反而是不标准、不易理解的。
//ES5
var PostInfo = React.createClass({
handleOptionsButtonClick: function(e) {
// Here, "this" refers to the component instance.
this.setState({showOptionsModal: true});
},
render: function(){
return (
)
},
});
ES6中，需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）来调用
//ES6
class PostInfo extends React.Component
{
handleOptionsButtonClick(e){
this.setState({showOptionsModal: true});
}
render(){
return (
>
)
},
}
箭头函数实际上是在这里定义了一个临时的函数，箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名，而箭头之后可以是一个表达式（作为函数的返回值），或者是用花括号括起的函数体（需要自行通过return来返回值，否则返回的是undefined）。
// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert("foo");
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}
需要注意的是，不论是bind还是箭头函数，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用
// 错误的做法
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener("change", this.onAppPaused.bind(this));
}
componentDidUnmount(){
AppStateIOS.removeEventListener("change", this.onAppPaused.bind(this));
}
onAppPaused(event){
}
}
// 正确的做法
class PauseMenu extends React.Component{
constructor(props){
super(props);
this._onAppPaused = this.onAppPaused.bind(this);
}
componentWillMount(){
AppStateIOS.addEventListener("change", this._onAppPaused);
}
componentDidUnmount(){
AppStateIOS.removeEventListener("change", this._onAppPaused);
}
onAppPaused(event){
}
}
从这篇文章中，还可以学到一种心的做法：
// 正确的做法
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener("change", this.onAppPaused);
}
componentDidUnmount(){
AppStateIOS.removeEventListener("change", this.onAppPaused);
}
onAppPaused = (event) => {
//把方法直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
}
}
Mixins
ES5中，经常使用mixin来为类添加一些新的方法，譬如PureRenderMixin,
var PureRenderMixin = require("react-addons-pure-render-mixin");
React.createClass({
mixins: [PureRenderMixin],
render: function() {
return foo;
}
});
官方推荐开发者在ES6中，尽快放弃Mixin的编写方式，用新的编码方式：
//Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: "Hello" });
}
render() {
return
}
};
//HigherOrderComponent.js
import { Enhance } from "./Enhance";
class MyComponent {
render() {
if (!this.data) return Waiting...;
return {this.data};
}
}
export default Enhance(MyComponent); // Enhanced component
用一个“增强函数”，来某个类增加一些方法，并且返回一个新类，这无疑能实现mixin所实现的大部分需求。
ES6+带来的其它好处
结合使用ES6+的解构和属性延展，我们给孩子传递一批属性更为方便了。这个例子把className以外的所有属性传递给div标签：
class AutoloadingPostsGrid extends React.Component {
render() {
var {
className,
...others, // contains all properties of this.props except for className
} = this.props;
return (
);
}
}
下面这种写法，则是传递所有属性的同时，用覆盖新的className值：
…
这个例子则相反，如果属性中没有包含className，则提供默认的值，而如果属性中已经包含了，则使用属性中的值
…
{ Comments on this entry are closed }
Git基础命令整理
by WEB全栈工程师 on 2015 年 04 月 04 日
安装Git
下载 git OSX 版
下载 git Windows 版
下载 git Linux 版
创建新仓库
创建新文件夹，打开，然后执行
git init
以创建新的 git 仓库。
检出仓库
执行如下命令以创建一个本地仓库的克隆版本：
git clone /path/to/repository
如果是远端服务器上的仓库，你的命令会是这个样子：
git clone username@host:/path/to/repository
工作流
你的本地仓库由 git 维护的三棵“树”组成。第一个是你的 工作目录，它持有实际文件；第二个是 暂存区（Index），它像个缓存区域，临时保存你的改动；最后是 HEAD，它指向你最后一次提交的结果。
添加和提交
你可以提出更改（把它们添加到暂存区），使用如下命令：
git add
git add *
这是 git 基本工作流程的第一步；使用如下命令以实际提交改动：
git commit -m "代码提交信息"
现在，你的改动已经提交到了 HEAD，但是还没到你的远端仓库。
查看Git的状态，输入
git status
git log
推送改动
你的改动现在已经在本地仓库的 HEAD 中了。执行如下命令以将这些改动提交到远端仓库：
git push origin master
可以把 master 换成你想要推送的任何分支。
如果你还没有克隆现有仓库，并欲将你的仓库连接到某个远程服务器，你可以使用如下命令添加：
git remote add origin
如此你就能够将你的改动推送到所添加的服务器上去了。
分支
分支是用来将特性开发绝缘开来的。在你创建仓库的时候，master 是“默认的”分支。在其他分支上进行开发，完成后再将它们合并到主分支上。
创建一个叫做“magentonotes_dev”的分支，并切换过去：
git checkout -b magentonotes_dev
切换回主分支：
git checkout master
再把新建的分支删掉：
git branch -d magentonotes_dev
除非你将分支推送到远端仓库，不然该分支就是 不为他人所见的：
git push origin
更新与合并
要更新你的本地仓库至最新改动，执行：
git pull
以在你的工作目录中 获取（fetch） 并 合并（merge） 远端的改动。
要合并其他分支到你的当前分支（例如 master），执行：
git merge
在这两种情况下，git 都会尝试去自动合并改动。遗憾的是，这可能并非每次都成功，并可能出现冲突（conflicts）。 这时候就需要你修改这些文件来手动合并这些冲突（conflicts）。改完之后，你需要执行如下命令以将它们标记为合并成功：
git add
在合并改动之前，你可以使用如下命令预览差异：
git diff
git merge --no-ff -m "merge with no-ff" dev #以普通模式合并分支
git stash #保存工作现场
git stash list #查看工作现场
git stash apply #恢复工作现场，但工作现场的内容并不删除
git stash drop #删除工作现场
git stash pop #这条命令 恢复现场，并删除现场
git stash apply stash@{0} #恢复指定的现场
多人协作
git remote #查看远程分支
git remote -V #查看更详细的远程分支信息
git push origin master #把master分支推送到远程
标签
为软件发布创建标签是推荐的。这个概念早已存在，在 SVN 中也有。你可以执行如下命令创建一个叫做 1.0.0 的标签：
git tag 1.0.0 1b2ffd63ff
git tag -d #删除标签
git tag -a -m "commit info..." #指定标签的信息
git tag -s -m "commit info..." #使用PGP签名标签
git push origin #推送本地的一个标签
git push origin --tags #可以推送全部未推送的本地标签
git push origin :refs/tags/ #删除一个远程的标签
1b2e1d63ff 是你想要标记的提交 ID 的前 10 位字符。可以使用下列命令获取提交 ID：
git log
你也可以使用少一点的提交 ID 前几位，只要它的指向具有唯一性。
替换本地改动
假如你操作失误（当然，这最好永远不要发生），你可以使用如下命令替换掉本地改动：
git checkout --
此命令会使用 HEAD 中的最新内容替换掉你的工作目录中的文件。已添加到暂存区的改动以及新文件都不会受到影响。
假如你想丢弃你在本地的所有改动与提交，可以到服务器上获取最新的版本历史，并将你本地主分支指向它：
git fetch origin
git reset --hard origin/master
git reset --hard HEAD^ #回滚上一个版本
git reset --hard commit_id #回滚指定ID的版本
git log #查看提交历史
git log --pretty=online #显示一行信息的提交历史
git reflog #查看历史命令
git diff HEAD -- 文件名 #查看文件差异
git checkout -- 文件名 #撤销修改，文件修改后还没有被放到暂存区，撤销修改就回到和版本库一模一样的状态；
实用Tips
内建的图形化 git：
gitk
彩色的 git 输出：
git config color.ui true
显示历史记录时，每个提交的信息只显示一行：
git config format.pretty oneline
交互式添加文件到暂存区：
git add -i
忽略特殊文件：
在Git工作区的根目录下创建一个特殊的.gitignore文件，然后把要忽略的文件名填进去，Git就会自动忽略这些文件。
配置模板：
https://github.com/github/gitignore
配置别名：
每个仓库的Git配置文件都放在.git/config文件中，每个仓库的Git配置文件都放在.git/config文件中。
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.ci commit
git config --global alias.br branch
git config --global alias.unstage "reset HEAD"
git config --global alias.last "log -1"
git config --global alias.lg "log --color --graph --pretty=format:"%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset" --abbrev-commit"
git config --global --unset alias.st #取消别名
连接非22端口ssh的git服务器
1
git clone ssh://git@hostname:port/local/xxx.git