React学习笔记
文章平均质量分 80
wuqingdeqing
生如逐放 心有焰藏
展开
-
React学习笔记(一)——React基础
笔者最近接手了一个项目,其为前后端分离,前端使用React,后端使用Java,因本人之前从未使用过React,故决定学习一些关于React的基础知识,以备后续使用。如有谬误,欢迎指正。1.1 React简介React把用户界面抽象成一个组件,通过这个抽象,把代码和真实渲染目标隔离开。1.1.1 专注视图层React并不是完整的MVC/MVVM框架,它专注于提供清晰、简洁的View层...原创 2018-12-17 10:21:49 · 306 阅读 · 1 评论 -
React学习笔记(二)——React深入
2.1 事件系统React基于Virtual DOM实现了一个SyntheticEvent层,定义的事件处理器会接收到一个SyntheticEvent对象的实例。2.1.1 合成事件的绑定方式React事件的绑定方式在写法上与原生的HTML事件监听器的属性很相似,并且含义和触发的场景也全都是一致的。2.1.2 合成事件的实现机制在React底层,主要对合成事件做了两件事:事件委...原创 2018-12-23 12:45:49 · 485 阅读 · 0 评论 -
React学习笔记(三)——React源码
3.1 初步React源码的组织结构如下:其中renderers是React代码的核心部分,包含了大部分功能的实现。其结构如下:3.2 Virtual DOM模型该模型负责Virtual DOM底层框架的构建工作,它拥有一整套的Virtual DOM标签,并负责虚拟节点及其属性的构建、更新、删除等工作。3.2.1 创建React元素创建过程如下:const N...原创 2019-01-06 14:04:52 · 345 阅读 · 0 评论 -
React学习笔记(四)——Flux架构
4.1 MV*和Flux4.1.1 MVC/MVVM这两种模式简称MV*模式,其中MVVM是从MVC演进而来的。MVC模型如下:MVVM如下:4.1.2 Flux解决方案其模型如下:4.2 Flux基本概念Flux应用简化执行流程如下:4.3 解读4.3.1 Flux核心思想Flux的中心化控制让所有请求和改变都只能通过action发出,...原创 2019-01-06 21:37:07 · 987 阅读 · 0 评论 -
React学习笔记(五)——Redux应用架构
5.1 Redux简介5.1.1 是什么核心运作流程如下:5.1.2 三大原则1.单一数据源使用单一数据源的好处在于整个应用状态都保存在一个对象中,这样可以随时提取出整个应用的状态进行持久化。此外,这样的设计也为服务端渲染提供可能。2.状态只读在Redux中,并不会用代码来定义一个store。而是定义一个reducer,它的功能时根据当前触发的action与当前应用...原创 2019-01-07 22:05:16 · 210 阅读 · 0 评论 -
React学习笔记(六)——高阶Redux
6.1 高阶reducer高阶reducer就是将reducer作为参数或者返回值的函数。6.1.1 reducer的复用6.1.2 reducer的增强高阶reducer主要通过3点来增强reducer:能够处理额外的action。能够维护更多的state。将不能处理的action委托给原始reducer处理。6.2 Redux与表单6.2.1 使用Redux...原创 2019-01-09 23:23:56 · 218 阅读 · 0 评论 -
React中不同组件同行
在用React的时候发现,两个不同组件用的时候会默认换行,研究了一段时间发现一种同行的方式,如下:<div> <div style={{display:'inline-block'}}> <Input/> </div> <div style={{display:'in...原创 2019-07-02 16:32:38 · 1777 阅读 · 0 评论 -
React项目中使用Font Awesome
要想在前端项目中使用图标,按原来的写法,就是先去官网下个包,然后link引入到页面,然后再使用。但发现npm中竟有@fortawesome/react-fontawesome可以直接用,不禁大喜过望,现将使用流程总结如下:首先是要用npm把组件相关都安装一下:$ npm i --save @fortawesome/fontawesome-svg-core$ npm i --save @...原创 2019-07-02 17:27:43 · 1561 阅读 · 0 评论 -
react-router-dom升级至v4.0.0以上后刷新失效问题
项目进展过程中,将react-router-dom升级至v4.0.0以上,随后引发了页面跳转过程中的诸多问题,查知源码升级到4以上后发生了诸多变化,如不允许<Router>的多层嵌套等。做了一些适配修改后,最终仅剩一个问题,刷新时,始终是404。后查找及尝试发现一层嵌套时,将外层<Router>换成<HashRouter>即可解决无法刷新的问题,特此记之。...原创 2019-06-24 15:24:35 · 909 阅读 · 0 评论