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

前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


VIP 进群:

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


今日群技术分享内容:

《React 新手入门课程》终章

A、认识 state

  1. 什么是内部状态 state
  2. state 的其他特性: 合并更新, 异步更新, 同步更新

B、使用事件

  1. 合成事件对象
  2. 事件中的 this 指向

时间:今天下午 16:00 整
形式:群内文字分享(老群友都懂滴~)

现在技术分享正式开始,
有请讲师 翟宏杰 登场~

—-

讲师登场:

按照之前的大纲. 我们把剩下的 state 和 事件使用讲讲

在 react 里面, 我们之前讲了, props, 可以让数据在组件之间传递

这次我们说说组件的 state

也就是 内部状态

一个组件在某些时候需要作出一些改变. 它不可能总是一成不变的.

比如一个计数器, 在某一次点击过后, 现实的数字就会改变; 再比如一个时钟程序, 它的的数字随着时间变动.

现在我们尝试做一个计数器看看.

这是我们的基础代码:

Counter 组件现在渲染之后是这个样子的:

现在我们改造一下 Counter 组件:

我们首先增加了构造函数 constructor():

构造函数接收的第一个参数就是我们之前学的 props;

我们先使用 super(props); 把组件的 props 传给父类的构造函数,

最关键的: 我们组件的实例上赋予了一个 state 变量. 并让它的值是一个对象.

这样, 组件便有了一个内部状态.

现在看看 如何使用状态

在类的任何地方, 我们都可以通过组件实例拿到这个状态并使用.

比如在 render() 方法里面:

我们访问了 this.state.count 的值, 并渲染了它.

现在我们想做一件事情, 点击按钮, count 的值就 +1.

我们需要先给按钮添加一个点击事件:

现在你点击按钮, 就会发现数字会出现变化.

这里有一些关键点:

添加事件我们会在后面会说, 现在简单说一下,

给元素一个 onClick 的属性, 就添加了点击事件, 事件接收一个回调函数.

要想改变 count 的值, 你不能直接修改 this.state, 而应该使用组件实例的 this.setState()

另外, 如果你的 state 属性很多, 比如:

如果你只想改变 c1 的值, 那么只需:

就可以了.

为什么要叫内部状态呢,

如果你渲染多个 Counter 的实例:

点击不同的按钮, 查看界面:

你会发现, 组件实例之间的状态互不影响. 这也是为什么我们把组件的 state 称为内部状态.

除此之外, state 有一些其他的特性

State 会合并更新

比如你的状态是这样的:

那么一次事件中, setState 会合并成一次更新

第二是, state 通常是异步更新

如果现在 c1 的值是 0, 然后你更新:

这个时候打印的结果是 0. 原因是调用 this.setState() 后, c1 的值不会立即发生更新.

在异步执行的函数里面, state 会同步更新

查看如下代码:

这个时候结果打印 2, 如果 this.setState() 在一个异步函数里面调用, 那么 state 会立即更新.

setState() 第一个参数可以传入一个对象, 这种使用方式我们已经知道.

第一个参数还可以传入一个函数:

preState 是之前的 state

props 是组件的 props

函数返回的就是要更新的组件状态.


现在抢答一个问题, 前三名答对红包奖励

接下来的抢答环节……(略)

抢答环节后,讲师开始解释,为什么答案是:B

标号一处, state 是异步更新的, 这里打印1, 没什么可说的
标号2, 3, 4在一个异步函数里面执行, state 是同步更新
依次打印 setState 后的值
就是 5, 2, 3

现在我们继续讲事件, 然后还有一个抢答

deal

现在我们依然使用之前计数器的代码:

这是我们刚刚讲 state 的时候遗留下来的代码

添加事件非常简单, 比如在 button 这里:

我们添加了一个点击事件.

在事件的回调函数里, react 提供了一个事件对象作为参数:

event 参数是 react 提供的一个事件对象, 我们可以从里面得到一些事件相关的信息和操作:

虽然不同的事件, (比如鼠标事件和键盘事件), 从事件对象里得到的信息有所不同, 但是以上信息是所有事件对象共有的.

上面我写了注释的几个属性可能经常用到.
比如, 如果你想阻止冒泡和默认行为, 可以这样:

在上述代码中:

事件中的 this 指向组件的实例, 所以拥有 setState 方法.

原因是, 我们给了事件一个行内的箭头函数, 这个时候, 箭头函数内的 this 指向了 render() 方法的 this, 而 render() 方法是组件实例调用的, 于是, 箭头函数的 this 是组件实例.

但大多时候, 我们是这样组织事件回调函数代码的:

我们给类添加了一个 buttonHandler() 方法, 并且把这个方法当做按钮点击事件的回调函数.

但是一点击就会报错, 原因是 事件处理函数的 this 变成了 undefined, 没有 state 属性, 更没有 setState() 接口.

你有 3 种办法来修正这个问题

在构造函数初始绑定 this

属性初始器语法:

也就是在给类添加方法的时候, 这样去添加.

但是要注意一点, 这是一个未被标准化的语法, 如果你是自己搭建运行环境, 你需要使用 babel 的插件 babel-plugin-transform-class-properties 来进行转化.

如果是 create-react-app 创建的项目 , 这个语法是默认支持的

第三种是 行内绑定 this

行内绑定需要留意性能问题, 因为使用 bind 总会生成一个新函数. Virtual DOM 在进行比较的时候, 会认为两个函数不一样, 从而进行了不必要的 DOM 更新.

ok, 这就是这个阶段大家要了解事件的一些东西, 之后可以直接使用啦

可以到这里查看 react 支持的所有事件: https://reactjs.org/docs/events.html#supported-events


现在抢答一个问题, 前三名答对红包奖励

答案是 C,以下是解释:

this.setState 是一级合并,

this.setState({
c2: {a: 40}
})

会把整个 c2 替换掉


问:什么样的不会都替换呢
答:没有这样的

问:setState 是什么?
答:通知react更新state中的数据

问:之前说的3种this修改指向的方式,哪种更好?
答:下面这样的语法,优先 第二种, 然后第一种

—-

至此,《React 新手入门课程》至今天算是终章了。
接下来的分享,我们会略微调整内容,
请大家持续关注群内的通知哟~

感谢大家参与今天的分享!
再会~


精彩课程推荐:

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

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

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

远程《妙味 React+redux 高阶实战项目班》
https://www.miaov.com/index.php/news/newsDetail/nid/338

超五星级优质远程课服务:

1、系统完善的课程体系——内容有保障;
2、技术精湛的资深讲师授课——品质有保障;
3、远程视频直播 + 录播双管齐下——复习有保障;
4、全职老师全天 14 小时轮换在线答疑——服务有保障;
5、作业批改与练习讲解服务——答疑解惑有保障;
6、阶段式测评服务——学习效果有保障;
7、结课项目由妙味讲师倾心指导——毕业作品有保障;
8、简历指导 + 面试过程专人跟进——学完就业有保障;

报名咨询:

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

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