React
文章平均质量分 78
柒青衿
前端
展开
-
React-基于React & Reflux 的评论框组件 (ES6)
React-基于React & Reflux 的评论框组件 (ES6)可以通过如下地址下载源码:https://github.com/CynthiaLYY/comments打开方式:下载压缩包并解压至你本地服务器目录下,安装package.json中的模块依赖,通过webpack重新打包校验是否有错误,通过locallhost:端口号 /comments 访问。最近在学原创 2016-04-24 19:19:37 · 1416 阅读 · 0 评论 -
React-如何进行组件的单元测试
什么是单元测试一般测试分成几个类型:单元测试、集成测试、功能测试。集成测试和功能测试不赘述。单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作,这里的单元是程序工作的最小工作单位。单元测试应该仅仅依赖输入,不依赖多余的环境,如果你的单元测试依赖很多环境,那么你可能需要的是集成测试。单元测试又可以根据开发模式分成以下两类: 1. TDD, TDD指的是Test Driv...原创 2018-09-04 19:38:44 · 8605 阅读 · 0 评论 -
React-AMD标准、动态加载资源的Web APP如何做服务器端渲染
背景介绍需要做服务器端渲染的app是:可以点击添加组件,保存以后生成一个独立的web app。就是一个生成web app的web app。因为不一定每个组件都被添加到用户创建的web app中,所以,组件的资源是动态加载的,只有选择某个组件的时候,才会去加载这个组件的资源。前端资源使用AMD标准进行加载。困难点首先说明,这里不分析SSR中常见的问题,比如路由匹配、css loader处...原创 2018-06-24 22:48:19 · 903 阅读 · 0 评论 -
React-从源码分析React Fiber工作原理
本文的demo仓库在https://github.com/qiqingjin/blog/tree/master/React_Redux,喜欢请star哟~为什么要重写ReactReact16 以前React16 以前,对virtural dom的更新和渲染是同步的。就是当一次更新或者一次加载开始以后,diff virtual dom并且渲染的过程是一口气完成的。如果组件...原创 2018-04-28 11:40:25 · 12694 阅读 · 3 评论 -
React-react16和webpack4来写一个SSR应用
本文的demo仓库在 https://github.com/qiqingjin/blog/tree/master/React_Redux/,喜欢请star哟~前面的话React 16开始重视服务器端渲染,也就是SSR,不再严格对比checksum,不知道你的应用升级了么。 Webpack 4的支持主要看依赖的plugin和loader,目前主流plugin已经支持,可以升级咯。...原创 2018-04-24 17:47:46 · 2558 阅读 · 0 评论 -
React-UI库比较
回归博客了。说明我变得不那么忙了。最近干了件有意思的事情,根据团队需求选择一个React UI库,把结果和感受和大家分享一下。待对比的库国内使用React的小伙伴可能很多都用Antd,其实国外也有很多优秀的React UI库。本次选择的有:Ant DesignAnt Design MobileElemental UIMaterial UIReact-BootstrapR原创 2018-01-31 16:42:01 · 23607 阅读 · 3 评论 -
如何进行React组件单元测试
单元测试是定义我们构建的组件必须实现哪些功能的很好方式。它允许我们尽可能粒子化地测试我们组件的结构。我发现,单元测试使我在使用React时,写更多功能性的代码。我们将使用Karma,Jasmine和Enzyme开始React单元测试。如果只对示例代码感兴趣,请戳 https://github.com/aktof/example-react-unit-testing.什么是Karma,Jasmine翻译 2016-12-21 20:14:06 · 9251 阅读 · 0 评论 -
React-组件渲染和更新的实现
最近一直写React,慢慢就对里面的一些实现很好奇。最好奇的就是自定义标签的实现和this.setState的实现。这里不分析JSX是如何解析的,所有组件都用ES5方式编写。组件渲染渲染时候,我们会调用render方法。原创 2016-08-16 16:35:47 · 17050 阅读 · 1 评论 -
Redux-Provider与connect
Redux使用的基本思路1)定义actions.js,其中包括actions type(字符串常量)、actions creators(返回一个json的函数,返回的这个json就是actions)2)定义reducers.js,包含多个reducer(就是一个函数):(state, action)=>{……return newState};最后通过 combineReducers()将多个red原创 2016-07-05 13:37:48 · 6296 阅读 · 2 评论 -
React-为什么要使用虚拟DOM
什么是虚拟DOM(Virtual DOM)首先,解释下虚拟DOM。虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应。虚拟DOM的工作原理是:数据 -> 全新的虚拟DOM -> 与上一个状态的虚拟DOM进行diff算法比较,得到一个Patch -> 把这个Patch打到浏览器的DOM上。所以虚拟DOM叫的挺高端,其实就有点类似DocumentFragment,把多次DOM操作做原创 2016-07-01 20:42:10 · 6184 阅读 · 1 评论 -
React-实用性能优化技巧
本文的demo仓库在https://github.com/qiqingjin/blog/tree/master/React_Redux/demos,喜欢请star哟~你可能听过一句话,过早的优化是万恶之源。项目开始,我们当然会首先考虑功能的实现,当完成第一版功能以后,就应该尽早开始优化和重构了。工具如果我们不去测量项目目前运行的速度,就无法知道后续进行的优化是否有效、效果有多少。下面介绍...原创 2019-02-01 17:46:43 · 613 阅读 · 0 评论