前端MVVM框架—React
胡椒粉0121
这个作者很懒,什么都没留下…
展开
-
React框架简介、基本使用、jsx的理解和使用
React的基本认识Facebook开源的一个js库,结合生态库构成一个MV*框架,一个用来动态构建用户界面的js库React生态:React+React-Router+Redux+Axios+Babel+Webpack英文官网,中文官网React的特点Declarative(声明式编码) Component-Based(组件化编码) Learn Once, W...原创 2019-06-19 17:19:11 · 2254 阅读 · 0 评论 -
react16.8 antd按需加载配置(已经弹出和未弹出分别的配置)以及主题配置
误区,antd按需加载同样是需要先安装antd,只是通过插件的配置实现不用再进行样式的引入,可以直接引用antd组件进行开发怎样判断按需加载配置成功?通过组件引用的判断,在不引入antd样式的前提下,直接引入,使用组件,看组件样式是否有效,如果生效则按需加载配置成功完成的配置流程安装antdnpm i antd --save安装babel-plugin-impor...原创 2019-06-30 23:41:55 · 801 阅读 · 1 评论 -
react 的高阶组件
高阶组件的概念高阶组件就是接受一个组件作为参数并返回一个新组件的函数(也就是说高阶组件是一个函数,并不是组件)高阶组件的实现先来看看要做的案例的效果是怎么样的,下图效果中第一步:对组件进行拆分首先是外层相同的框为A组件,里面内容分别为B组件和C组件第二步:代码实现,首先搭建项目,然后分别创建A,B,C三个普通的组件import React, { Com...原创 2019-07-23 18:15:20 · 290 阅读 · 0 评论 -
react 中className和style的操作
在react中添加样式的方式有两种,一种是内联样式style的方式,另外一种就是添加className的方式原创 2019-07-19 13:47:59 · 1787 阅读 · 0 评论 -
监听页面滚动条
使用页面滚动条监听的场景通常我们在开发过程中会遇到一些需求,比如:当页面向上滑动或者向下滑动时,当页面滚动条滑动到某个位置的时候,当页面滚动或者停止滚动的时候,当页面滚动到顶部或者底部的时候,需要做一些页面上的处理,那么这个时候我们就需要监控页面的滚动条滚动条频繁触发的问题监听页面是否在滚动监听页面是否滚动到具体指定的某个位置(指定数值,顶部,底部)监听滚动条的方向(向上...原创 2019-07-19 13:54:36 · 3578 阅读 · 0 评论 -
react 组件的三大属性—refs
前言在react典型的数据流中,props传递是父子组件交互的唯一方式;通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然,就像react官网所描述的一样,在react典型的数据量之外,某些情况下(例如和第三方的dom库整合,或者某个dom元素focus等)为了修改子组件我们可能需要另一种方式,这就是ref方式。ref 简介React提...原创 2019-07-19 16:14:19 · 522 阅读 · 0 评论 -
react 组件的三大属性—props
Props的介绍每个组件对象都会有props(properties的简写)属性,组件标签的所有属性都保存在props中,所有组件标签的属性的集合对象作用:通过标签属性从组件外向组件内传递变化的数据 ,注意: 组件内部不要修改props数据首先来看一下一个简单的实例<!DOCTYPE html><html><head> <meta ...原创 2019-07-19 16:55:08 · 695 阅读 · 0 评论 -
react 项目架构设计
前言一般一个项目从零开始大家的时候都需要完善一些公共机制,基础插件的安装,目录结构的设计,页面组件的拆分等等........最开始接触前端的时候,是从简单的html、css、js开始的,当时盛行的WEB理念是结构样式行为相分离,即html、css、js分离,独立开发,互相之间通过link和script来互相调用。最开始我说接触到的小项目,都是直接将html、css、js等静态资源直接部...原创 2019-07-26 11:08:28 · 921 阅读 · 0 评论 -
react-router 的底层实现
发斯蒂芬原创 2019-08-09 11:27:12 · 169 阅读 · 0 评论 -
React16.8 搭建支持Less文件的开发环境
React 版本 16.8.4写这篇文章是因为个人想使用蚂蚁金服的AntD UI写个demo,中间遇到一些坑,网上找到的一些方案有点过时,所以解决问题后决定自己写点经验和大家分享。AntD是用less编写的,虽然可以直接引入CSS样式文件,但是为了方便修改AntD主题,我才在开发环境中添加了对less文件编译的支持。创建项目当前最新React版本是16.8.4.使用...原创 2019-06-29 20:27:49 · 559 阅读 · 1 评论 -
react 组件之间的通信
通过props传递共同的数据放在父组件上,特有的数据放在自己组件内部(state),通过props可以传递一般数据和函数数据,只能一层一层传递一般数据-->父组件传递数据给子组件-->子组件读取数据函数数据-->子组件传递数据给父组件-->子组件调用函数(相当于vue当中的自定义事件)案例在:react中使用Ajax请求(axios,Fetch)在这篇文...原创 2019-06-29 20:20:37 · 141 阅读 · 0 评论 -
redux详解
redux介绍学习文档:英文文档,中文文档,Githubredux是什么redux是一个独立专门用于做状态管理的JS库(不是react插件库),它可以用在react, angular, vue等项目中,但基本与react配合使用作用:集中式管理react应用中多个组件共享的状态redux工作流程将会把这个过程比拟成图书馆的一个流程来帮助理解Action Creato...原创 2019-06-29 20:20:01 · 516 阅读 · 0 评论 -
React 组件的基本理解和使用
模块与组件的定义模块:向外提供特定功能的js程序, 一般就是一个js文件 ,作用是复用js, 简化js的编写, 提高js运行效率组件: 用来实现特定功能效果的代码集合(html/css/js),因为一个界面的功能全部写在一个文件里太复杂了,复用编码, 简化项目界面编码, 提高运行效率模块化与组件化模块化:当应用的js都以模块来编写的, 这个应用就是一个模块化的应用组...原创 2019-06-19 17:31:49 · 196 阅读 · 0 评论 -
react 组件的三大属性—state
state的介绍state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)state的使用初始化指定constructor() { super() this.state = { stateName1 : stateValue1, ...原创 2019-06-19 17:50:21 · 264 阅读 · 0 评论 -
react-router 的理解和使用
路由的理解一个路由就是一个映射关系(key:value)。key为路由路径, value可能是function/component(某个对象的组件)后台路由node服务器端路由, value是function,用来处理客户端提交的请求并返回一个响应数据注册路由router.get(path, function(req, res))。当node接收到一个请求时,根据请求路径找到...原创 2019-07-08 17:01:08 · 894 阅读 · 0 评论 -
react 组件中的事件处理
react 组件中的事件处理的介绍通过onXxx属性指定组件的事件处理函数(注意大小写)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ,React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)onXxx={this.eventHandler}在组件中添加事件处理方法,通过event.target得到发生事件的DOM元素对象eventHand...原创 2019-06-29 17:34:03 · 849 阅读 · 0 评论 -
react 组件的组合使用(组件化开发)
组件化编写功能的流程拆分组件实现静态组件,只有静态界面,没有动态数据,也没有动态交互实现动态组件(实现动态数据初始化显示;实现交互功能)初始化显示拆分组件: 拆分界面,抽取组件,实现静态组件: 使用组件实现静态页面效果<!DOCTYPE html><html><head> <meta charset="UTF-...原创 2019-06-29 17:42:12 · 2899 阅读 · 0 评论 -
react 收集表单数据的两种方式
使用ref属性获取表单的数据非受控组件:需要时才手动读取表单输入框中的数据需求: 自定义包含表单的组件输入用户名密码后, 点击登陆提示输入信息 不提交表单<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>09_form</title>...原创 2019-06-29 17:49:27 · 1401 阅读 · 0 评论 -
react 组件的生命周期
React组件的生命周期介绍React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作组件对象从创建到死亡它会经历特定的生命周期阶段组件的三个生命周期状态: Mount:插入真实 DOM,Update:被重新渲染,Unmount:被移出真实 DOM生命周期流程需求: ...原创 2019-06-29 18:05:32 · 162 阅读 · 0 评论 -
虚拟DOM与DOM diff算法
虚拟DOM是什么?一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的)虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应,如果只是更新虚拟DOM, 页面是不会重绘的Virtual DOM 算法的基本步骤用JS对象树表示DOM树的结构;然后用这个树构建一个真正的DOM树插到文档当中当状态变更的时候,重新构造一棵新的对象树。...原创 2019-06-29 18:11:54 · 249 阅读 · 0 评论 -
React脚手架创建一个React应用以及项目目录结构详解
react脚手架用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果react提供了一个专门用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + babel + eslint使用脚手架开发的项目的特点: 模块化(js是一...原创 2019-06-29 18:26:01 · 4317 阅读 · 0 评论 -
react 中使用Ajax请求(axios,Fetch)
React本身只关注于界面,并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装)常用的ajax请求库jQuery:比较重,如果需要另外引入不建议使用axios:轻量级,建议使用,封装XmlHttpRequest对象的ajax,promise风格,可以用在浏览器端和node服务器端...原创 2019-06-29 20:13:35 · 7971 阅读 · 0 评论 -
react-router 实际项目中使用的
法师法师原创 2019-08-09 11:42:10 · 281 阅读 · 0 评论