import React, { Component } from 'react';
function t1(a){
return a + 1;}var t2 = function (a){
return a + 1;}//普通对象,类似于JSON格式,同时类似java的实体类
const t3 = { name:'小明', sex:'男'}//定义牛逼的对象,包含函数(匿名函数,代码段)//把一个代码段,当成是对象const t4 = { name:'小明', sex:'男', playGame:function(){ console.log('我是t4点playGame'); return 'ttt'; }}//把匿名函数,return部分,改成箭头函数//箭头函数意义://a.本质上是一个lambda表达式(jdk8,新版c#等新特性)//b.实现函数的参数和返回值分离(左参右返)//c.可以去掉function,花括号,return 等多余的代码const t5 = { name:'小明', sex:'男', playGame:()=>'ttt' }//没有参数,是不可以把()去掉const t6 = { name:'小明', sex:'男', playGame:()=>'ttt' }//带参数的匿名函数
const t7 = { name:'小明', sex:'男', playGame:(ii)=>'ttt'+ii}function _playGame(ii){ return 'ttt'+ii;}//只有1个参数,当参数只有1个时,可以更进一步把参数的括号去掉const t8 = { name:'小明', sex:'男', playGame:ii=>'ttt'+ii}//2个参数以上,必须使用括号,把参数打包const t9 = { name:'小明', sex:'男', playGame:(ii,dd)=>'ttt'+ii+dd}//要使用上对象中的属性,this问题//会报:Cannot read property 'name' of undefined//Javascript有个严重历史bug,各浏览器对this的解释都不一样//有可能this指整个windows,也有可能是上一层。//第2,箭头函数中,它自己本身是没有this的,//如果在箭头函数中,出现this,那么它一定是上一层//const t10 = { // name:'小明',// sex:'男',// playGame:()=>'你好'+this.name//}//没有箭头函数,这个看起来好像是对的
//换个浏览器,随时报错,因为每个浏览器//对this的解释都不一样const t11 = { name:'小明', sex:'男', playGame:function(){ return this.name+"你好" }}//万能招数,//各浏览器虽然对this的解释不一样,//但是大家都共同约定了在箭头函数中的this,是指它的上一层const t12 = { name:'小明', sex:'男', playGame:function(){ const fn = ()=> this.name + "你好"; return fn(); }}//对于箭头函数,如果左边的参数是0个或者多个,
//就必须用()包着它,把它变成1个东西,//同理,右边语句,如果不止1条,那么就可以套用{}//变成1个东西const t13 = { name:'小明', sex:'男', playGame:()=>{ let yearNow = new Date().getFullYear(); if (yearNow>=2016){ yearNow = "(已经过期)" } return 'ttt'+yearNow; }}//返回对象,对象本身的{}会让编译器产生误会,
//消除这个误会的最好办法就是套1个()const t14 = { name:'小明', sex:'男', playGame:()=>({ id:15, xx:'9999', tt:()=>'123' })}class App extends Component { render() { //1.函数调用 //console.log( t1(123) ); //2.函数调用,把匿名函数赋值一个变量 //console.log( t2(1234) ); //3.把函数对象,直接打印出来 //console.log(t2); //4.定义普通的对象(不包含函数) //console.log(t3); //console.log(t3.name); //5.调用对象中的函数 //let kk = t4.playGame(); //console.log(kk); //... //console.log(t9.playGame('吞吞吐吐','kk')); //console.log( t9.playGame ); //console.log( t12.playGame() ); //console.log( t12.playGame ); //console.log( t13.playGame() ); //console.log( t13.playGame ); console.log( t14.playGame() ); console.log( t14.playGame ); console.log( t14.playGame().tt() ); return ( <div> aaa </div> ); }}export default App;
一、新的变量声明方式 let/const
1.跟var 明显呈现出块{ }作用域范围 2.建议let a = 123; 定义基本类型 3.建议const b = {name:'xxxx'}; 定义对象 4.const的对象不能赋值新的对象, 但是对象的属性的值可以修改 b.name = 'ssss';二、箭头函数的使用
1.符号 => 2.符号,左边:参数,右边:返回值/代码段 3.左边:() 0个或者多个参数时,必须有括号 只有1个参数,可以不要,也可以要 4.右边: a.如果是多行的代码,可以加{ }包含代码段 不过返回哪行需要一个return 关键字。 b.如果是单行,可以连return 都不用写(最常见) c.箭头函数中出现的this,一定是上一层 (经常使用,因为这样this就明确是谁) d.其实{ }是可以没有返回值 ()=>{ ... ...没有return } 等于public void xxx(){ ... }三、对象字面量
1.对象定义,有点类似于JSON const x = { kk:kk,uu:uu } 2.当key和value名字一样,可以省略一点 const x = { kk,uu} 3.方法也行 const x = { tt:function(){}
} 省略为: const x = { tt(){}
}四、class
1.参考java,所有类就2个东西(属性,方法) 2.属性: private String userName; get... set... ---> constructor(){ this.userName = ''; } 这个属性是可以赋值一个对象 constructor(){ this.car = {...,...}; } 3.方法 public String getName() --> getName(){ 如果涉及this,最好套1层fn }----------------------------
MVVM引入概念(vue.js)-->>1、m,v(纠缠) 2、信仰:禁止操作DOM
------------node.js(node本身没用) npm的前端生态圈(类似maven的生态圈) create-react-app -->>react-->>web 网页(spa) react-natvie-cli -->>react-natvie-->>android,ios,...组件的定义(3种方法:function,class,createClass)复合组件(父通过属性传递给子组件props,不能反向)样式(可以定义成JSON风格的对象,后缀是.js)class定义构造函数 属性定义 状态定义 事件this的绑定组件包含(属性、状态Model、事件、状态与UI的纠缠)this的不稳定性 (自定义的方法获取不到this,render中还有function里面的this是说不准)箭头函数各种语法点this.setState() 3种方式(state对象,带旧状态function,带旧状态和属性的function)事件如何传值,以及事件对象(死记2种语法)