react-native入门[一]

ReactNative采用的开发语言是JavaScript，符合ECMAScript语法规范。
ECMAScript和JavaScript关系：

ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。

javascript中有全局作用域，函数作用域，唯独不存在块级作用域。在ECMAScript6中[ES6，2015年6月发布]中新增了块级作用域，块级作用域由：{} 大括号表示，if语句和for语句里面的{ }也属于块作用域

代码所示:

function printNumber(num) 
{ 
    for(var i = 0; i < num; i ++ ) 
    { 
        console.log(i); 
    } 
    console.log("i="+i); 
    var i ;
    console.log("i="+i);
}
printNumber(2);

在java、c++等语言中，变量i只会在for循环内有定义，在for循环外是访问不到的，for循环一旦结束，变量i就会被销毁。但是在javascript中，变量i存在整个printNumber函数的活动对象中，故这段代码却可以在js中正确的执行。[假设在第一个console.log("i="+i)语句下面重新声明同一个变量，遇到这种情况，它只会对后续声明视而不见。]输出结果为：0，1，i=2，i=2。

javaScript中模仿块级作用域(即私有作用域)[利用匿名函数或闭包实现]：
javascript之"块级作用域"的概念和闭包
匿名函数的定义：function(){};
匿名函数定义之后立即调用：(function(){/*块级作用域*/})();

代码所示：

function printNumber(num) 
{ 
    (function(){ 
    for(var i = 0; i < num; i ++ ) 
    { 
        console.log(i); 
    } 
    })(); 
    console.log("i="+i); //会导致错误 
}
printNumber(2); 
当执行到 console.log("i="+i); 行时，会出现“SCRIPT5009: 'i' is not defined”的错误

此时变量i只能在循环中使用[匿名函数中]，使用后即被销毁。而num可以在私有作用域中被访问，是因为匿名函数是一个闭包，它能够访问包含作用域中的所有变量。这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。由一个很多开发人员编写的大型应用程序中，通过私有作用域的使用，可以解决由于过多全局变量和函数产生的命名冲突。通过创建私有作用域，每个开发人员可以使用自己的变量，而不用担心搞乱全局作用域。

var，let，const三者区别：

代码所示：

   // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错
 

    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  (在同一个{ }中,也属于同一个块，可以正常访问到)
        console.log(f); // 7  (在同一个{ }中,也属于同一个块，可以正常访问到)
 
    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错

1：var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2：let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3：const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

JS中变量申明分显式申明和隐式申明。 
var i=100;//显式申明      i=100;//隐式申明 
全局变量：声明在函数外部的变量（所有没有var直接赋值的变量都属于全局变量）
局部变量：声明在函数内部的变量（所有没有var直接赋值的变量都属于全局变量）
在函数中使用var关键字进行显式申明的变量是做为局部变量，而没有用var关键字，使用直接赋值方式声明的是全局变量。　 
当我们使用访问一个没有声明的变量时，JS会报错。而当我们给一个没有声明的变量赋值时，JS不会报错，相反它会认为我们是要隐式申明一个全局变量。
代码所示：

var a = 100 ;
console.log(a) ; // 输出100
b = 101 ;
console.log(b) ; //输出101
console.log(m) ; //报错：'m' is not defined

js有两种定义函数的方式，一种是函数声明，另一种是函数表达式。

代码所示：

//函数声明
function functionName (arg0,arg1,arg2){
   //函数体
}

//函数表达式
var functionName = function (arg0,arg1,arg2){
   //函数体
}

Babel:一个ES6的解析器，可以把ES6代码转化为ES5代码。
es6语法快速上手

React-native和React中组件属性的声明方式：

代码一：

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name} - {this.state.n}</div>;
  }
}
ReactDOM.render(
  <Hello name="1111"  />,
  document.getElementById('container')
);
1：<Hello name="1111" />  这句代码为Hello组件声明定义了name属性，name属性的值为“1111”。
2：<div>Hello {this.props.name}-{this.state.n}</div>  这句代码中的this.props.name的意思是从Hello组件中提取属性name的值“1111”。
3：表达式用花括号括起来  {表达式}

默认属性写法：

代码二：

//写法一：在组件内部的使用static
static defaultProps = {
    name: “1111”
}

//写法二：在组件外部
Hello.defaultProps = {
    name: “1111”
}
defaultProps是组件的默认属性

