React+redux+ant design+dva
文章平均质量分 84
面条请不要欺负汉堡
道理不是拿来懂的,而是拿来悟的
展开
-
(一)了解函数化组件 Hooks【useState,useEffect,useContext,useReducer】
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。原创 2022-06-22 15:16:55 · 760 阅读 · 0 评论 -
Reac组件化以及组件通信
react 组件化、多类型组件介绍、组件嵌套、组件通信方式原创 2022-06-16 16:53:49 · 369 阅读 · 0 评论 -
React18.生命周期
react生命周期分为四大阶段:Initialization: 初始化阶段 Mounting:挂载阶段Updation: 更新阶段 Unmounting: 销毁阶段转载 2022-06-15 14:38:32 · 3861 阅读 · 1 评论 -
React 函数组件与class组件的区别
函数组件看似只是一个返回React元素的函数,其实体现的是无状态组件(Stateless Components)的思想。函数组件中没有this,没有state,也没有生命周期,这就决定了函数组件都是展示性组件,接收props,渲染DOM,而不关注其他逻辑。因为函数组件不需要考虑组件状态和组件生命周期方法中的各种比较校验,所以有很大的性能提升空间。...转载 2022-06-15 12:00:36 · 1303 阅读 · 1 评论 -
React Native环境安装教程
一. 前提1.nodejs 环境2.Java Development Kit(JDK)的安装和环境变量的配置原创 2021-06-07 16:33:57 · 2442 阅读 · 2 评论 -
React 性能优化
简单的 todo-list-demo讲 React 性能优化不能光靠嘴说,得有一个 demo 作为依托,做一个简单的 todolist demo,根据源代码来讲解。顺便体验一下 React 最简单的用法。性能检测安装 react 性能检测工具 npm i react-addons-perf --save,然后在./app/index.jsx中// 性能测试import Perf f...转载 2018-11-12 21:43:10 · 420 阅读 · 0 评论 -
React常用的实用技巧
一.React-classnames库在实际应用中,经常会遇到根据某些状态增加或更改组件属性中类名的情况,为了更好地满足的class动态切换的需求,React提供了classNames工具 安装:npm install classnames --save引入classnames库:import classnames from 'classnames'用法:1.基本使用...原创 2018-09-03 13:21:05 · 1030 阅读 · 0 评论 -
简单的理解Redux-Saga
一.理解redux-saga 就是用来处理副作用(副作用简单的理解为:异步操作)的一个中间件。它是一个接收事件,并可能触发新事件的过程管理者,为你的应用管理复杂的流程。redux-saga 是一个 redux 中间件,意味着这个线程可以通过正常的 redux action 从主应用程序启动,暂停和取消,它能访问完整的 redux state,也可以 dispatch redux action。...原创 2018-08-28 17:22:24 · 2162 阅读 · 0 评论 -
学习react前端框架dva
dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:“dva 是 react 和 redux 的最佳实践”。一.介绍1.What's dva ?dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装。dva 是 react 和 redux 的最佳实践。最核心...原创 2018-08-23 17:10:32 · 12238 阅读 · 3 评论 -
React开发中遇到的问题
一.细节React的核心思想就是组件化思想,页面会被切分成一些独立的、可复用的组件。1.React中state和props分别是什么? props理解为从外部传入组件内部的数据。由于React是单向数据流,所以props基本上也就是从服父级组件向子组件传递的数据。一种:跳转页面父组件addressList:item 是参数对象 this.props.history.push(...原创 2018-07-31 15:37:32 · 4868 阅读 · 0 评论 -
React进阶之高阶组件
一.介绍1.说明:高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。我的理解是定义一个A组件(函数),把这个A组件传入给B组件,B组件把A组件包裹一层,然后再返回给A组件。这样的话就可以在原来的A组件上添加一些功能高阶组件是react应用中很重要的一部分,最大的特点就是重用组件逻辑。它并不是由React API定义出来的功能,而是由React的组合特性衍生出来的一...转载 2018-08-03 17:30:11 · 430 阅读 · 0 评论 -
React 组件引用本地图片问题
es6不支持在<img />标签内直接写图片的路径,即:<img src="../images/photo.png"/>这种格式是不支持的。在网上看了很多博客,总结下以下几个加载的方法,当然,这种是在图片不多的情况下可以采用。一.少量图片的时候,单张引入(1)import 方法:import logos from '../../assets/images/lo...转载 2018-07-26 14:21:31 · 4826 阅读 · 0 评论 -
React-router4的简单理解
了解更多请参阅 v4 文档一.介绍 1.说明 react-router4是React官方推挤路由库,4是最新版本。和之前版本不兼容,浏览器和RN均兼容React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用),可组合性...转载 2018-07-20 16:12:06 · 5663 阅读 · 1 评论 -
React-Redux 的用法及connet用装饰器编写
一.介绍 1.说明 使用react-redux是为了更好的组织react和redux。这个库是可以选用的。实际项目中,你应该权衡一下,是直接使用 Redux,还是使用 React-Redux。后者虽然提供了便利,react-redux在redux的基础上,但是需要掌握额外的 API,并且要遵守它的组件拆分规范。就关注两点:Provider和connect 2.安装 npm ins...原创 2018-07-20 14:39:56 · 1598 阅读 · 0 评论 -
Redux异步操作redux-thunk
用户发出 Action,Reducer 函数算出新的 State,View 重新渲染。但是,一个关键问题没有解决:异步操作怎么办?Action 发出以后,Reducer 立即算出 State,这叫做同步;Action 发出以后,过一段时间再执行 Reducer,这就是异步。怎么才能 Reducer 在异步操作结束后自动执行呢?这就要用到新的工具:中间件(middleware)。Github:htt...原创 2018-05-31 17:39:11 · 4191 阅读 · 2 评论 -
Redux Reducer 的拆分
写一个Reducer的例子import React from 'react';import { DatePicker } from 'antd';import 'antd/dist/antd.css';import { createStore } from 'redux'; import { Provider, connect } from 'react-redux'; var da...转载 2018-05-31 14:46:57 · 1394 阅读 · 0 评论 -
Redux基本语法
一.Redux1.什么是ReduxRedux是专注于状态管理,单一状态 ,单向数据流处理.在Redux中,所有的数据(比如state)被保存在一个被称为store的容器中 → 在一个应用程序中只能有一个。store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态,需要分发一个action。分发在这里意味着将...原创 2018-05-30 21:55:58 · 1053 阅读 · 0 评论 -
React基本语法
一.什么是JSX JSX 是 JavaScrip 的一种扩展语法。JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言。下面就是jsx的语法function formatName...原创 2018-05-28 15:34:56 · 5155 阅读 · 0 评论 -
使用 create-react-app 构建 react应用程序流程及开发注意点
一.了解1.什么是React.jsReact.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。React 中,把一切东西都看成组件,而且所有组件有其状态。什么是状态?简单来说,一个组件有多种有限的状态,但同时只能是一种状态,不过条件处罚就会变成另一种状态。学术上叫有限状态机。React.js 是一个新兴的 JavaScript 库,有很多经典的思想值...原创 2018-05-28 10:24:54 · 4134 阅读 · 0 评论