您的位置：首页 > Web前端 > React

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

2016-09-27 17:19 309 查看

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

最近都有事干然后，快到月底了这个月给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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航