![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 74
筱葭
这个作者很懒,什么都没留下…
展开
-
浅谈React实现输入框
var data = { label: "Name", placeholder: "Please enter your name!", clearImg: "clear.png", regExp: /^\w{6,20}$/};var InputBox = React.createClass({ getInitialState: function() { return {input原创 2017-04-25 17:20:09 · 6090 阅读 · 0 评论 -
浅谈React编程思想
React是Facebook推出的面向视图层开发的一个框架,用于解决大型应用,包括如何很好地管理DOM结构,是构建大型,快速Web app的首选方式。1、第一步:把UI拆分为一个组件的层级一个独立的组件的标准:单一功能原则——一个组件在理想情况下只做一件事情。如果它要做的事情不止一件,它就应该被分解为更小的组件。 2、第二步:用React创建一个静态版本要构建渲原创 2017-04-24 21:15:31 · 3340 阅读 · 0 评论 -
浅谈React的diff算法和key属性
React快速的致胜法宝是虚拟DOM及其高效的diff算法。可以无需担心性能问题而“随时”刷新整个页面,虚拟DOM可以确保只对界面上真正变化的部分进行实际的DOM操作。虽然在实际开发中,基本无需关心虚拟DOM是如何运作的,但理解其运行机制不仅能帮助更好地理解React组件的生命周期,还会对进一步优化React程序也会有很大帮助。 1、Diff算法Web界面由DOM树构成,页面某部分原创 2017-05-08 16:52:21 · 5856 阅读 · 0 评论 -
浅谈React的createFactory()方法
1、作用:创建React组件实例。2、实现:只需创建一个带type参数的createElement的绑定函数即可。React.createFactory = function(type) { var factory = React.createElement.bind(null, type); return factory;};关于React.create原创 2017-04-26 11:30:00 · 2777 阅读 · 0 评论 -
浅谈React的props和state
在React里有两种数据模型:props和state。1、state1) state的作用:state是React中组件的一个对象,React把用户界面当作状态机,用户界面会随着state变化而变化,根据状态变化渲染用户界面,可以轻松让用户界面与数据保持一致。也即是说,更新组件的state会导致重新渲染用户界面,而不需要操作DOM。2) state的原理:常用的通知Reac原创 2017-04-25 16:08:36 · 3990 阅读 · 1 评论 -
浅谈React Router入门
1、webpack的codesplittingwebpack可以通过require.ensure接口实现按需加载。require.ensure保证了模块的异步调用,当callback回调中调用了一个模块时,可以实现按需加载。require.ensure([], function() { callback(null, require('…')); //...}); 2原创 2017-05-23 18:58:02 · 1664 阅读 · 0 评论 -
浅谈React Router动态路由
1、Router组件1) history属性用于监听浏览器地址栏的变化,并将URL解析成一个地址对象,供 React Router 匹配。history属性可以设置三种值:A. browserHistory浏览器的路由就不再通过Hash完成了,而显示正常的路径,背后调用的是浏览器的History API。History API的参考链接:https://d原创 2017-05-23 19:03:01 · 9077 阅读 · 1 评论 -
浅谈React的类型检测——PropTypes
随着应用的日益变大,保证组件的正确使用显得日益重要,为此引入React.propTypes:React.PropTypes 提供很多验证器来验证传入数据的有效性,当向props传入无效数据时,JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证 propTypes。1、声明props为指定的JS基本类型,可传可不传。1) React.PropTypes.array原创 2017-04-27 11:47:04 · 16127 阅读 · 0 评论 -
浅谈React mixins
组件是React复用代码的最佳方式,但有时一些不同的组件间也需要共用一些功能,被称为 跨切面关注点,React使用 mixins 来解决这类问题。一个通用的场景是:一个组件需要定期更新,React提供生命周期方法来告知组件创建或销毁的时间。eg:mixins实现使用 setInterval() 并保证在组件销毁时清理定时器var SetIntervalMixin = { compon原创 2017-04-27 16:32:41 · 3170 阅读 · 0 评论 -
浅谈ES6 class实现React Class
使用ES6 class可以以一个JavaScript类来定义React Class。 1、使用React.createClass:var Counter = React.createClass({ propTypes: { initial: React.PropTypes.number }, getDefaultProps: function() { return原创 2017-04-27 17:00:17 · 4001 阅读 · 1 评论 -
浅谈React的JSX语法(二)
1、JSX的新语法——展开属性如果事先知道组件需要的全部props(属性),可以列出;但如果事先不知道要设置哪些 props,最好不要设置它,原因有两个:① React不能检查属性类型,即使属性类型有错误也不能得到清晰的错误提示。② props应该不可变的,修改props可能会导致预料之外的结果。可以使用 JSX 的新特性——展开属性:...操作符是增强的操作符,已经被 ES6原创 2017-04-26 16:28:35 · 1013 阅读 · 0 评论 -
浅谈React的JSX语法(一)
最好的解决方案是:通过JavaScript直接生成模板,然后去构建用户界面。为了使其变得更简单,有一个非常简单、可选的类似HTML的语法 ,通过函数调用即可生成模板的编译器,称为JSX。1、为什么用JSX?不需要为了React使用JSX,可以直接使用JavaScript,但建议使用 JSX 是因为它能精确,也是常用的定义包含属性的树状结构的语法。 2、没有 JSX 的 Reac原创 2017-04-26 14:59:42 · 653 阅读 · 0 评论 -
浅谈慕课网React入门课程笔记(一)
React——颠覆式前端UI开发框架传统方式将来自于服务器或用户输入的交互数据动态反映到复杂界面上时,代码量变得越来越大,越来越难以维护。基于此,先是谷歌推出自己的前端开发框架Angular,将对DOM的直接操作释放,通过relative来实现复杂的DOM修改。但Angular存在一些问题,如:其整体作为一个MVVM框架显得过重,不适用于对性能要求比较高的站点,如移动端的Web站点;其UI原创 2017-05-12 19:22:51 · 971 阅读 · 0 评论 -
浅谈在React中使用Redux数据流(一)
Ctrl+G:跳转到第几行Ctrl+Tab:切换窗口Command+W:关闭当前打开文件Command+Q:关闭sublimeCommand+D:选择相同的单词,重复可选择下一个相同的单词Command+L:选择行,重复可选择下一行Command+X:删除当前行Command+F:查找Command+Shirt+F:查找并替换Command+R:查找函数名C原创 2017-05-19 19:08:09 · 5694 阅读 · 0 评论 -
浅谈在React中使用Redux数据流(二)
1、react-redux安装安装命令:npm install react-redux redux安装两个包:redux自身是一个独立的工作流;react-redux是redux的react绑定,也就是说,利用react来实现了redux。 2、官网英文:http://redux.js.org/中文:http://cn.redux.js.org/ 3、rea原创 2017-05-20 09:49:44 · 912 阅读 · 0 评论 -
浅谈React组件的生命周期
组件的生命周期有3个主要部分:1) 挂载:组件被注入DOM。2) 更新:组件被重新渲染来决定DOM是否应被更新。3) 卸载:组件从DOM中被移除。React提供生命周期方法,以便指定钩挂到这个过程上。提供will 方法,在某事件发生前被调用;提供did方法,在某事件发生后被调用。 1、挂载1) getDefaultProps():对于每个组件类来说,该方法只会调用一原创 2017-05-04 17:37:23 · 746 阅读 · 0 评论 -
浅谈React构建项目的思考过程
1、第一步:把UI拆分为一个组件的层级一个独立的组件的标准:单一功能原则——一个组件在理想情况下只做一件事情。如果它要做的事情不止一件,它就应该被分解为更小的组件。组件拆分至关重要,因为拆分粒度过大不利于组件化的重用,粒度过小则会显得冗余过多,且复杂度过高。 2、第二步:用React创建一个静态版本要构建渲染数据模型的可重用组件库,首先构建一个静态版本的组件,静态版本的组件利用原创 2017-05-06 14:18:30 · 465 阅读 · 0 评论 -
浅谈React实现评论框(一)
- CommentBox - CommentList - Comment - CommentForm 1、JSX语法:var CommentBox = React.createClass({ render: function() { return ( CommentBox ); }});ReactDOM.render( ,原创 2017-04-23 15:27:15 · 1149 阅读 · 0 评论 -
浅谈React实现过滤器
filter.html: filter.jsx:var grades = [ {team: "Team1", name: "Alice", grade: 80}, {team: "Team1", name: "Bruce", grade: 90}, {team: "Team1", name: "Cindy", grade:原创 2017-04-25 21:39:32 · 19659 阅读 · 0 评论 -
浅谈React实现评论框(三)
http://blog.csdn.net/zhouziyu2011/article/details/70504651实现了不考虑服务器,直接将 JSON 数据写在代码中的模拟从服务器获取数据。本文继续进行两方面的改进:1、给组件引进可变的 state2、从JSON文件从获取数据 1、给组件引进可变的 state之前的代码中每个组件都是基于自己的props渲染自己,但prop原创 2017-04-24 14:08:46 · 1783 阅读 · 0 评论 -
浅谈React的props验证、默认值、传递
1、为什么使用 React?eact 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。1)简单仅仅只要表达出应用程序在任一个时间点应该呈现的样子,当底层的数据变了,React会自动处理所有用户界面的更新。2)声明式数据变化后,与点击“刷新”按钮类似,但仅会更新变化的部分。3)构建可组合的组件React构建可复用的组件,事实上通过React唯一要做的事情就是原创 2017-04-26 10:44:50 · 2841 阅读 · 0 评论 -
浅谈React官网学习笔记
1、JSX:JSX代码中出现的标签既不是一个字符串,也不是HTML。JSX是JavaScript的一种语法扩展。建议在React使用JSX编写代码,以让其更直观。JSX像一种模板语言,但可以使用JavaScript的全部特性。JSX用于产生React元素。1) 内嵌JavaScript表达式:在JSX中可以内嵌任何有效的 JavaScript表达式 ,只需要将该表达式原创 2017-05-23 18:54:52 · 1018 阅读 · 0 评论 -
浅谈React表单组件
表单组件不同于其他原生组件,可以通过用户交互发生变化,使响应用户交互的表单数据处理更加容易。 1、交互属性表单组件支持几个受用户交互影响的属性:1) value:用于 、 组件。2) checked:用于type为 checkbox 或 radio 的 组件。3) selected:用于 组件。在 HTML 中, 的值通过子节点设置;在 React 中 的值通过 v原创 2017-05-04 14:54:55 · 848 阅读 · 0 评论 -
浅谈React的最大亮点——虚拟DOM
React非常快速是因为它从不直接操作DOM。虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。1、传统App与React App的对比:传统AppReact App2、虚拟DOM的原理:React会在内存中维护一个虚拟DOM树,对这个树进行读或写,实际上是原创 2017-05-04 16:15:04 · 14620 阅读 · 0 评论 -
浅谈慕课网React入门课程笔记(二)
React JSX,即JavaScript和XML,是facebook为React框架开发的一套语法糖。语法糖,又称糖衣语法,是指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用,主要的目的是增加程序的可读性,从而减少程序代码出错的机会。JSX就是JS的一种语法糖,类似的还有CoffeeScript以及微软的TypeScript,最终它们都被解释为JS才能被浏览原创 2017-05-12 20:33:23 · 774 阅读 · 0 评论 -
浅谈慕课网React入门课程笔记(四)
本文介绍如何监听、响应React组件上的相关事件。绑定事件的传统方法是使用addEventListener。React的事件绑定预处理的不同在于:React向组件上绑定事件是通过on驼峰式命名的方式来绑定相应的事件的。这与原生JS中通过HTML属性在HTML标签上绑定事件是不一样的,除了写法不一样外,还有一个区别是,这里并不是真实的DOM节点,只是一个React Element。事件的原创 2017-05-12 22:22:19 · 593 阅读 · 0 评论 -
浅谈慕课网React入门课程笔记(三)
本文介绍React Components从创建到消失的生命周期状态和属性在生命周期是如何流转的。 1、React Components在浏览器中存在的生命周期中的三个状态1) Mounting:一个React Components被rander解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。当能在浏览器上看到从无到有的时候,mounting已经结束了。mounting结束原创 2017-05-12 21:39:06 · 774 阅读 · 0 评论 -
浅谈React实现todolist
todoList.html: todoList.jsx:var TodoList = React.createClass({ getInitialState: function() { return {lists: []} }, addList: function(list) { if (this.stat原创 2017-04-22 16:42:01 · 1162 阅读 · 0 评论 -
浅谈React实现搜索匹配
search.html: search.js:var Search = React.createClass({ getInitialState: function() { return {lists: [], temp: []} }, update: function() { this.state.temp =原创 2017-04-22 16:45:47 · 12674 阅读 · 1 评论 -
浅谈React实现table根据不同字段升降序排序
tableBox.html: tableBox.jsx:var data = [ {name: "Bruce", age: 23, id: 16, score: 80}, {name: "Alice", age: 24, id: 12, score: 90}, {name: "David", age: 21, id: 11,原创 2017-05-04 22:27:34 · 8452 阅读 · 0 评论 -
浅谈React.createElement()方法
document有createElement()方法,React也有createElement()方法,下面就来介绍React的createElement()方法。var reactElement = ReactElement.createElement( ... // 标签名称字符串/ReactClass, ... // [元素的属性值对对象], ... // [元素的子节原创 2017-04-23 11:11:55 · 8277 阅读 · 0 评论 -
浅谈React实现评论框(二)
http://blog.csdn.net/zhouziyu2011/article/details/70502495实现了简单的评论框,但实现的只是在代码里直接插入评论数据。实际情况是,评论数据应该是来自服务器的 JSON 数据,现在不考虑服务器,直接将 JSON 数据写在代码中:// 模拟服务器返回的JSON数据var data = [ {id: 1, author: "Alice"原创 2017-04-23 15:58:38 · 1254 阅读 · 0 评论 -
浅谈在React中使用Redux数据流(三)
1、react-redux项目结构1) actions:存放Action,用户的行为2) components:展示组件3) containers:容器组件4) reducers:Store里负责分发用户的行为,根据不同的行为作出不同的响应5) index.html:母版文件,最终最顶层的组件需要渲染到一个DOM节点上,这需要一个HTML模板来实现,这个模板放在index.ht原创 2017-05-20 15:34:58 · 1189 阅读 · 1 评论