【WEB 前端抱团学习群】0330 期技术分享:React

前言

2018 年伊始,我们准备实现一个小目标:

打造一个技术交流氛围浓郁的微信群。
让大家在这个群里轻松交流技术、没有扯淡,
拒绝吐槽,只关注技术学习本身。

因此,【WEB 前端抱团学习群】 就此诞生。

我们为这个群倾注极大精心与资源,期待给这个群提供诸多福利,例如:

1、聊天扯淡挺热闹,提个技术问题瞬间死寂?

——放心,在这个群里,拒绝扯淡,只谈学习。技术提问,必有回应~

2、独自一人无目的学习、没有学习目标?

——管理员会根据每人的基础做合理的学习计划、定期监督提醒~

3、自己学得怎么样?知识掌握的好不好?稀里糊涂的?

——群内提供阶段性技能水平测试,个人水平一目了然~

4、群里有没有技术大牛可以讨论的?

——每周邀请嘉宾(技术牛人、或妙味全职讲师)进行技术主题分享

5、做了练习无人点评、也不知道哪里可以优化或改进?

——专属的练习提交地址,会有资深讲师进行专业点评

6、都说进群抢红包,这群里会经常发红包么?

——围绕学习的奖励红包层出不穷,甚至会有奖学金提供唷~

7、还有更多可能的探索,我们会动态调整、不断尝试……

——也欢迎群友为我们提供各种建议,我们会认真倾听、努力改进~


VIP 进群:

“爱学习的人总是少数,但是大多数学习者都在这里!”
  • 扫码关注公众号,发送”VIP进群”关键字,入群共同学习,审核通过后入群


以下,是微信抱团群内举行的一次文字技术分享,全程内容如下:


下午 15:48 妙味-小妖 发布群通知

今天第二场技术分享通知

主题:《React 新手入门课程》系列之:ES6语法基础
时间:16:00~17:00
嘉宾:妙味讲师翟宏杰
方式:微信群内-文字直播
说明:

  • 很多同学想学前端框架 react
  • 但感觉自己基础不够
  • 因此我们为大家定制了一套 React 新手入门课程
  • 只要你具备:
    1、JS 基础
    2、DOM\EVENT 基础
    3、面向对象基础
  • 你就能跟着我们的分享
  • 逐渐开始走入 React 开发的世界…

对了,值得一提的是,这个分享,是个连载哦~所以,我发给大家一些关于本次分享的详细内容

从今天起,我们会按以下内容进行群分享,也就意味着,这不是一次单独的技术分享,而是一个详尽的学习计划。想学 react 的同学们,跟着来就好哦~[愉快]


《React 新手入门课程》大纲

ES6 部分
  1. let const 变量声明
  2. 函数扩展: 箭头函数
    1. 匿名的
    2. 默认参数
    3. 语法
    4. 一个参数, 不写括号
    5. 箭头后面可以写函数体, 也可以直接写返回值,
    6. this 指向
  3. 模板字符串:
  4. 变量解构赋值
  5. spread 与 rest
  6. class 相关
    1. 继承
    2. 成员方法的 this 指向
常用的数组方法部分
  1. map()
  2. filter()
  3. every()
  4. some()
  5. reduce()
模块化的语法部分
  1. ES6 的模块化语法
  2. commonJS 的模块化语法
react 零基础入门
  1. 准备 create-react-app 脚手架工具
  2. 初次运行一个 Hellow World
  3. 认识 JSX
  4. 认识组件
  5. 认识 props
  6. 认识 state
  7. 使用事件

消息发布后,大家的反馈:

今天的内容,是 react 的前置知识:ES6

在正式分享前,我们先说一下简单的分享规则

讲师正在分享过程中,
请大家不要发与本次技术分享无关的话题。
如有其他问题可以私信 我 或者 妙味大宝
如果提醒了还随意打乱分享的小伙伴
只能遗憾的清出群了
敬请谅解~

