随笔分类 - react
摘要：一、React调试工具 1、安装 react-developer-tools，在chrome应用商店进行下载，因为网络限制原因，我们可以使用火狐浏览器进行安装下载 a、打开火狐浏览器的附加组件 b、搜索react-developer-tools进行安装 React Developer Tools会自
阅读全文
摘要：一、creact-react-app中使用装饰器 运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来 此时，项目中多了一个config文件，并且各个配置文件已经暴露出来了。(运行npm run eject之前，保证本地没有待提交到git的文件) 安装
阅读全文
摘要：一、React中key值得作用 react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的，而是给React自己使用，有了key属性后，就可以与组件建立了一种对应关系，简单说，react利用key来识别组件，他是一种身份标识，就像每个人有一个身份证来做辨识一样。每个key 对应一个组件，
阅读全文
摘要：一、路由配置 二、Tabbar遍历 注意： 页面上不能显示字体图片了，而是直接显示字体编码 原因是字体编码后面四位是Unicode编码，想使用字符串来传递的话,只要将 "" 改为 “\ue655” 即可
阅读全文
摘要：一、安装 二、为什么使用 redux-actions reducer使用switch case语句进行action类型判断，当action很多时候，reducer内容就不那么直观了。redux-actions简化了reducer和action的联系 三、基本使用 1、创建action/actionC
阅读全文
摘要：一、react-hooks概念 React中一切皆为组件，React中组件分为类组件和函数组件，在React中如果需要记录一个组件的状态的时候，那么这个组件必须是类组件。那么能否让函数组件拥有类组件的功能？这个时候我们就需要使用hooks。 Hooks让我们的函数组件拥有了类似类组件的特性，Hook
阅读全文
摘要：一、全局定义context对象 globalContext.js 二、根组件引入GlobalContext，并使用GlobalContext.Provider（生产者） 三、组件引入GlobalContext并调用context，使用GlobalContext.Consumer
阅读全文
摘要：一、context的理解 很多优秀的React组件都通过Context来完成自己的功能，比如react-redux的<Provider />，就是通过Context提供一个全局态的store，拖拽组件react-dnd，通过Context在组件中分发DOM的Drag和Drop事件，路由组件react
阅读全文
摘要：一、官网地址 https://www.styled-components.com/ 二、styled-components 1、styled-components 样式化组件，主要作用是它可以编写实际的CSS代码来设计组件样式，也不需要组件和样式之间的映射，即创建后就是一个正常的React 组件，并
阅读全文
摘要：一、pureComponent的理解 pureComponent表示一个纯组件，可以用来优化react程序。减少render函数渲染的次数。提高性能 pureComponent进行的是浅比较，也就是说如果是引用数据类型的数据，只会比较不是同一个地址，而不会比较这个地址里面的数据是否一致 浅比较会忽略
阅读全文
摘要：const combineReducers = (reducers)=>{ let newState = {}; return function(state,action){ for(var key in reducers){ newState[key] = reducers[key](state[
阅读全文
摘要：一、废除的生命周期 官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本 由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数 componentWillMount componentWillRecieveProps componen
阅读全文
摘要：一、Immutable简介 Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是
阅读全文
摘要：一、fetch fetch是一种XMLHttpRequest的一种替代方案，在工作当中除了用ajax获取后台数据外我们还可以使用fetch、axios来替代ajax 二、安装 执行npm install whatwg-fetch --save即可安装。 为了兼容老版本浏览器，还需要安装npm ins
阅读全文
摘要：一、Middleware的由来 单一的state是存储在store中，当要对state进行更新的时候，首先要发起一个action(通过dispatch函数),action的作用就是相当于一个消息通知，用来描述发生了什么(比如:增加一个Todo)，然后reducer会根据action来进行对state
阅读全文
摘要：一、Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件，connect的意思就是将两种组件连起来 参考文章：https://github.com/reduxjs/r
阅读全文
摘要：一、flux的缺陷 因为dispatcher和Store可以有多个互相管理起来特别麻烦 二、什么是redux 其实redux就是Flux的一种进阶实现。它是一个应用数据流框架，主要作用应用状态的管理 设计思想： (1)、web应用就是一个状态机，视图和状态一一对应 (2)、所有的状态保存在一个对象里
阅读全文
摘要：一、什么是Flux Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。 二、flux的基本概念 (1) 、Flux由4部分组成 1、View：视图层 2、Action(动作)：视图发出的消息(比如mouseClick) 3、Dispatcher( 派
阅读全文