ES5：
代码三：

class Hello extends React.Component {
    static defaultProps = {
        name: 'segmentfault'
    };
    this.state = this.initialState();
          
    componentWillReceiveProps(nextProps) {
        if(this.props.name !== nextProps.name) {
            this.setState(this.initialState());
        }
    }
    
    initialState() {
        return {n: 100};
    }
    
    render() {
        return <div>Hello {this.props.name} - {this.state.n}</div>;
    }
}

ES6  ：
代码四：

//state在constructor方法里写
constructor(props) {
    super(prpos);
    this.state = {
        n: "123"
    }
}
另外 this.state 也可以直接在 class 中定义，如果在 constructor 中定义且是继承组件的话需要使用 super() 方法来初始化父类。

ES6延伸操作符：

假如我们的组件需要好多属性，如下：
params = {name: 'XiaoZhang', age: 18, sex: '男'}
// 如果需要传递给下一个页面需要：
<PropsTest
    name = {params.name}
    sex = {params.sex}
    age = {params.age}
/>
// 等等，这样如果属性特别多，代码将会变得难以维护
//在ES6中可以使用最新的延伸操作符特性
<PropsTest
    {...params}
/>

ES6解构赋值：

this.state={
          name:"",
          age :"",
          persons:[]
        }
const {name,age,persons} = this.state [es6的简写形式]等价于  
const name = this.state.name ,age = this.state.age ,persons = this.state.persons ;

javascript关键字in的使用用法：for ... in 和in的区别：
for...In 声明用于对数组或者对象的属性进行循环/迭代操作；判断对象是否为数组/对象的元素/属性：
http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930643.html
javaScript中的in关键字：https://www.cnblogs.com/renxiaoren/p/5942767.html 
in 操作符用于确定某个元素是否在数组中，判断某个属性是否在对象中
例如判断浏览器是否支持通知： var isSupport='Notification' in window ;   

javascript变量声明提升(hoisting)：http://www.cnblogs.com/silentjesse/p/4024536.html
javascript中如何分未定义变量和已定义未赋值变量:https://bbs.csdn.net/topics/390933915
javascript定义全局变量的时候有var和没有var的区别：http://blog.csdn.net/qq_34986769/article/details/52166035
javascript中声明时用"var"与不用"var"的区别：https://www.cnblogs.com/juejiangWalter/p/5725220.html
javascript中定义变量时有无var声明的区别：http://www.jb51.net/article/53909.htm
javascript 异步系列--async await：https://www.cnblogs.com/wangfupeng1988/p/6532734.html
javascripts判断undefined类型,undefined,null, 的区别详细解析：http://www.jb51.net/article/44472.htm
javascript中的this变量的使用介绍：http://www.jb51.net/article/42257.htm
W3C HTML 全局属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
菜鸟教程 HTML 全局属性：http://www.runoob.com/tags/ref-standardattributes.html

c语言中，声明和定义有什么区别：https://zhidao.baidu.com/question/262711599.html 

React-Native语法：http://blog.csdn.net/zhang_z_qiang/article/details/52388071
React-Native入门教程Demo：http://blog.csdn.net/hello_hwc/article/details/51199384
React的组件和属性: https://www.cnblogs.com/hahazexia/p/6381054.html?utm_source=itdadao&utm_medium=referral
React中的refs的使用: http://blog.csdn.net/yubo_725/article/details/50554081
React中props和state最佳实践: http://blog.csdn.net/dangnian/article/details/50998981 
React中props的基本原则: http://blog.csdn.net/hard_working1/article/details/51085325 
React中props详解：https://www.cnblogs.com/chenjinxinlove/p/5559932.html
React中props属性：http://www.jianshu.com/p/fa81cebac3ef
React学习之props: https://www.cnblogs.com/cqsjs/p/5879644.html 
React创建组件的三种方式以及区别：http://blog.csdn.net/wbiokr/article/details/73028541 
React-Native中props使用详解 ：http://www.imooc.com/article/17918?block_id=tuijian_wz

FaceBook F8项目： https://github.com/fbsamples/f8app/blob/master/js/tabs/F8TabsView.js
ReactNative中文网：https://reactnative.cn/
React：https://reactjs.org/
https://github.com/ruanyf/react-demos