另外,讲师们平时要上课
业余时间要做各种问题解答和技术分享,
因此大家请不要私加讲师好友,
有问题可以汇总到我们这里
我们会及时给大家举行技术分享活动
敬请理解哈~

我们本次分享方式是:
【群内文字技术分享】

分享过后
我们会把分享过程整理成文稿
并第一时间发布到群中
方便错过了的同学事后观看

按照惯例,我需要发个红包签到,看有多少朋友在线~

OK,闲话不多说,
接下来请出妙味全职讲师翟宏杰,
给大家带来今天的精彩分享内容~


妙味讲师 翟宏杰 上场:

大家好, 我是翟宏杰
今天是我们react基础教程的第一课
首先是弥补一下大家的基础, 我们先来看下ES6部分的东西
我们今天会说四个ES6相关的一些语法

首先说一下变量声明
ES6 新增了新的变量声明命令: let 和 const.

首先是 Let
声明变量的语法我们很熟悉:
var a = 5;

现在 你也可以使用 let 声明
let b = 6;

不过使用 let 声明变量后, 有了一些新的特性, 你要特别注意以下两点:

  1. 不能重复声明
    比如:

2 是有块级作用域
可以把一个 {} 当成一个块, 比如, {}, 函数, if, for 的{}…
看看下面代码:

在这里问个问题, 说说打印的结果, 前三名发红包

结果,前 3 名 回答为 10 的小伙伴获得红包奖励:

公布正确答案:都是 10

解释如下:

现在如果是用 let 声明, 会变成另外一种情况

会依次打印 0-9
当然, 首先会抛出一个错误: i is not defined
因为 i 的作用域被限制在一个块内了
不再像之前 var 的时候, 变成了全局的
对于 let, 我们只要注意着两个特性就可以了


接着是 const
const 也拥有上面 let 的特性
但 const 用来声明一个常量, 它期望对它是只读的:

  1. const NAME = "Bob";

首先: 你必须对它初始化

但是声明对象时需要注意,比如如下代码:

如果你打印: list

会发现 list 的属性值是会发生改变的
所以大多时候, 要注意对他只是进行读取就好了
对于 let 和 const, 我们只有注意这些就行


现在我们来看看第二个语法: 模板字符串

原来使用 单引号 或者 双引号 来写字符串. 现在有了一个新的写字符串的语法, 就是使用 ESC 键下面的那个反引号:

使用这个符号来定义一个字符串字面量, 就得到一个普普通通的字符串而已,和原来没有什么区别

但是, 你可以在它里面插入表达式, 它为我们提供了一种更优雅拼接字符串的方式, 比如:

在里面写一个 ${} , 接着在花括号里面写表达式. 结果就会被替换成表达式的结果

既然是表达式, 所以在里面写什么就很灵活了

比如:

对于模板字符串, 只要掌握这一点,在里面写表达式就可以了


ok, 我们要说的下一个语法就是:变量的解构赋值

现在如果有一个对象, 你可以直接提取里面的属性值:

想使用 p1, 或 p2 的值, 可以这样:
用一个花括号包住要提取的属性名

这个时候作用域里面就会有两个变量
当然, 你不必全部属性都取完, 其中一部分就可以了
可以看到, 你可以通过解构快速得到对象属性的一些值.

当然, 你也可以使用新的变量名:
let {p1: nP1, p2: nP2} = names;

p1 是要匹配的属性名, nP1 是要定义的变量名
然后打印一下

本质上是 p1 去匹配对象属性, 然后赋给变量 p1. 那么 p2 也是同理
其实之前的写法是一直简写的形式:

let {p1, p2} = names;

相当于

let {p1:p1, p2:p2} = names;

如果某一个解构出来的值是一个对象, 你可以继续解构下去:

打印就会发现 a, b 的值直接拿到了
可以看到, 对于嵌套解构的情况, 也是允许的. 语法也并不复杂.

你还可以在解构的时候给一个默认值:

打印后会发现, 如果没有某些属性, 那么就会使用默认值

最后, 数组也是可以解构的:

ok, 这个就是变量的解构赋值部分, 必须要掌握的内容
这些内容占据着我们大多数开发场景使用的情况


