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

前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


VIP 进群:

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


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

经过前两次 React 前置基础知识,今天讲师将为大家带来以下内容:

  • React 的初次渲染
  • 认识 jsx
  • 认识组件
  • 认识 props

时间:16:00
嘉宾:妙味讲师翟宏杰
方式:微信群内-文字直播


以下是讲师 翟宏杰 的分享内容:

我们之前讲过的知识点大家还记得吗:
· ES6 的基本使用
· 数组的方法
· 模块化的语法

不记得的同学,我们已经把资料整理好了,大家可以去看之前的记录:
https://www.miaov.com/index.php/news/newsDetail/nid/328

我们上次使用 create-react-app 生成了一个初始的项目

然后 就可以使用 npm start 开启我们的项目了
现在我们在这个基础上继续

在生成的文件里
我们先来看看 index.js 的代码
你会看到类似的这样代码 :\

你可能对现在这一堆代码有疑惑, 我们现在可以精简一下, 变成这样:

现在你会看到, 浏览器上输出的内容变成了这样:

我们先看前两行代码, 引入了 React 和 ReactDOM 这两个 API.

重要的部分从第 5 行开始, 我们调用了 ReactDOM.render 方法, 并传入了两个参数.

第一个参数类似 html 标签, 第二个参数是我们获取到的一个 DOM 节点.

它的意思是, 把第一个参数的结构, 插入到第二个参数获取到的节点里面. 所以就变成了我们在页面看到的样子.

你可以打开 public 文件夹, 看到 index.html 这个文件, 里面一个 id 是 root 的 div:

这就是我们获取到的节点.

而如果你打开浏览器, 通过调试器查看页面结构的时候, 你会发现我们把 第一个参数写的结构, 插入到了我们获取到的 div 里面:

我们在第一个参数写的类似 html 的东西, 叫做 JSX, 我们使用这种语法可以快速描述出一份结构.

一件事情是, 这并不是 js 语法, 浏览器运行它就会出错, 所以我们需要把它转换成 js 代码才能在浏览器运行.

而这个转换的工作, 在我们刚开始使用 npm start 启动项目的时候, 我们项目的开发环境配置已经帮我们在背后默默做了这件事情. (我们现在暂时放下环境配置方面的东西, 先不用去担心它).

再说第二个参数

第二个参数是一个 dom 节点, 我们把它叫做容器:

所以 ReactDOM.render() 方法总结起来一句话就概括:

把你写的 jsx 结构插入到容器里面, 然后渲染到页面.

大家可以试试在第一个参数里面像写 html 结构一样写自己想要的东西, 看看会发生什么事情.

可以去这个网址在线调试: https://codesandbox.io/s/2zp1623660

这个网址先留着课后去看, 我们来看看下一节, 看看 jsx 是什么

JSX 是一种语法, 能够快速让你描述出一份 DOM 的结构.

它跟 html 很像, 但不是. 我们有过使用 html 的经历, 所以写起 JSX 来也很容易.

不过, JSX 能做的更多.

看到我们的 index.js

在 JSX 里可以使用表达式

在 jsx 里使用花括号 {} , 在 {} 里可以写 JavaScript 表达式, 比如:

看看结果, {} 里的东西都变成了表达式的返回值.

你看到这行代码:

可以看见, 甚至连 JSX 本身也可以被当做表达式.

你还可以发现别的事情, JSX 可以相互嵌套, 可以写属性.

和 html 真的很像.

注意: 如果表达式里面的值是以下之一, 在页面不会渲染出来: null, undefined, boolean

不过你需要注意以下几点:

  1. 确保每一段独立的 JSX 都有一个最外层的节点包含:
    比如: 我们移除最外层的 div,

你会发现这样就会抛出错误:

翻译过来是: 相邻的 JSX 元素 必须被一个闭合的标签包含.

第二是: 属性需要变成驼峰式, 比如:

第三是: 关键字的属性需要换成另外的样子, 比如:

现在我们知道 JSX 是什么了.

到这里大家有什么疑问么?


问:你还可以发现别的事情, JSX 可以相互嵌套, 可以写属性——这句话写属性是什么意思,老师?
答:class 就是 一个 dom 的属性,但是 class 在 js 中是一个关键字,需要变成 className,比如:<div className="box"></div>,你不能写 <div class="box"></div>

问:那 htmlfor 是写在 {} 才这样吗
答:<label htmlFor="xxx">,类似这样,不能 <label for="..."/>


