作者:empty 页数:235 出版社:empty |
React.js是一个帮助你构建页面UI的库。如果你熟悉MVC概念的话, 那么React的组件就相当于MVC里面的View, 如果你不熟悉也没关系, 你可以简单地理解为, React.js将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而React.js也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。React, js不是一个框架, 它只是一个库。它只提供UI(view) 层面的解决方案。在实际的项目当中, 它并不能解决我们所有的问题, 需要结合其它的库, 例如Redux、React-router等来协助提供完整的解决方法。因为第三方评论工具有问题, 对本章节有任何疑问的朋友可以移步到React.js小书的论坛发帖, 我会回答大家的疑问。
很多课程一上来就给大家如何配置环境、怎么写React.js组件。但是本课程还是希望大家对问题的根源有一个更加深入的了解,其实很多的库、框架都是解决类似的问题。只有我们对这些库、框架解决的问题有深入的了解和思考以后,我们才能得心应手地使用它们,并且有新的框架出来也不会太过迷茫这两节课我们来探讨一下是什么样的问题导致了我们需要前端页面进行组件化,前端页面的组件化需要解决什么样的问题。后续课程我们再来看看React.js是怎么解决这些问题的。所以这几节所讲的内容将和React.js的内容没有太大的关系, 但是如果你能顺利了解这几节的内容,那么后面那些对新手来说很复杂的概念对你来说就是非常自然的事一个简单的点赞功能我们会从一个简单的点赞功能讲起。
功能和实现都很简单,按钮已经可以提供点赞和取消点赞的功能。这时候你的同事跑过来了,说他很喜欢你的按钮,他也想用你写的这个点赞功能。这时候问题就来了,你就会发现这种实现方式很致命:你的同事要把整个button和里面的结构复制过去, 还有整段JavaScript代码也要复制过去。这样的实现方式没有任何可复用性。
这里非常暴力地使用了innerHTML, 把两个按钮粗鲁地插入了wrapper当中。虽然你可能会对这种实现方式非常不满意,但我们还是勉强了实现了结构的复用。我们后面再来优化它。实现简单的组件化你一定会发现,现在的按钮是死的,你点击它它根本不会有什么反应。因为根本没有往上面添加事件。但是问题来了,Like Button类里面是虽然说有一个button, 但是这玩意根本就是在字符串里面的。你怎么能往一个字符串里面添加事件呢?DOM事件的API只有DOM结构才能用。我们需要DOM结构, 准确地来说:我们需要这个点赞功能的HTML字符串表示的DOM结构。假设我们现在有一个函数create DoM From String, 你往这个函数传入HTML字符串, 但是它会把相应的DOM元素返回给你。这个问题就可以解决了。
这里的代码稍微长了一些,但是还是很好理解。只不过是在给个构造函数会给每一个Like Button的实例添加一个对象按钮自己是否点赞的状态。还改写了原来的事件绑定函数:原来只打印时候会调用change Like Text方法,这个方法会根据本。
目录
致谢
Lesson 0关于作者
Lesson 1Reactjs简介
Lesson 2前端组件化(一) :从一个简单的例子讲起
Lesson 3前端组件化(二) :优化DOM操作
Lesson 4前端组件化(三) :抽象出公共组件类
Lesson 5React.js基本环境安装
Lesson 6使用JSX描述UI信息
Lesson 7组件的render方法
Lesson 8组件的组合、嵌套和组件树
Lesson 9事件监昕
Lesson 10组件的state和set State
Lesson 11配置组件的props
Lesson 12statevsprops
Lesson 13渲染列表数据
Lesson 14实战分析:评论功能(一
Lesson 15实战分析:评论功能(二
Lesson 16实战分析:评论功能(三
Les5on 17前端应用状态管理——状态提升
Lesson 18挂载阶段的组件生命周期(一)
Lesson 19挂载阶段的组件生命周期(二
Lesson 20更新阶段的组件生命周期
Lesson 21ref和React.js中的DOM操作
Lesson 22props.children和容器类组件
Lesson 23 dangerously Set HTML和style属性
Lesson 24Prop Types和组件参数验证
Lesson 25实战分析:评论功能(四)
Lesson 26实战分析:评论功能(五
Lesson 27实战分析:评论功能(六
Lesson 28高阶组件(Higher-Order Components)
Lesson 29Reac.js的context
Lesson 30动手实现Redux(一) :优雅地修改共享状态
Lesson 31动手实现Redux(二) :抽离store和监控数据变化
Lesson 32动手实现Redux(三) :纯函数(Pure Function) 简介
Lesson 33动手实现Redux(四) :共享结构的对象提高性能
Lesson 34动手实现Redux(五) :不要问为什么的reducer
Lesson 35动手实现Redux(六) :Redux总结
Lesson 36动手实现React-redux(一) :初始化工程
Lesson 37动手实现React redux(二) :结合context和store
Lesson 38动手实现React-redux(三) :conne et和map State To Props
Lesson 39动手实现React-redux(四) :map Dispatch To Props
Lesson 40动手实现React-redux(五) :Provider
Lesson 41动手实现React-redux(六) :Reac-redux总结
Lesson 42使用真正的Redux和Reac-redux
Lesson 43 Smart组件vs Dumb组件
Lesson 44实战分析:评论功能(七)
Lesson 45实战分析:评论功能(八)
Lesson 46实战分析:评论功能(九)