乐趣区

锵哥带你读好书系列之深入浅出React和Redux第一章React新的前端思维方式

前言:

       大家好久不见,自从升级当了奶爸,锵哥在江湖销声匿迹许久,如今又重出江湖啦。虽说有了娃,但是咱们也不能把广大粉丝落下是不是,这不,今天就有好消息啦!

       锵哥决定给大家带来一个全新精品板块:???? 锵哥带你读好书系列????

剧情简介:

粉丝路人甲:“锵哥这个是啥呢?”

锵哥:“这是我读完一本好书之后的精品总结,可以说是一本书中的每一章的精华”。

粉丝路人乙:“哇,这么棒,我们从哪本书开始呢”

锵哥:“那要从 2019 年的那只蝙蝠说起。。。啊,不不不,让我们就从《深入浅出 React 和 Redux》开始我们的旅程吧”

粉丝路人丙:“好嘞,这本书我们可以学到什么?”

锵哥:“可以让你们对最新前端框架 react 技术有个入门的基础,老少皆宜,一共十二章节,从今天开始连更十二天,精彩内容不容错过”

粉丝路人丙:“板凳已就位”

正文:

章节:

《深入浅出 React 和 Redux》(第一章:React 新的前端思维方式)

1.React 的首要思想是通过组件,来开发应用,所谓组件,简单来说,指的是能完成某个特定功能的独立的,可复用的代码。

2. 在使用 JSX 的代码文件中,即使代码中并没有直接使用 React,也一定要导入这个 React,这是因为 JSX 最终会被转译成依赖于 React 的表达式。

3. 所谓 JSX,是 JavaScript 的语法扩展(eXtension,让我们在 JavaScript 中可以编写像 HTML 一样的代码。

4.React 判断一个元素是 HTML 元素,还是 React 元素的原则就是看第一个字母是否大写。

5. 我们在 JSX 中看到一个组件使用了 onClick,但并没有产生直接使用 onclick(注意是 onclikc 不是 onClick)的 HTML,而是使用了事件委托(event delegation)的方法处理点击事件,无论有多少个 onClick 出现,其实最后都只有在 DOM 树上添加一个事件处理函数,挂在最顶层的 DOM 节点上。所有的点击事件都被这个事件处理函数捕获,然后根据具体组件分配给特定函数,使用事件委托的性能当然要比为每个 onClick 都挂载一个事件处理函数要高。

6.React 组件可以把 JavaScript,HTML, 和 CSS 的功能在一个文件中,实现真正的组件封装。

7. 这个 eject(弹射)命令做的事情,就是把潜藏在 react-script 中的一系列技术栈配置都“弹射”到应用的顶层,然后我们就可以研究这些配置细节了,而且更灵活的定制应用的配置。

8.eject 命令是不可逆的,就好像战斗机飞行员选择“弹射”出驾驶舱,等于是放弃了这架战斗机,是不可能再飞回驾驶舱的。所以当你执行 eject 之前,最好做一下备份。

9.React 的理念,归结为一个公式,UI=render(data)。这个公式表达的含义就:用户看的界面(UI)应该是一个函数(这在里叫 render)的执行结果,只接受(data)作为参数。这个函数式是一个纯函数,所谓纯函数,指的是没有任何副作用,输出完全依赖于输入的函数,两次函数调用如果输入相同,得到的结果也绝对相同。如此一来,最终的用户界面,在 render 函数确定的情况下完全取决于输入数据。

10. 所以 React 实践的也是“响应式编程(Reactive Programming)”的思想,这也就是 React 为什么叫做 React 的原因。

11.Web 前端开发关于性能优化有一个原则:尽量减少 DOM 操作。

结语:

读完这本书,你会对前端 react 有个概念,也算入个门,哈哈哈。还有望各位粉丝鼎力扩散哈。

预告:

本次将从今天开始连更十二天,精彩内容不容错过哦????

广告:

本人从事全栈工程师,目前主要工作能力涵盖的范围有:android,ios,h5,pcWeb,react,vue,node,java 服务端,微信服务号,微信小程序,支付宝生活号,支付宝小程序。

本公众号会不定期的将自己的研发感悟,以及心得笔记无私奉献给大家。还等啥,赶快上车吧,铁子们!!!????(还会有其他的福利哦!快来吧)

官方订阅号:锵哥的觉悟
微信号:DY_suixincq
二维码:

退出移动版