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种语法）
