当前位置:首页 > 精彩博文
时间:2019-03-21 作者:JoYous-SUN 阅读原文
前言 本文属于react进阶用法,如果你还不了解react,建议从文档开始看起。 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react组件,并返回一个新的组件. A higher-order component is a function that takes a component and ……
时间:2019-03-21 作者:JoYous-SUN 阅读原文
引入 本来我是没想过总结这些东西的,会感觉太入门了。但是之前同学去腾讯面试问到了这个问题(react或vue的组件通信),我帮他整理,顺便写demo的过程中,会有一些新的体会,多总结还是有利于进步的呀。 另外本次的代码都放在 https://github.com/sunyongjian/rc-communication-demo ……
时间:2019-03-21 作者:JoYous-SUN 阅读原文
引入 在组内做了一次 React 状态管理的分享,总结了一些 redux 的问题,安利了一下 mobx 更方便的地方。整理成文字,便是此文。注:本文未整理完,大部分都是列的大纲,预计周二前整理完。ps: 应该整理不完 目录 React 状态、通信 Flux —> Redux —> Mobx redux,mobx 对比 Re……
时间:2019-03-21 作者:JoYous-SUN 阅读原文
跟 Redux 相比 函数式 VS 面向对象 redux 需要 connect,也需要 Immutable Data,reducer,action,文件、代码量较多,概念也多。 mobx 直接引用对象组织,修改数据。 redux 数据流动很自然,任何 dispatch 都会导致广播,需要依据对象引用是否变化来控制更新粒度。mobx 数……
时间:2019-03-21 作者:JoYous-SUN 阅读原文
三个概念 Store Action Reducer 三大准则 单一数据源 整个应用状态,都应该被存储在单一store的对象树中(object tree)。 State 是只读的 唯一改变state的方法,就是发送(dispatch)一个动作(Action),action 是一个用于描述已发生事件的普通对象 使用纯……
时间:2019-03-21 作者:JoYous-SUN 阅读原文
reducer 为什么叫reducer 大概是由于reducer函数都能作为数组的reduce方法的参数,所以叫reducer的吧。 Array中的reduce reduce需要两个参数,一个是回调函数,一个是初始值,没有初始值,会默认把数组第一个当初始值,并从第二个开始 模拟数组的reduce方法 Array.prototype……
时间:2019-03-21 作者:JoYous-SUN 阅读原文
store store 是什么 store是一个管理state的大对象,并且提供了一系列的方法 getState(), //返回state dispatch(action), // 派发一个action subscribe() //订阅监听 通过redux 提供的 createStore,传入reducer函数,我们可以得……
时间:2019-03-21 作者:JoYous-SUN 阅读原文
action action相当于一个载体,它携带数据(可能是用户操作产生,或者接口数据),并且会根据事先定义好的type,传给store.dispatch(action),触发reducer方法,更新state。 通常一个action是一个对象,类似于这样 { type: UPDATE_TEXT, text: ……
时间:2019-03-21 作者:JoYous-SUN 阅读原文
本文主要是阅读redux实现方式的时候,思路的一些拓展。大概是在三四个月前就看过redux源码,一直想写一些东西。但是迫于项目的紧急性,以及个人能力精力有限,就搁浅了。现在又重新看,而且很多时候,看懂一些东西可能不难,但是真正深入进去研究,会发现很多东西并不是很清楚,这就需要多思考一些,再写下来能有清晰的思路就更难了。这次的文章需要……
时间:2019-03-18 作者:夏味 阅读原文
相关文档官方文档 reactjs.org相关资源 awesome-reactcli 构建 create-react-app样式组件 styled-components路由 react-router路由匹配测试工具 route-tester 项目构建使用 create-react-app,相关……
时间:2019-03-18 作者:梁少峰 阅读原文
标题的说法其实不太准确,因为react原生的事件系统本身就是事件代理的,意味着事件会一直冒泡到document进行绑定。所以,使用普通的**event.stopPropagation();**是没有办法在react中实现阻止事件“冒泡”类似的操作的。 stackoverflow和github issue上都有相关的讨论,比如 http……
时间:2019-03-18 作者:梁少峰 阅读原文
前言 在redux项目中,我们常常使用select函数和mapDispatchToProps函数,前者用于从store中getState(),然后输入到组件的props中去,后者用于给函数自动绑定上dispatch,不必每次调用执行函数都写dispatch。 碰到的问题 因为项目只要稍微大一点就需要结合使用react-router和c……
时间:2019-03-18 作者:梁少峰 阅读原文
前言 用过redux的人都知道,action和actionType中都存在大量的重复代码。(没有了解过redux的请移步这里) 精简actionType actionType是定义action常量的地方,一般长这个样。 exports.ADD_TAG = ADD_TAG; exports.SELECT_REDDIT = SELE……
时间:2019-03-18 作者:梁少峰 阅读原文
前言 用es6一段时间了,某次想把组件内部的函数都改写成箭头函数。比如 render : function(){ console.log(this.props); } 改写成下面这样的 render () => { console.log(this.props); // 报错,this是undefined } 结果显示t……
时间:2019-03-18 作者:梁少峰 阅读原文
前言 前端技术更新迭代的节奏非常之快,稍微学慢点都有可能被淘汰。最近对于以react和redux为核心的web端技术架构已经渐渐掌握,想要精通还需要很长的时间。react-native与react一脉相承,是我试水app开发的最佳切入点。刚刚开始学习,再加上从来没用过xcode,大大小小的坑肯定踩得不少,列举如下。#1. react-……
时间:2019-03-18 作者:梁少峰 阅读原文
前言 我深信:learn once,write anywhere. 目前react-native的样式是通过像下面这样子来创建的。 var styles = StyleSheet.create({ //container container: { backgroundColor: #F2F2F2, flex……
时间:2019-03-18 作者:梁少峰 阅读原文
之前在项目中同时使用react-router和history,执行npm install的时候报错,如图所示。 按照它给的报错提示,手动把package.json里面的history版本号改为1.13.1就好了。 ……
时间:2019-03-18 作者:梁少峰 阅读原文
前言 以前用jquery开发的时候经常使用jquery.lazyload进行图片的滚动加载,但是到了react体系之后就不太好了,因为不能直接操作DOM元素。所以就找了这个组件react-lazy-load。 使用方法 1. 安装 npm install --save react-lazy-load 2. 编写组件 import R……
时间:2019-03-18 作者:梁少峰 阅读原文
前言 刚刚开始用redux的时候因为应用比较小,而且是单枪匹马,所以所有的action都写在一个action.js里面。后来随着应用的膨胀以及多人协作,这样显然是不行的。所以,应该像分割reducer那样分割action.#1. action // postAction.js // 点击刷新按钮 exports.invalidateR……
时间:2019-03-18 作者:梁少峰 阅读原文
react动画问题所在 假设我们要做下面这样的一个卡片切换的动画。 如果用常规的html+js的思路来解决的话是这样的 两个div 给第一个div添加退出动画 给第二个div添加进入动画 完了 看起来并没有什么难度。 如果用react思维来思考的问题,前后两个卡片其实是一个组件。在react的渲染机制中,一个组件渲染一段DOM元素,当……
公益性全栈资源网站,鸣谢默默付出的博主、工程师、架构师们。
网站内容来源技术大牛的辛勤结晶。
81For 技术网站 Copyright ©2019 备案号:津ICP备19001147号-2