问答时间:


问答过后,继续下一个话题:ES6 在函数方面的扩展

ES6 在函数方面有了很多的改动, 比如添加了一种新的声明函数的语法: 箭头函数 ; 在传递参数方面也给了更多方便的东西.

我们来一起看看我们需要关注的一些地方, 这些是日常开发过程中比较常用的.

首先是: 默认参数值

现在, 如果函数在运行的时候某个参数没有传递值, 你可以在定义函数的时候给一个默认值:

如果给 a传递的值是 undefined, 那么 a 的值是5
b 也是同理

如果我们现在运行一下

fn(); // 5+3 = 8

fn(9,9); // 9+9 = 18

ok,现在来一个问题,前三的 红包奖励,大家准备好!抢答时间!

讲师回复大家的答案:

看看我之前的一句话很重要:


函数方面, 除了默认参数, 接下来这个就使用的非常多了

箭头函数!

先来看看它的语法:

这样你就可到了一个箭头函数. ( ) 里面写参数, { } 里面写函数体.
它是匿名的, 所以如果不是在行内使用, 而是在别的地方也用到, 那你需要一个变量来接收它:

当然, 某些情况它还有一些更简洁的写法, 注意下面代码的注释:

这样就声明了一个函数: 箭头函数
没有 function, 写法简单
ok, 继续, 关于返回值还有第二个特性
如果想返回对象, 需要加括号, 否则对象会被当成方法体

直接返回对象需要() 包起

这是关于它的语法, 大家需要掌握的, 掌握着写语法就可以在大多数开发场景中使用了,还有注意的是它的 this 指向,箭头函数的 this 永远会指向函数定义时的上下文环境:

当我们运行 o.func() 后,我们知道 o.func 这个函数的 this 执行 o
因为是 o 调用了 func

查看打印的就过我们会知道
logEvo 里的 this 也是指向 o,
和它所处在的 func 函数的 this 执行一致

如果是在 function 去声明的情况
就会变成另一个样子

除了 this 指向函数定义时所在的上下文环境, 你还要注意以下一些特性:
1- 不可以 new 它, 它不能被当做构造函数
2- 没有 arguments 对象

ok, 以上, 就是大家需要特别关注箭头函数的地方
一个是它的语法要掌握, 因为经常写
一个是它函数体内的 this 指向

可以去 mdn 看看:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

ok, 以上这些, 就是我们今天分享的内容了


提问环节:


作业环节:

讲师留作业环节:

那我想做个安排,不知道有没有同学愿意试试。
要不要给大家留个简单的作业,
如果提前做完的,有红包奖励,
有兴趣的话,就写 1
没时间做,就写 0

看来非常多的朋友来试试练习,因此,讲师开始布置练习:

要求
1、用原生的方式实现
2、用 ES6 语法
作业一示意:https://miaov.com/index.php/Course/homeworkDetail/hid/173.html
作业二示意:https://miaov.com/index.php/Course/homeworkDetail/hid/29.html

作业提交地址:https://study.miaov.com/bbs/60175

光学不练,还是不行滴,期待大家提交作业唷~[调皮]

今天分享到此为止,感谢大家参与~


精彩课程推荐:

足不出户,享受优质远程课程!

妙味 2018 年最新版 “从零基础到全栈” 全套 WEB 前端开发课程,现已开启远程班招生~

  • 资深讲师带领大家,只学精华内容、拒绝无用知识,配备走心远程服务:“直播+视频回放、全天超过 14 小时在线答疑、作业批改与练习讲解、丰富奖学金、全程面试远程指导服务…”
  • 凡你所要,必得满足!
  • 现在咨询,可享受更多课程优惠~

远程《零基础前端开发 “PC 端+移动端+响应式开发” 课程》
https://miaov.com/index.php/news/newsDetail/nid/322

远程《JS 前端资深工程师就业精英班》
https://miaov.com/index.php/news/newsDetail/nid/316

报名咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690
• 微信:miaov-class

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部