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

昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android

上一篇的传送门:http://blog.csdn.net/ddwhan0123/article/details/52681169

这里补充下语法环境皆为 ES6


const

const类似于java中的 常量,申明了值就不允许改变。

申明了 就必须立马赋值 不然会 抛SyntaxError: Missing initializer in const declaration

赋值语句和普通变量没什么区别

 const Wjj = 10086;

const和let一样,也只能在所在的{}范围内有效,超出了也会抛出Uncaught ReferenceError: Wjj is not defined

和let一样 他也必须先申明后使用

const如果申明的是一个非基本数据类型,那么他会指向一个地址,但是这个地址的数据是可变的。

要怎么改变常量的值可以用

const wjj = [];

通过改变数组里元素的值来改变常量的值


箭头函数

第一眼看到给我的感觉像 java8的lambda 表达式,实际上也差不多,让我们来看看具体是怎么回事

他其实也就是 一种function(){}的简写,结构如下

([param] [, param]) => {
   statements
}

param => expression

参数不是必须的,返回值也不是必须的,你可以根据自己的需要做出组合。

//无参数,无返回值
() => { console.log( 'wjj' ) } 

//一个参数可以省略 ()
x => { console.log( x )} ;

// 多参数不能省略 ()
(x, y) => { console.log( x + y ) } ;

//和普通函数一样,箭头函数也可以使用 ES6 的“默认参数”形式
var wjj = (x = 1, y = 2) => x + y;
wjj(); //结果等于 3

//多行语句要用 {} 括起来;单行表达式不需要 {}
x => { return x * x };
x=> x+x;

但是
x=> return x+x;会报错

PropTypes

React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。类似于RxJava的.fliter()。

接下来用一个简单的例子来解释下这个属性

<!DOCTYPE html>
<html>
  <head>
    <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"></div>
      <script type="text/babel">
      var TestPro=React.createClass({

        propTypes: {
          title: React.PropTypes.string.isRequired,
        },

        render: function() {
          return <h1> {this.props.title} </h1>
        }
      });

      ReactDOM.render(
        <TestPro title="hi" />,
        document.getElementById('example')
      );
      </script>
    </body>
  </html>

这里定义了一个TestPro组件,我们设定了他的title属性必须为string类型,我们在调用装载这个组件的时候传入了’hi’,效果如下

如果传入不合法值的时候就会报错了

混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes的更多相关文章

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

    转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...

  2. 混合开发的大趋势之一React Native之简单的登录界面

    转载请注明出处:王亟亟的大牛之路 这些天都在学习RN这部分吧,然后写了个简单的登陆业务,从"实战"中讲解吧 还是继续安利:https://github.com/ddwhan0123 ...

  3. 混合开发的大趋势之一React Native与Android联调

    转载请注明出处:王亟亟的大牛之路 先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android 公司某 ...

  4. 混合开发的大趋势之一React Native手势行为那些事

    转载请注明出处:王亟亟的大牛之路 最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补. 话不多说先安利:htt ...

  5. 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码

    转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...

  6. 混合开发的大趋势之一React Native之页面跳转

    转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...

  7. 混合开发的大趋势之一React Native之Image (脑动理解)

    文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路 国庆这些天要么旅游要么WOW,感觉整个人都废了.. 直接从黄种人晒成了非洲大酋长..然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整 ...

  8. 金三银四背后,一个 Android 程序员的面试心得

    回顾一下自己这段时间的经历,九月份的时候,公司通知了裁员,我匆匆忙忙地出去面了几家,但最终都没有拿到offer,我感觉今年的寒冬有点冷.到十二月份,公司开始第二波裁员,我决定主动拿赔偿走人.后续的面试 ...

  9. 一个iOS程序员眼中的跨域问题

    摘要: 跨域问题是web开发领域一个常见的问题,相信每个web开发者都遇到"跨域"的问题 最近公司的iOS开发任务比较少,所以自己最近开始了Web开发的任务,在用H5做了很多页面, ...

随机推荐

  1. Flash Builder 相关

    1.Flex SDK 4.1 兼容性 Flex SDK 4.1 兼容 Flash Builder 4.0 ,因此在 Flash Builder 4.0 中使用 4.1 SDK 时可以使用设计视图 Fl ...

  2. 让TextView的drawableLeft与文本一起居中显示

     TextView的drawableLeft.drawableRight和drawableTop是一个常用.好用的属性,可以在文本的上下左右放置一个图片,而不使用更加复杂布局就能达到,我也常常喜欢用R ...

  3. 54、Android 粒子效果之雨(下雨的效果)

    核心内容: 1.绘制下雨场景的个体.雨点(直线) 2.让直线动起来 3.处理边界问题 4.构造雨点对象 5.雨点大小设置 6.速度设置和角度设置等 7.添加多个雨点 8.抽离可以在 XML 中影响的属 ...

  4. Kotlin——高级篇(五):集合之常用操作符汇总

    在上一篇文章Kotlin--高级篇(四):集合(Array.List.Set.Map)基础中讲解到了数组Array<T>.集合(List.Set.Map)的定义与初始化.但是由于篇幅的原因 ...

  5. 服务器证书日期无效 SSL_DATE_INVALID

    一大早上,企业微信中提示不能使用:服务器证书日期无效  错误码:SSL_DATE_INVALID 网上资料也比较少,咨询了一下企业微信客服,建议访问网址:https://www.ssllabs.com ...

  6. java怎么计算散列码hashcode?

    转自:https://blog.csdn.net/qq_21430549/article/details/52225801 1.从HashMap说起 我们知道Map以键值对的形式来存储数据.有一点值得 ...

  7. 160718、jsoup-1.8.1.jar操作html

    导入jsoup-1.8.1.jarimport java.io.IOException;import org.jsoup.Connection;import org.jsoup.Jsoup;impor ...

  8. HDU 3367 Pseudoforest(Kruskal)

    Pseudoforest Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) To ...

  9. jsp tutorial

    http://blog.csdn.net/JavaEETeacher/article/details/1932447

  10. 我的Android进阶之旅------>解决Error: specified for property 'mergedManifest' does not exist.

    错误描述 刚运行从Github上面下载而来的代码时,爆了如下所示的bug,错误描述如下所示: Error:A problem was found with the configuration of t ...