ReactJs
百奇
这个作者很懒,什么都没留下…
展开
-
typeDoc使用记录
我使用的是gulp-typedocgulp-typedoc参考文档typescript文档化工具——Typedoc记录坑1、找不到typescript模块 但是 我用yarn typescript -v 是可以看到typescript的版本号的然后我就尝试重新 yarn add typescript 安装完成后重新 yarn gulp typedoc 结果就成功了就能狗看到根目录有了doc文件夹 打开以后是点击globals.html就能看到我们用typescript编写的函数了(我原创 2020-08-31 13:59:46 · 1546 阅读 · 0 评论 -
React 属性和状态的对比
相同点1、都是纯JS对象2、都会触发render的更新3、都具有确定性不同点如何区分组件在运行时 需要修改的数据就是状态原创 2018-11-28 17:58:45 · 446 阅读 · 0 评论 -
React组件的协同使用
什么是组件协同使用组件的协同本质上是对组件的一种组织和管理方式目的:逻辑清晰代码模块化封装细节代码可复用如何实现有两种方法 第一种嵌套实现封装使用一个父组件来包含所欲的子组件第二种抽离实现复用找出子组件的共同点...原创 2018-12-01 19:00:42 · 140 阅读 · 0 评论 -
React 商品流加订单评价功能实战
在敲代码时遇到的坑:1、再为评分的几颗星添加类名时 两个类名之间是需要添加空格的 在React中 添加空格可以这样 {“ ”}所以我的解决办法就是return <span className={"orderItem__stars" +" "+ lightClass} onClick={this.handleClickStars.bind(this,item)} key={index...原创 2018-12-12 17:26:39 · 473 阅读 · 0 评论 -
React表单详解
不可控组件和可控组件介绍不可控组件如下:<input type="text" defaultValue="Hello World"/>input元素中有个默认值 为HelloWorld这个字符串 我们知道React组件是将数据绑定到状态中 如上给input元素直接绑定了默认值 这样有可能使元素的值和组件中状态绑定的原创 2018-12-10 17:21:19 · 181 阅读 · 0 评论 -
React 学习总结
学习了react的顶层API和组件API 对这些方法有了新的系统的认识,在阅读他们的简介时有时候会有困难 读了好几遍才懂复习了组件的生命周期,以前学过有个很好的图片示例 贴在了下面方便理解,对一些生命周期函数以及可以在方法中进行的操作有了大致的理解下面是我在网上找到的一些知识点的总结 也加入了一些自己的标记为方便以后学习查阅日期:2019/3/11React顶层APIReactRea...原创 2019-03-19 09:44:17 · 254 阅读 · 0 评论 -
dva+react页面分条件渲染组件
今天遇到一个难题 想要根据id值得不同来渲染不容的echart图表 在网上找了好久以后找到了一个方法即 用元素变量的方法 具体如下 let chart = null; if(this.state.whichChart == 1){ chart = <BasicCharts {...barLineProps}/> ; };...原创 2019-06-18 18:00:10 · 364 阅读 · 0 评论 -
关于前端下载图片打压缩包的办法---JSZip
最近项目需求是要将echart图片批量下载下来并且打包成zip包咨询公司大佬以后给了个解决办法 用jsZip这个工具git地址是:https://stuk.github.io/jszip/简单好用非常好理解,只需要引入jsZip以后将要下载的图片的base64码、图片名称、图片类型等传入就好了具体代码附上import JSZip from 'jszip';const zip = ne...原创 2019-08-08 16:55:25 · 2751 阅读 · 0 评论 -
Echarts____坐标轴的名称显示不全,换行操作
实现效果如图 X轴的名称是可以换行的,具体代码是:{ gridIndex:2, data:xAxisData3, axisLabel:{ ...原创 2019-08-09 16:52:41 · 3897 阅读 · 0 评论 -
状态的含义和用法
state状态:事物所处的状况状态是由事物自行处理的不断变化的、在React中状态是事物的私有属性 不由父组件或子组件决定状态的用法getInitialState:初始化每个实例特有的状态setState:更新组件的状态回顾一下setState会触发的行为,如果使用setState来更新行为那么组件就会采用diff算法,diff算法会判断state变化之后的结果和目前页面上的结果有什么...原创 2018-11-28 17:43:12 · 1037 阅读 · 0 评论 -
React事件处理函数的使用 绑定事件处理函数
触摸事件:一般在移动设备中onTouchCancelonTouchEndonTouchMoveonTouchStart键盘类的事件onKeyDownonKeyPressonKeyUp剪切类事件onCopyonCutonPaste表单类事件onChangeonInputonSubmit,一般用于禁止表单的默认事件 因为表单在提交的时候默认是会跳转页面 当我们不希望页...原创 2018-12-01 17:33:01 · 294 阅读 · 0 评论 -
属性的含义和用法
含义:props=properties属性:一个事物的性质和关系 属性是不可以由组件自己修改的用法:1、直接在调用组件的时候传入一个键值对<HelloWorld name = ? />问号处可以填字符串(“Tom”)、大括号大括号中填写求值表达式 可以是数字({123}) 字符串({“Tom”})、数组({[1,2,3]})、传入变量({variable...原创 2018-11-28 16:28:24 · 707 阅读 · 0 评论 -
Emmet与html相关的语法
子代 :>示例:在sublime 软件中输入div>ui>li按tab键显示的内容为<div> <ul> <li></li> </ul></div>每个尖括号代表一个子代兄弟:+示例:在sublime中输入div+p+dp按tab键显示为<div原创 2018-11-23 21:52:03 · 111 阅读 · 0 评论 -
JSX简介
React程序结构介绍React程序使用了JSX写在js中在sublime中输入HTML:5按tab键 会自动生成HTML5文档结构sublime运行HTML的快捷键是Ctrl+Alt+VJSX语法及特点介绍JSX = JavaScriptXml在JavaScript中编写像XML的语言 仅仅长得像XML,在本质上是不一样的JSX是:基于ECMScript的一种新特性一种定义...原创 2018-11-25 18:21:57 · 235 阅读 · 0 评论 -
非DOM属性介绍
Reat中的非DOM属性:dangerouslySetInnerHtml、ref、keydangerouslySetInnerHtml:在JSX中直接插入HTML代码 动态的写入代码ref:父组件引用子组件key:引入Key的目的是提高渲染性能React diff算法流程图 引入Key的目的是给每个节点加上唯一的标识,React通过Key就知道原有节点还是用户自定义dangerous...原创 2018-11-26 14:17:31 · 233 阅读 · 0 评论 -
React 组件协同使用之组件嵌套
1、组件嵌套的含义组件嵌套的本质是父子关系父组件与子组件的通信关系父组件通过属性与子组件通信子组件向父组件通信是一个间接的关系 父组件中的事件处理函数被子组件触发 子组件触发事件后 然后父组件进行处理 比如 子组件有个点击事件Click 然后父组件有个handelClick函数 并且通过属性传递给子组件 然后子组件会绑定到自己的点击事件上 当子组件进行点击事件的时候触发的就...原创 2018-12-02 15:56:47 · 213 阅读 · 0 评论 -
React 组件协同之Mixin
1、Mixin的含义Mixin = 一组方法(函数)Mixin的目的是横向抽离出组件的相似代码相似概念:面向切面编程、插件2、优缺点优点:代码复用:抽离出通用代码,减少开发成本,提高开发效率即插即用:可以直接使用许多现有的Min新来编写自己的组件适应性强:改动以此代码,影响多个组件缺点:编写难度高:Mixin可能被用在各种环境中,兼容多种环境就需要更多的逻辑和代码,通用的代价是...原创 2018-12-02 19:47:50 · 305 阅读 · 0 评论 -
React组件生命周期详解
什么是生命周期有三个阶段组成:初始化、运行中、销毁组件本质上是状态机,输入确定、输出确定状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出响应。可以用事件的思路来理解状态初始化阶段初始化阶段可以使用的函数:1、getDefaultProps:只能调用一次,实例之间共享引用在js中有两种类型的数据:第一种是值类型的比如 数字,字符串 布尔值;另一种是引用类型的数据有 对...原创 2018-11-27 22:38:51 · 156 阅读 · 0 评论 -
React属性和状态实战
项目分析编写一个简单的文章评论框分析构成项目的组件评论框评论的内容 评论框为父组件分析组件的关系及数据传递父子组件之间得传递一个评论对象的数据编写代码...原创 2018-11-30 17:35:52 · 119 阅读 · 1 评论 -
事件对象介绍
事件对象使用方法handleChange:function(event){ console.log(event.target.value);}event:即为事件对象target:事件对应的DOM元素event.target:事件对象的属性不同事件对象介绍1、通用(所有的事件对象都有的属性):boolean bubbles(事件是否可以冒泡)bollean cancelab...原创 2018-11-30 21:42:00 · 410 阅读 · 0 评论 -
ReactJs 简介
React的开发背景:是FaceBook官方推出的React自动DOM操作状态对应内容React的特点1、简单2、声明式React的核心是组件,组件的设计目的是提高代码的复用率,降低测试难度和代码复杂度提高代码复用率:组件将数据和逻辑封装,类似面向对象中的类降低测试难度:组件高内聚低耦合,很容易对单个组件进行测试降低代码复杂度:只管的语法可以极大提高可读性...原创 2018-11-23 17:46:02 · 188 阅读 · 0 评论