前端每周清单第 7 期：Vue现状与展望、编写现代 JavaScript 代码、Web 开发者安全自检列表为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web 前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第 14 期：Vue现状与展望、编写现代 JavaScript 代码、Web 开发者安全自检列表前端前端每周清单前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。新闻热点国内国外，前端最新动态《Google IO 2017 召开》：美国时间 5 月 17 日- 19 日，Google I/O 2017 大会于美国加利福尼亚州山景城的海岸线圆形剧场召开；会议提及了AI、Kotlin、Android 8.0、HOME、Assistant 等等很多值得关注的东西。会议上 Google 还宣布将 Kotlin 语言作为安卓开发的一级编程语言；Kotlin 由 JetBrains 公司开发，与 Java 完全互通，并具备诸多 Java 尚不支持的新特性。(https://events.google.com/io/)《微软 Build 2017 召开》：2017年5月10日，微软 Build ...继续阅读 (15)

React原理学习React出身FaceBook豪门，一出生就带着virtualDOM和diff算法两大颠覆式的被动技能，很快引来高度关注，并且以高效快速著称。经过一段时间的使用，抽出时间来学习其原理，发现并不难，但是想法很创新。造就了其不同于传统框架的开发模式。一、VirtualDOMVirtualDOM一直是React最著名，最神秘的特点。也是其高效迅速的核心。virtualDOM其实很好理解：FaceBook的工程师认为传统的框架，频繁的操作DOM代价很大。性能和速度很低，想找一种东西替代DOM，但又能有DOM的嵌套结构和属性。于是FaceBook工程师们创造出virtualDOM。本质上virtualDOM就是一个json对象，用来描述真实DOM应有的属性和子集。拥有和DOM一样的嵌套关系形成的virtualDOM树。举个例子：我们有一段HTMLthis is a box上述是一段很简单的有嵌套关系的HTML，我们可以看到里面有几个关键属性，其实只需要记住这几个关键属性，我们就相当于知道了整段节点。根据上述HTML，抽象出来的该节点的关键属性。var conatiner = { tagName: 'div', id: 'wrap', children: [box1, box2] }; var box1 = { tagName: 'div', ...继续阅读 (11)

0x01 前言React现在比较火的前端组件化开发框架，近段时间开始慢慢的关注前端相关技术，本篇主要来介绍一个React的入门Demo todoList，相信很多刚刚开始接触React开发的人都会去实践一下。好了，下面就来感受下React的魔力。0x02 搭建开发环境用React开发一个应用，我该怎么定义工程，如何去开发？create-react-app React应用开发脚手架工具，通过他我们可以快速的搭建好React开发工程。1、npm install -g create-react-app yarn 2、create-react-app todo-list 3、cd todo-list 4、yarn start按照上面的步骤操作就可以搭建好一个完整的React开发工程。如果对npm和yarn命令不熟的可以自己行百度他们之间的用法和差异性。基于这个构建好的工程，如果你想要剖析下这个工程为什么通过yarn start就可以启动起来、JSX语法在哪个阶段被打包成浏览器能够识别的JS文件的需要进一步对webpack进行了解。webpack简介如果将webpack当做一个黑盒子那么它就是一个对JS扩展(Jsx)、CSS扩展（Scss，Less）等进行预处理、文件打包工具。（由于Jsx、Scss、Less浏览器没法直接解析）其最主要的特性：loads：不同的文件加载解析的方式不一样，可以 ...继续阅读 (13)

react-native中WebView布局的一个问题假设WebView有两种方式：直接用网址用异步请求得到的html字符串渲染。1、最简单的布局：只有一个WebView如果整个页面只有一个WebView的话，那么由于WebView本身带有滚动效果，所以当加载的数据超过页面显示的范围时，可以通过上下滑动来查看。这种情况下没有什么问题。2、其它布局A+WebView这种情况下，假设布局A定义在WebView的前面，能不能实现仍然是让它们看起来像是一个页面那样子滚动？3、其它布局B+WebView这种情况下，假设布局B定义在WebView的后面，能不能实现仍然是让它们看起来像是一个页面那样子滚动？各位大神，怎么解决这样的问题啊？ ...继续阅读 (20)

react-native中ListView和ScrollView中的一个问题1、最简单的布局：只有一个ListView如果整个页面只有一个ListView的话，那么由于ListView本身带有滚动效果，所以当加载的数据超过页面显示的范围时，可以通过上下滑动来查看所有的item。因此这种情况下，不需要添加ScrollView。2、其它布局A+ListView这种情况下，如果布局A定义在ListView的前面，那么当布局A所占的比例较大，或者ListView加载的数据较多时，都会导致ListView显示不完全。同样，由于ListView自身可以滚动，因此仍然可以通过上下滚动来查看ListView的所有item。能不能实现仍然是让它们看起来像是一个页面那样子滚动？3、其它布局B+ListView这种情况下，假设布局B定义在ListView的后面，那么就会出现两种情况：ListView加载的数据不多，可以完全显示ListView的每一项，那么如果后面还有足够剩余的空间的话，布局B能正常显示；ListView加载的数据加多，那么就会导致留给布局B的空间不足，或者根本就没有，布局B将会显示不完全或者完全不显示。而不管怎么，ListView本身的内容，都可以通过滑动来查看。能不能实现仍然是让它们看起来像是一个页面那样子滚动？各位大神，怎么解决这样的问题啊？ ...继续阅读 (18)

之前实际项目中一直用的是vue开发，为了学习react，也为了看看react和vue有什么区别， 花了几天时间，撸了三个简易版的cnodejs，只有查看方面的功能。 欢迎大家围观吐槽，fork/star更欢迎。react 版 demo：https://share.la/cnodejs/react/GitHub：https://github.com/ycloud/cnodejs-reactvue 版 demo：https://share.la/cnodejs/vue/GitHub：https://github.com/ycloud/cnodejs-vue微信小程序版 GitHub：https://github.com/ycloud/cnodejs-weapp还在审核中，发几张截图坐标深圳，有工作介绍的欢迎联系 junszh#gmail.com ...继续阅读 (8)

关于react-native的listview，现在我做了一个页面，大概分为两个部分，第一个部分是显示作者信息等，第二个部分是显示作者的文章列表，用网络请求回来的数据（数组）利用listview来渲染。现在问题来了，现在布局乱了…原本我是想让这两个部分像是一个页面滚动，现在发现只有listview滚动…是不是要对这两部分的container做一些什么样式设置还是怎样？ ...继续阅读 (4)

仿《ONE》APP又来了！又写了一个《ONE》，别急呀，我可没copy上次写的代码~这是用ReactNative写的《ONE》基本界面都已经实现，当然了，有些地方图省事(搞不定)+追求速度写的Demo，就自然会导致：退而求其次的实现方式代码结构可能不太规范/清晰可能还有bug呢(我不听我不听)项目地址 =>https://github.com/liuzho/ONE-RN我的个人主页 =>https://liuzho.com尽管Kotlin风光无限几乎对各大社区进行了屠版，但我还是冒着被淹没的风险把这个Demo发出来了，万一有人看呢(逃..没事，ReactNative自有魅力！(各种技能全给你学了管你谁有魅力).....这个Demo对你有没有帮助？如果你初学RN，那么帮助可能有限，请你点个赞/点个star，以备后续学习如果你是RN大牛，那么请你点个赞/点个star，慢慢看，慢慢嘲讽我如果你有一丢丢RN基础，想练练手，那么请你点个赞/点个star，反正你也学不到啥略略略~~~预览当然了，国际惯例，甩预览图：在你的电脑上运行你需要这样做：git clone https://github.com/liuzho/ONE-RN.gitcd ONE-RNnpm install//切记不要用cnpm！亲测cnpm导致无法运行react-native run-iosorreact-native ru ...继续阅读 (5)

WannaCry 病毒的事情我们就不提，本周各科技公司、技术社区的大会真是让人应接不暇，Google IO、MicroSoft Build、React Europe、Vue Conf，每个里面都有不少前端工具、框架、演进方向的干货，好学的你怎么错过？下面是本周精选内容，请享用。技术动态Google I/O 2017 视频列表Google I/O 2017 可以说是整个互联网的盛宴，关于它的报道已经很多了，这里搜罗了全部的视频，里面关于前端的内容比较值得关注，比如 Polymer、Dev Tools、PWA 等，工程师不光要埋头做事，还要抬头看路，大的科技公司则走在我们前面。Next.js 3.0 预览版发布Next.js 是基于 React 的支持服务端渲染的开发框架，本周发布 3.0 预览版，支持动态 import。服务端渲染虽然提了很长时间，但是到目前为止还处在看上去很美、用起来性能达不到要求的阶段，不过社区的努力会带来好的结果。Vue Conf 2017 参会笔记掘金编辑产出的参会笔记，全球首届 Vue.js 开发者大会，尤雨溪介绍了 Vue.js 的演进之路和今年的版本迭代计划，狼叔对前后端分离的大前端技术架构给出了良方，张耀春则分享了非常多 Webpack 用在实际项目中的技巧，掘金的创始人在现场做了他前端生涯的最后一次技术分享，可惜没有直播。React Europe 2 ...继续阅读 (3)

create-react-app是FaceBook官方出品的一个React.js脚手架工具，集成了webpack等调试和打包工具，具体可以查看Github: https://github.com/facebookincubator/create-react-app其默认支持css的import，但是不支持less，本文介绍如何简单的增加less的支持。在create-react-app生成的项目文件夹中，是看不到webpack.config相关的文件的，而要增加less支持肯定是要更改webpack配置文件的，所以需要让这些文件暴露出来，使用以下命令即可：npm run eject之后便可以在项目目录下看到config文件夹，其中的webpack.config.dev.js和webpack.config.prod.js分别是开发环境和生产环境使用的webpack配置文件。安装less-loader:npm install less-loader less --save-dev修改开发环境配置，编辑webpack.config.dev.js文件，需要改两个地方。第一个地方：找到以下几行（版本不同位置可能不太一样）exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.bmp$/, ...继续阅读 (12)

React VR – Creating Virtual Reality Apps是今天 udemy.com 上的限免课程，教的是利用 React.js、ReactVR、ES6、JavaScript 等来制作 VR 应用。获取地址：https://www.udemy.com/react-vr/?couponCode=RNCOMMUNITY 来自反斗限免您可能也喜欢：udemy.com 限免课程 JavaScript AJAX PHP mySQL create a Dynamic web Form project[$105→0]udemy.com 限免课程 C# and Visual Studio 2017: Create your first apps[$200→0]udemy.com 限免课程 Create a VR Space Game Using Google Cardboard SDK and Unity[$20→0]udemy.com 限免课程 Try Django 1.10 | Create a URL Shortening Service[$50→0]udemy.com 限免课程 Mastering Modern Web Development Using React[$195→0]无觅 ...继续阅读 (13)

一个完成的react项目github地址demo地址(请调成手机模式观看)技术栈: webpack + react + react-router + redux + sass + es61.下载git clone git@github.com:toniqian/react-redux-router.git cd react-redux-router npm install (安装依赖模块) npm install webpack -g (没有安装webpack的需要安装)2.运行开发环境npm run vendor (提取公共js) npm run start(启动服务)生产环境npm run prod3.文件目录1.dist文件是打包的生产代码2.node_modules 是开发需要的插件3.src是开发目录4.package.json 插件配置,运行命令的配置5.server.js 开发环境的服务配置6.webpack.config.js 开发环境的配置7.webpack.dll.config.js 提取开发环境的公共js8.webpack.prod.config.js 生产环境的配置9.webpack.prod.dll.config.js 提取生产环境的公共js4.项目目录1.action 组件改变状态的行为 2.components 公共组件库 3.containers ...继续阅读 (6)

相关背景本人学生，最近在做安卓的作业，使用了React-Native进行开发。需要实现的效果是在安卓本地实现爬虫，爬取网页，进行解析。与在PC端爬取数据是类似的，都是先读取html，在使用工具解析。 我在这里使用的是：网络： React-Native自带的fetchhtml解析 :cheerio-without-node-native（由于cheerio部分依赖js在PC上的IO操作，具体是哪部分代码忘了，不能够在安卓端使用，所以需要纯js实现的cheerio，这个包就很好。）我主要遇到的问题是在开发过程中，当使用到fetch的json方法或者text方法，有时候就会出现这样的问题.fetch('http://www.fitnes.cn/jianshen') .then(res => { return res.blob(); }) .then(blobs => { }我的解决方法是查阅了相关资料后，我的解决方法是： 使用axios，axios是封装了XMLHttpRequests，这个对象在react-native中同样存在，使用axios会比fetch稳定许多。另外还有一点就是，如果非要使用fetch，注意区分fetch的浏览器方法和react-native中提供的方法。例如blob就是only浏览器提供的方法，在非远程调试模 ...继续阅读 (10)

按惯例先放下载地址：牛读 v2.0.0http://reader.liteneo.com/同时支持 iOS 以及 Android，欢迎品尝牛读支持回复Cnode的帖子，但是不支持创建帖子，虽然这个支持起来不难，但是我觉得创建帖子是一件很严肃的事情，应该在 PC 上去完成之前一直想着跟着 React Native 的 Release 节奏，每一两个月发一个版本，但是这次却等了四个多月，一方面是要等某些我想要的特性被支持，一些严重的八阿哥被修复，另外一个原因就是这次更新我几乎重写了绝大部分代码逻辑从用户的角度看，这次更新几乎没有大的更新，只有几处 UI 的更新，比如知乎日报详情页的视差效果以及集成了微信分享，但是对我来讲，这是一次脱胎换骨的更新dva, 之前的版本没有使用任何redux、mobx之类的状态管理工具，因为我觉得整个 App 的逻辑并不复杂，但是事实并非如此，里面各种ref的使用使整个流程变得异常复杂，后来经过在 redux 和 mobx 中间纠结，最后选择了抱 redux 大腿，用过 redux 的应该都知道 redux 相对繁琐的写法，所以我选择了dva，一个封装了 redux + redux-saga 的状态管理库，然后就开始了漫长的重构之旅，dva的体验非常棒，简化了 redux 的写法，以及与 rudx-saga 的集成，现在我将绝大部分逻辑从组件里移到了mode ...继续阅读 (12)

项目地址：github为什么要用dva?我个人认为dva相对于redux开发起来要方便很多。比如你不必单独的去创建action.js文件。dva是直接在dispatch时写清楚action就行了。它把侧重点放在了 model（类似于reducer但比它做的事情要多）文件里面，便于数据逻辑的统一维护。特别是对于异步action,dva处理起来要轻松很多。你不必去在意请求时 isFetching的状态，不需要每个异步请求都要派发三个action，因为dva内置loading插件，它会根据请求状态自动更新，从而让你专注于请求逻辑就行了。 … 而 dva 正是用于解决这些问题。等等… ...继续阅读 (9)

每周荐书：Swift、Java、React（评论送书）老规矩，感谢大家对每周荐书栏目的支持，先公布下上周中奖名单13期-刘子腾东风玖哥《Minecraft我的世界：建筑教程大全》梦中天阿凡提的小毛驴《人人都是架构师：分布式系统架构落地与瓶颈突破》Heidi_8ylemliu《OpenStack最佳实践——测试与CI/CD》请以上六位用户私信给小编快递地址，我尽快给各位发送奖品。每周荐书活动规则：在文末评论里回复你对本周推荐图书的看法，或想要获得某本书的书名及理由下期荐书更新时，会在本期评论中选出6名优秀评论可以免费获得此书。《Swift进阶》喵神领衔iOS开发三部曲之完结篇从低层级编程到高阶抽象完成最终修炼【德】Chris Eidhof（克里斯·安道夫） 【德】Ole Begemann （奥勒·毕格曼） 【德】Airspeed Velocity （空速网站） 著王巍 译ISBN 978-7-121-31200-72017年5月出版定价：75.00元编辑推荐√ Swift 非常适于系统编程，同时它也能被用于书写高层级的代码。√ 如果你已想深入探索这门语言的奥秘，这是唯一能找到的一本书。√ 全球知名 iOS 教学网站 objc，其精品图书更是惠及无数开发者。√ 高层级抽象如泛型|协议，低层级如封装C代码、字符串内部实现。《Java多线程编程实战指南（核心篇）》本书以基本概 ...继续阅读 (90)

测试一下能不能发文章react-cnode基于webpack + react + react-router + redux + less + flex.css + ES6 的React版cnode社区demo下载git clone https://github.com/lzxb/react-cnode.git cd react-cnode npm install (安装依赖模块) npm install webpack -g (没有安装webpack的需要安装)运行（nodejs 6.0+）npm run dev (开发版本访问：http://localhost:3000/) npm run dist （发布生产版本）功能1.登录退出 2.列表分页，查看帖子 3.发帖，回复帖子 4.我的消息 5.个人中心 6.查看别人的资料 ...继续阅读 (18)

前言总括：包含这三个月来碰到的一些觉得比较好的面试题，三个月没怎么写博客着实有些手痒，哈哈哈。7000余字，不成敬意2333原文地址：我的前端进阶之路知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书）博主博客地址：Damonare的个人博客烈火试真金，逆境试强者正文React和Vue对比相同点:数据驱动视图，提供响应式的视图组件都有Virtual DOM，组件化开发，通过props参数进行父子组件数据的传递，都实现webComponents规范数据流动单向都支持服务端渲染都有支持native的方案，React的React native，Vue的weex不同点：社区：React社区还是要比vue大很多；开发模式：React在view层侵入性还是要比Vue大很多的,React严格上只针对MVC的view层，Vue则是MVVM模式的一种实现；数据绑定：Vue有实现了双向数据绑定，React数据流动是单向的数据渲染：对于大规模数据渲染，React要比Vue更快，渲染机制启动时候要做的工作比较多；数据更新方面：Vue 由于采用依赖追踪，默认就是优化状态：你动了多少数据，就触发多少更新，不多也不少。React在复杂的应用里有两个选择:(1). 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render。 (2).Components 尽可能 ...继续阅读 (12)

原文地址：React at Light Speed原文作者：Jacob Beltran译文出自：掘金翻译计划译者：ZhangFe校对者：yzgyyang,xunge0613光速 ReactVixlet 团队优化性能的经验教训在过去一年多，我们Vixlet的 web 团队已经着手于一个激动人心的项目：将我们的整个 web 应用迁移到 React + Redux 架构。对于整个团队来说，这是不断增长的机遇，而在迁移过程中，我们一路风雨兼程。因为我们的 web-app 可能有非常大的 feed 视图，包括成百上千的媒体、文本、视频、链接元素，我们花了相当多的时间寻找能充分利用 React 性能的方法。在这里，我们将分享我们这一路学到的一些经验教训。声明：下面讲的做法和方法更适用于我们具体应用的性能需求。然而，像所有的开发者建议的那样，最重要的是要考虑到你的应用程序和团队的实际需求。React 是一个开箱即用的框架，所以你可能不需要像我们一样细致地优化性能。话虽如此，我们还是希望你能在这篇文章里找到一些有用的信息。基本原理向更大的世界迈出第一步。render() 函数一般来说，要尽可能少地在 render 函数中做操作。如果非要做一些复杂操作或者计算，也许你可以考虑使用一个memoized函数以便于缓存那些重复的结果。可以看看Lodash.memoize，这是一个开箱即用的记忆函数。反过来 ...继续阅读 (8)

本文译自：https://engineering.musefind....我最开始学习react的时候，看到过各种各样编写组件的方式，不同教程中提出的方法往往有很大不同。当时虽说react这个框架已经十分成熟，但是似乎还没有一种公认正确的使用方法。过去几年中，我们团队编写了很多react组件，我们对实现方法进行了不断的优化，直到满意。本文介绍了我们在实践中的最佳实践方式，希望能对无论是初学者还是有经验的开发者来说都有一定的帮助。在我们开始之前，有几点需要说明：我们是用es6和es7语法如果你不了解展示组件和容器组件的区别，可以先阅读这篇文章如果你有任何建议、问题或者反馈，可以给我们留言Class Based Components (基于类的组件)Class based components 有自己的state和方法。我们会尽可能谨慎的使用这些组件，但是他们有自己的使用场景。接下来我们就一行一行来编写组件。导入CSSimport React, { Component } from 'react' import { observer } from 'mobx-react' import ExpandableForm from './ExpandableForm' import './styles/ProfileContainer.css'我很喜欢CSS in JS，但是它目前还是一种 ...继续阅读 (17)

目前工作中用到了React，搭配一起使用了Immutable.js。之前没有静下来思考一下为什么React社区这么推崇搭配一起使用Immutable。正好想写篇文章分析一下这个问题。之前我翻译了React官方文档中Advanced Guides中关于一致化处理(Reconciliation)和性能优化(Optimizing Performance)就涉及到这方面的内容。React性能优化一提到React，大家第一时间就想到的虚拟DOM(Virtual DOM)和伴随其带来的高性能。但是React提供的是声明式的API(declarative API),好的一方面是让我们编写程序更加方便，但另一方面，却使得我们不太了解内部细节。一致化处理(Reconciliation)React采用的是虚拟DOM，每次属性(props)和状态(state)发生变化的时候，render函数返回不同的元素树，React会检测当前返回的元素树和上次渲染的元素树之前的差异，然后找出何如高效的更新UI。上图展示的就是一个元素树，React比较两次元素树差异的时候，首先从根节点开始。如果元素类型不相同时，该节点以下(包括当前节点)的元素树都会被销毁，树的根节点以下的任何组件都会被卸载，因此状态(state)也会丢失。如果元素节点类型是相同的，那就需要区分是DOM元素还是组件。如果是DOM元素，会保持节点相同，仅 ...继续阅读 (12)

共 2127 字，读完需 4 分钟。我本周读到 1 篇比较有趣的文章叫做《The 10x developer is NOT a myth》，不管你承不承认，也不管你有没有意识到，程序员的效率有时会有天壤之别，10X 程序员的概念很早就出现了，怎样才算 10X 程序员？跟普通程序员的区别在哪里？推荐你抽时间细读，如果你不愿意看中文，可以看看我写的《工程师做事的三重境界》。下面是本周精选的内容，请享用。技术动态使用 Node.js 的那些理由还站得住脚么？技术社区的活力从各种撕逼的发生频率能看出来，这篇文章开头承认 Node.js 已经非常流行并且越来越流行，但是作者认为早些年列出的使用 Node.js 几大理由是站不住脚的，因为其他技术也在进步，在各个方面他们都比 Node.js 做的更好，你怎么看？ES6 模块加载登陆 Chrome Canary 60不知道 ES6 模块的同学应该去看看Ponyfoo或者Jake的文章，Chrome Canary v60 已经提供了 ES6 模块的支持，不过需要你手动打开支持。这篇文章可以说是新特性尝鲜文章，并且对如何开始在项目中使用这个功能、如何做恰当的回退都提出了可行的方案。文章教程让无状态 React Component 渲染快 45% 的黑科技无状态 React Component 的概念就是那些纯粹负责渲染且没有状态变化的 Compone ...继续阅读 (7)

React 学习与实践资料索引Overview: 概览Principle: 设计理念Case Study: 案例Book: 书籍Course & Conf: 视频教程与会议Resource: 其他资源集锦Tutorial: 入门教程Concept: 概念Coding: 基础编码Component: 组件开发Syntax: 语法PropsStateContextDOMLifeCycleStyle: 样式CSS-in-JSAnimationReact RouterStyleGuide & Design Pattern: 样式指南与设计模式Functional ReactHOCs: 高阶组件Code Splitting: 代码分割Performance: 性能优化Tool: 工具Production: 生产环境Test: 测试PreactReconciliation: 调和Virtual DOMStack ReconcilerFiberPattern Library: 模式库ListTableReact 学习与实践资料索引从属于笔者的Web 开发基础与工程实践中的阅读学习资料工具集锦系列，本文内容是笔者在学习与实践 React 以及准备每周的前端清单系列时候阅读的文章或者接触到的工具积累。注意，部分英文文章需要翻墙，请自备梯子。React 学习与实践资料索引鉴于 React 技术栈一直也 ...继续阅读 (12)

redux是一个提供组件之间数据共享，管理处理的模块，在react组件中使用十分广泛，如何在react组件中实现数据共享管理？redux数据管理的基本原理1.利用store存储数据信息，利用store.getState()得到当前的状态值导入redux中的createStore方法,创建一个storeimport {createStore} from 'redux' const store = createStore()2.state是store某一个时刻的数据值，store里面的数据变更会触发store.subscribe中回调函数，在里面设置setState引发view更新3.定义action类型type和携带的数据，action是一个对象里面必须有type属性,它标识了action类型名称，也可以用函数生成actionconst action= { type: 'CHANGE', data:'data' } //another way to create a action with function function actionsCreator(obj) { return { type: 'CHANGE', name: obj.name, pass: obj.pa ...继续阅读 (9)

【摘要】你如果将babel改成国内的 变成 什么react, react dom, redux, react redux都可以在cdn.bootcss.com上找到阅读全文 ...继续阅读 (11)

这也许真的是最丑的了 看到大家都在做 cnode 的各种版本 vue…react… 一直没有react的实战，这次我打算来练练手声明哈哈，配色仿的 segmentfault主要库react redux react-router react-redux immutable react-saga项目构建使用create-react-app进度开发中… 目前只是把基本的库引入了。。 后期会持续更新功能多操作语言 换肤 适配手机、平板、PC演示源代码演示:http://code.dian.io/github:https://github.com/gongchao/cnode希望大家多给点 star ～ 最近在换工作，多点 star 工资能高些。。。 另外。。大专毕业，真难找工作～ ...继续阅读 (12)

之前有写过类似的一篇文章，有位同学突然找来解惑，发现自己采用了另外的一个方法，这里也分享下，希望对使用reactjs的同学有帮助。逻辑思路是这样子的，在componentDidMount中实现更新dom的操作，异步加载需要的资源文件，然后在加载完后实现qiniu的初始化操作。这里就不需要在webpack或者其他打包工具中去引入qiniu的包文件，导致打完包的文件过大了。我这里使用了nodejs的库scriptjs，const $S = require('scriptjs');可以实现异步的加载文件，当然你也可以使用你认为更好的，当然也别忘记告诉我下。以下为代码实现部分：async componentDidMount() { let uploadToken = await this.getUploadToken(); $S([ 'https://dn-kdjz.qbox.me/js/plupload/2.1.1/plupload.full.min.js', 'https://dn-kdjz.qbox.me/js/qiniu-js-sdk/1.0.17.2/qiniu.min.js' ], 'uploadBundle'); $S.ready('uploadBundle', () => { // 证件合影 let options1 ...继续阅读 (106)

地址:https://github.com/shen100/wemall微商城技术选型前端web服务器: nginx后台渲染: node.jsM站框架集: vue, vuex, vue-routerM站UI组件库: vux后台管理框架集: react, redux, react-router-redux后台管理UI组件库: antd数据可视化: echarts富文本编辑器: ueditor打包工具: webpack构建工具: gulp后台web框架: iris路由: httprouter持久层框架: gorm数据库: mysql项目环境搭建1克隆代码git clone https://github.com/shen100/wemall.git2配置nginx将wemall/nginx/dev.wemall.com.conf文件拷贝到nginx的虚拟主机目录下3配置hosts127.0.0.1dev.wemall.com4创建数据库先创建数据库如wemall，再use wemall，然后导入wemall/sql/wemall.sql注意: 本地开发模式下，数据库是wemall，用户是root，密码是test1234可以通过wemall/configuration.json配置文件进行修改5安装node.js第三方模块进入wemall/nodej ...继续阅读 (8)

基于 react-native+redux 的高仿 V2EX 客户端开源项目github 传送门:https://github.com/seawind8888/react-native-v2ex.git（欢迎star⋔）安装配置1.第一步git clone https://github.com/seawind8888/react-native-v2ex.git2.第二步cd v2ex_demo3.第三步npm install4.第四步1.运行 Android 版本 Mac OS X:react-native run-android or Windows OS:react-native start and react-native run-android 2.运行 iOS 版本 Mac OS X:react-native run-ios or xcode open project and run project运行效果使用组件1.react-native-side-menu 2.react-native-swiper 3.react-native-vector-icons 4.react-redux 5.redux 6.redux-thunk ...继续阅读 (9)

本文为 Marno 原创，转载必须保留出处！公众号 aMarno，关注后回复 RN 加入交流群简书专题《 React-Native 开发阵营 》，欢迎关注和投稿React Native 优秀开源项目大全：http://www.marno.cn一、导读本次更新亮点：在 IOS 上彻底移除了对 FlatList 进行优化：比如支持固定头部等个人感觉这期更新基本可以忽略了！可以忽略了！可以忽略了！二、重大变化移除对 @provides 的支持如果你使用了 @provides NameOfModule，那现在必须使 @providesModule 来代替了。当 native 代码确实调用了 dispatched 时才回调 batchDidComplete移除 MapViewIOS（iOS）组件被声明为过期已经有一段时间了，所以在这次 release 版本中直接移除了。三、新特性Android平台PickerAndroid: 在通过 positon 获取子组件前将子组件先转换成数组允许实例化 DeviceInfoModule 时只传入一个 Context在文档中添加关于如何将包含 RN 代码的安卓模块部署到 Nexus 或 Maven 仓库的说明Profiler: 移除旧的对分析器代码Profiler: 通过 RN 包连接器下载文件当使用 timer 计时超过 1 分钟时在警告中提示可以使用 ...继续阅读 (5)