react
文章平均质量分 81
霜如明月
这个作者很懒,什么都没留下…
展开
-
React router动态加载组件之适配器模式的应用详解
前言本文讲述怎么实现动态加载组件,并借此阐述适配器模式。一、普通路由例子import Center from 'page/center';import Data from 'page/data'; function App(){ return ( <Router> <Switch> <Route exact path="/" render...原创 2018-12-30 18:20:50 · 511 阅读 · 0 评论 -
深入解析React Event实现原理
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)并且 React 自己内部实现了一个合成事件,使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你...原创 2018-12-30 17:37:00 · 717 阅读 · 0 评论 -
React 的几种条件渲染以及选择详解
对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例):数据为空, 空页面取数据时发生错误, 错误页面数据正常加载状态针对以上三种情况, react渲染列表的时候要正确判断并渲染出相应的视图, 也就是条件渲染. 不同于vue的v-if, v-show等框架提供的api, react的条件渲染都是js原生的再加上一点点的hack. 比如react文档提到的. if/else, &...原创 2018-12-26 21:18:34 · 703 阅读 · 0 评论 -
React和Vue中监听变量变化的方法
React 中本地调试React代码的方法yarn build场景假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state。16之前在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换16之后在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行prop...原创 2018-12-09 16:28:05 · 3596 阅读 · 0 评论 -
React.js绑定this的5种方法
this在javascript中已经相当灵活,把它放到React中给我们的选择就更加困惑了。下面一起来看看React this的5种绑定方法。1.使用React.createClass如果你使用的是React 15及以下的版本,你可能使用过React.createClass函数来创建一个组件。你在里面创建的所有函数的this将会自动绑定到组件上const App = React.create...原创 2018-12-04 17:52:24 · 645 阅读 · 0 评论 -
原生实现一个react-redux的代码示例
自己动手实现一个react-redux之前试过自己动手实现一个redux,这篇blog主要记录动手实现一个react-redux的过程。这个react-redux还有一点点小瑕疵,我以一个计数器作为例子来实现的。这是目录结构:这里的connect.js文件就是react-redux。├─component│ connect.js│ counter.js│└─store ...原创 2018-11-15 17:05:57 · 369 阅读 · 0 评论 -
浅谈React的最大亮点——虚拟DOM
在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制。一、什么是虚拟DOM?在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM。虚拟DOM是React的一大亮...原创 2018-11-15 15:50:28 · 559 阅读 · 0 评论 -
react与fetch
JavaScript 中的 ajax 很早之前就有一个诟病————复杂业务下的 callback 嵌套的问题。promise 正是 js 中解决这一问题的钥匙。接下来我们在react项目中应用到的fetch 就用到了最新的 promise。那我们如何在react项目中应用fetch呢?第一步:安装用 npm 安装的话,执行cnpm install whatwg-fetch --save即可...原创 2018-10-16 22:25:49 · 1076 阅读 · 0 评论 -
浅析 React / Vue 跨端渲染原理与实现
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生,RN 与 Weex 的跨界也常为我们所津津乐道。UI 框架在实现这样的跨端渲染时需要做哪些工作,其技术方案能否借鉴乃至应用到我们自己的项目中呢?这就是本文所希望分享的主题。概念简介什么是跨端渲染呢?这里的「端」其实并不局限在传统的 PC 端和移动端,而是抽象的 渲染层 (Renderer) 。渲染层并不局限在浏览器 DOM 和...原创 2018-10-10 14:40:00 · 527 阅读 · 0 评论 -
每日质量NPM包事件绑定_bindme(详解React的this)
一、bindme官方定义: is a helper to bind a list of methods to an object reference理解: 因为 不推荐在render()里构建函数 ,作者就用了6行代码封装了函数绑定事件的代码.bindme的npm包实际上由6行ES5代码组成,但是确实方便了很多.这个包值得一用二、用法代替箭头函数和多层bind有时候我们并不会直接在创建...原创 2018-10-08 19:51:29 · 322 阅读 · 0 评论 -
react 应用多入口配置及实践总结
背景还是之前的那个项目,做完国际化没多久,还没来得及划水, 又有新的活了 – 移动端的兼容。 考虑到后期的复杂度, 需要做两套资源。 具体的目标是:同一个URL,PC打开就显示PC的那一套, M端打开就显示Mobile的页面。 create-react-app 脚手架本身不支持多入口, 需要改造,今天下午研究了一下,改造了一波, 基本达到了预期, 在这里简单把经验总结分享下。先睹为快Mobi...原创 2019-01-07 21:10:51 · 2108 阅读 · 0 评论