混合开发的大趋势之一个Android程序员眼中的 React.js 块级作用域和 let

转载请注明出处：王亟亟的大牛之路

最近都有事干然后，快到月底了这个月给CSDN的博文也就两篇，想想也蛮多天没更了，那就来一篇。

老规矩，先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android (已经拆完了，基本可以根据链接找你的需要的东西给了，后期还会继续细分)

学了一段时间的RN，公司项目的部分模块也迁移到了RN。

我自己是会SE的东西却对JS不太熟，所以生产效率并不是太高，正好微信的小程序也是类似的实现，让我觉得掌握JS已经成了一个高优先级的学习任务了。

然后当下有2个学习方向其实我觉得还是可以自己去选择的，一个是 VUE 一个是 React.js

一个是阿里等大公司都推崇的：https://github.com/vuejs/vue，另一个看标题你就懂了：https://facebook.github.io/react/index.html

Hellow World

例子中可能出现在 RN文章里出现过的知识点，如果重复了，可以提出我再做修改。

下完所需的JS包简单的包分一下就能开工

官方的sample引用的是 react.js,react-dom.js和browser.min.js 这3个文件

这里补充一句，Browser.js是用来把JSX转成JS的，这个过程比较耗时，丢服务器就行，Demo是为了方便，你懂的

在<head>里引用即可(记得设置下编码，不然中文就是乱码)

<head>
    <meta charset="UTF-8" />
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>

因为React.js的JSX语法和JS是不兼容的（别问为什么，我并不知道），要使用需要加一个<script>标签

<script type="text/babel">

然后在里面代码就行了！

变成都是从Hellow World开始的，我们也试着来一个。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"/>
    <script type="text/babel">

      var wjj = 'hellow world';
      ReactDOM.render(
        <div>{wjj}</div>,
        document.getElementById('example')
    );

    </script>
</body>
</html>

效果图：

在RN的时候也有类似的.render()方法，那么他到底是干什么的呢？

他就是把HTML 语言，并插入指定的 DOM 节点的，也就是插入了例子里叫’example’的那个 <div>节点

块级作用域和块变量

在java中并没有块变量或者块的概念，方法内的变量就是局部变量，类变量就是类变量。

然而在JS语法中有代码块的概念，也就是 { }，白话的讲就是在代码块内申明的变量的生命周期仅可用于代码块中。

而相对应的变量就是 let

let

let 和var类似申明也是

{
let a = 10;
}

区别是他只在他的代码块内有效，出了代码块就会抛出ReferenceError: a is not defined

let不像var 必须先申明再使用，不然会也会抛出ReferenceError（本身JS的这种变量提升的行为，我就不太感冒，本来就应该先有蛋再有鸡）

既然 let和var只是有效范围不同，那let有什么用呢？

提供能好的代码逻辑，需要在块内有效的行为就只能在块内有效，省去了一车无用的”flag”变量

块级作用域

块级作用域{}，他可以多层嵌套，像这样

{{{{
let a=123;
{let a="a";}
}}}};

他们是各自独立的,外层作用域无法读取内层作用域的变量，内层作用域可以定义外层作用域的同名变量，所以你申明一堆同名的变量也没有问题。

可以在块级作用域里使用申明函数，但是和let变量一样，出了块就无效了，像这样

{
      function f() {}
}

下一篇会介绍 const,props,PropTypes