ok, 继续看下一节:组件

一个页面是非常复杂的, 一个 web app, 就更加复杂了.

一个再庞大的页面, 你都可以把它拆分成一个个组件, 最后把这些组件进行组合, 就可以得到一个页面了.

比如说你可以把你的导航栏封装成一个组件等等, 去拼凑

我们看看在 react 里面怎么得到一个组件

声明组件有两种方式

使用类声明

如下就是一个合法的类式组件:

你只需要声明一个类, 这个类需要继承 React.Component.

接着, 这个类至少需要实现一个 render() 方法, render 方法里面返回一份 JSX.

使用函数也可以声明 一个组件,如下就是一个合法的函数式组件:

写一个函数, 里面 return JSX ;
以上两种声明的方式都是可行的.
我们再来看看怎么使用这些声明的组件

A, B 两个组件, 只要把组件名当成标签就可以在 JSX 中任意组合了.

但是要注意两点:
自定义组件标签必须大写开头, 不然会被当成普通的内置 DOM 组件
当使用 时, A 变量必须在作用域内.

如果能举一反三, 那下面代码也是可行的, 比如:

现在, B 组件嵌套了一个 A 组件. 这时, B 是 A 的父组件, A 是 B 的子组件了.

组织代码的时候, 你可以把组件存放在一个单独的文件里, 比如, 新建两个文件, a.js, b.js:

这样, 项目维护的时候, 就容易多了


下一节, 我们再看看在组件元素里写属性

组件之间可以传递一些数据, 这些传递的数据叫做 Props. 看看如下代码:

现在我们分析一下这段代码.

函数组件 <Ment/>, 类式组件 <Aoi/>.

在标签上你可以写上一些属性(prop), 接下来, 在组件内部, 你就可以访问这些传递过来的 props. 访问的方式就像上面代码

函数组件里面, props 参数是一个对象, 可以得到组件实例传过来的数据

类似组件通过访问 this.props 来访问

在函数组件上:

我们通过函数的第一个参数可以得到一个 props 的对象.
接下来, 我们就可以通过 props 对象访问到 标签传递过来的 prop 了.
而如何使用这些 props , 就由你决定了.

在类式组件上:

在 render() 方法里, 你需要通过组件的实例: this 来访问 props 对象.

props 接受任何的数据类型:

  • 数字
  • 字符串
  • 函数
  • 组件变量
  • JSX
  • bool

需要注意
你要保证你对 props 只能是只读不写.
如果你做如下操作:

这样的操作是不允许的. 如果运行了这样的代码, 就会给你抛出错误.


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


问:这个是固定的语法吗
答:嗯固定的,Aoi 是类名

问:react引用图片只能是网络地址?
答:也可以是本地的,本地的使用 require(./xx.png) 这样来得到图片

追问:本地的是不是要先引用进来
答复:是的, 先引入进来,因为需要 webpack 处理路径, 不然你的路径会加载不到

问:每一张图片都要requier进来吗???
答:本地的要 require, 网络的就直接写图片地址

问:react setState的机制是什么?为什么是异步的?
答:setState 更新 state, 使用新的 state 从新构建 virtualDOM, 接着 reconciliation, 然后更新到页面。
异步是因为可能很多组件需要在一次事件循环中更新, 可以把很多次 setState 合并起来一次更新, 同步更新的话性能损害大

追问:这是过程嘛
回复:fiber 的 setState 内部实现太复杂啦, 现在还涉及到渲染优先分时这些

问:组件在一个页面直接function就行了?
答:如果没有组件状态的话, function 就可以了,类和函数都可以用来声明组件, 一直以来都是可以的

问:老师 如果面试题问react-router的实现原理改怎么回答
答:react-router 的实现本质上是 借助了 context , 因为也是组件, 实现起来无非是 跳转的时候改变下状态, 然后渲染。
你需要先看看 context API 这部分的知识, 就是跨组件传递数据的. 不仅是 react router, react-redux 都是使用的这个原理

问:如果没有组件状态的话, function 就可以了,,,组件状态是什么啊?
答:this.state


OK,今天的提问应该就到这里了。
感谢讲师的精彩分享!

今天的分享我稍后会整理出来,尽快发到群里

同时感谢大家参与哈~我们下次见!


精彩课程推荐:

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

远程《零基础前端开发 “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客服
微信客服
返回顶部