从React组件划分的纠结到总结

在实际开发项目中,我将所有的React组件划分为容器组件和展示组件,展示组件其实就是一个纯函数组件,没有任何副作用,基本都是PureComponent。但是突然,出现了这么一个问题: 我有一个浮层组件Layer,它是一个展示信息明细的面板类似于这种,就比如订单下单之后,在价格边上有个查看明细,这时候 ... »

自己手撸Ant Design的时间选择控件YearPicker

不知道为什么蚂蚁金服团队没有在ant design的DatePicker中单独给出选择年份的组件,这给我们这种懒人造成了很大的痛苦,自己手造轮子是很麻烦的。毕竟只是一个伸手党,emmmmm..... 然后就打算自己手撸了,首先去偷看了蚂蚁自己组件的样式,打算照着搬下来。后来发现下面的item是用的t ... »

React 使用browserHistory项目访问404问题

最近项目里面用到了React但是发布到iis站点之后,路由地址 刷新访问直接404错误。查阅资料之后发现是iis缺少配置URL重写 的问题导致的。下面我们来图形化配置,简单的配置下IIS 打开IIS使用 搜索 关键字,您会看到 直接安装 关掉IIS 重新打开IIS在站点右边的控制面板可以看到一个UR ... »

手把手教你全家桶之React(三)--完结篇

前言 本篇主要是讲一些全家桶的优化与完善,基础功能 "上一篇" 已经讲得差不多了。直接开始: Source Maps 当javaScript抛出异常时,我们会很想知道它发生在哪个文件的哪一行。但是webpack 总是将文件输出为一个或多个bundle,我们对错误的追踪很不方便。Source maps ... »

react VS vue 我们究竟该如何选择(从项目的角度帮你分析)

一、序言 现在web开发最火的两个框架,react和vue。听起来就感觉很牛逼的样子。确实,不得不服,创造出这2种框架的人真的是牛逼。不过更牛逼的是为这2中框架不断完善的人。一个优秀的idea,会在很短的时间内被孵化、不断完善,这就是互联网的魅力。 好了,闲话不多说,我们进入正题。如果想看结论的,直 ... »

React-router v4教程

在这个教程里,我们会从一个例子React应用开始学习react router dom。其中你会学习如何使用 、`NavLink Switch exact`实现排他路由和浏览器路径历史。 也许学习react router最好的办法就是用react router dom v4来写一个多页的react应用 ... »

react-生命周期

表单 通过三种当时获取表单的数据 包含表单的组件分类 受控组件:表单项输入数据能够自动收集成状态,案例中的age字段 非受控组件:需要时才手动读取表单输入框中的数据,案例中的username和password字段 大部分推荐使用 ,因为其更符合react的思想,不需要进行DOM的操作,而且react ... »

redux 中间件 --- applyMiddleware 源码解析 + 中间件的实战

前传 中间件的由来 redux的操作的过程,用户操作的时候,我们通过dispatch分发一个action,纯函数reducer检测到该操作,并根据action的type属性,进行相应的运算,返回state,然后更新view。 但是一个很重要的问题,reducer对于action会立即进行运算,并返回 ... »

react 高阶组件的 理解和应用

高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件。(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装; 具体的是高阶组件的两种形式吧: a、属性代理(Props Proxy) 可以说是对组件的包裹,在包裹的过程中对被包裹的组件做了点什么 ... »

从 源码 谈谈 redux compose

compose,英文意思 组成,构成。 它的作用也是通过一系列的骚操作,实现任意的、多种的、不同的功能模块的组合,用来加强组件。 看看源码 https://github.com/reactjs/redux/blob/v3.7.2/src/compose.js 是不是感觉很简单,关键就这一句嘛,结果也 ... »

React+ANTD项目使用后的一些关于生命周期比较实用的心得

一定先写super 可以接收从父组件传来的值 父组件往子组件传值的方法 直接在组件中写属性名等于属性值就可以,有多少传多少 在子组件 ChildComponent 中获取父组件传来的值只需要用 就可以得到父组件传来的值 由此衍生一个问题,子组件如何给父组件传值 首先,需要在父组件定义一个方法(age ... »

关于react router 4 的小实践

详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 分割线 1、这个项目使用create-react-app搭建; 首先需要安装好create-react-app 安装完毕之后就是搭建项目; 安装完成之后,会自动打开localhost:3000 ... »

手把手教你全家桶之React(二)

前言 "上一篇" 已经讲了一些react的基本配置,本遍接着讲热更新以及react+redux的配置与使用。 热更新 我们在实际开发时,都有用到热更新,在修改代码后,不用每次都重启服务,而是自动更新。并而不是让浏览器刷新,只是刷新了我们所改代码影响到的模块。 关于热更新的配置,可看介绍 "戳这里" ... »

React 深入系列5:事件处理

> React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React。 Web应用中,事件处理是重要的一环,事件处理将用户的操作行为转换为相应的逻辑执行或界面更新。在React中,处理事件响应的方式有多种,本文将详细介... ... »

React 关于组件(界面)更新

在最近在学 React , 将组件的UI更新稍微整理了一下。根据业务要求,可能会出现如下的技术实现要求:1.更新自己2.更新子组件3.更新兄弟组件4.更新父组件5.父 call 子 function 6.子 call 父 function整理代码如下:更新自己: 更新儿子 更新兄弟: 更新兄弟, 就 ... »

React Suite v3.0 正式版发布

React Suite v3.0 正式版发布 相信很多人会好奇,React Suite 是什么? React Suite 是 HYPERS 前端团队和 UX 团队开源的一套基于 React 的 UI 组件库,能够帮助您快速构建一个企业级应用。 官网访问地址: rsuitejs.com 为什么选择 R ... »

React 深入系列4:组件的生命周期

> React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React。 组件是构建React应用的基本单位,组件需要具备数据获取、业务逻辑处理、以及UI呈现的能力,而这些能力是要依赖于组件不同的生命周期方法的。组件的生命... ... »

react源代码重点难点分析

网上已经有不少react源码分析文档,但都是分析主流程和主要功能函数,没有一个是从reactDOM.render()入口开始分析源码把流程走通尤其是把复杂重要的细节环节走通直到把组件template编译插入网页生效。 react源码设计太复杂,react的缺点就是把事情搞太复杂了,相比之下vue用简 ... »