锵哥带你读好书系列之《深入浅出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
二维码：