![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
the_fool_
这个作者很懒,什么都没留下…
展开
-
【React】react学习笔记14-Hooks
目的:时隔数个月,为了跟随技术脚步,学习下React新特性,防止看别人代码懵逼。顺便完善下React快速学习专栏,略作笔记如下。官网地址:https://react.html.cn/docs/hooks-overview.html什么是HooksHooks是React v16.7.0-alpha 版本之后更新的一种 用于函数式编程的解决方案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。Demo环境:zxdeMacBook-Pro:~ zx$ no原创 2020-11-04 19:53:26 · 267 阅读 · 1 评论 -
【手记】React下不同分辨率下自适应方案
eg: //宽度变量 this.state = { windowWidth:document.body.clientWidth, }; componentDidMount() { window.addEventListener('resize', this.handleResize.bind(this)); } componentWillUnmount() { window.removeEventListe原创 2020-10-12 17:02:42 · 2083 阅读 · 0 评论 -
【ES6笔记】后端返回Map对象,前端遍历
1、返回对象结构const mapObj = { a: '1', b: '2',c:'3'};2、前端接收,默认为对象3、转换为ES6 map对象const map = new Map(Object.entries(mapObj));4、Apimap.entries():返回所有成员的遍历器。map.forEach():遍历 Map 的所有成员...原创 2020-07-10 16:27:48 · 1587 阅读 · 0 评论 -
【手记】chrome下将滚动条宽度设置为0
摘抄自地址:https://segmentfault.com/a/1190000019710081Firefox浏览器对于Firefox,我们可以将滚动条宽度设置为none:scrollbar-width:none;/* Firefox */IE浏览器对于IE,我们需要使用-ms-prefix属性定义滚动条样式:-ms-overflow-style:none;/* IE 10+ */Chrome和Safari浏览器对于Chrome和Safari浏览器,我们必...原创 2020-06-12 10:40:22 · 1919 阅读 · 0 评论 -
【React】关于样式覆盖问题持续总结
背景 React现有存在很多相关的三方库,社区很庞大,它们提供了很多封装好的线程组件供我们使用,提供了很便捷的快速搭建页面的能力。但是提供便利的同时,它也存在一些问题,曾给本菜鸡造成了很多麻烦。其中比较头大的问题就是 样式覆盖问题。什么是样式覆盖 简单来说,我们所引用的三方组件都是有自己样式的,并且提供了相关API来控制整体样式。以material-ui 为例: 其中:Button 组件提供了很多可调整的样式,但是需求就是需要一个非定制化的按钮(比如说圆形...原创 2020-06-11 11:50:43 · 2690 阅读 · 0 评论 -
【手记】lambda遍历匹配
之前的写法:。。。lambdalet currentTodo = []if(Arrays.isArray(todoList)){ currentTodo = todoList.find(todoItem => todoItem.seq === seq);}原创 2020-06-05 11:04:18 · 198 阅读 · 0 评论 -
【笔记:跨域axios-springboot2】axios解决跨域问题方案
系统环境信息后台:springboot2前端:zxdeMacBook-Pro:bin zhangxu$ node -vv12.16.3zxdeMacBook-Pro:bin zhangxu$ npm -v6.14.4"axios": "^0.19.0",请求发送代码://设置 Content-Type axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';.原创 2020-05-29 16:17:15 · 295 阅读 · 1 评论 -
【笔记本】React 代码中遍历list与map(对象),自执行函数DEMO
React 代码中遍历,自执行函数 const {resultData} = this.state; if (!Array.isArray(resultData)) { return; } resultData.map((item,index) => { const title = item.title; const extMap = item.extMap; const element = ( <Col xxs={24}原创 2020-05-21 15:05:49 · 1497 阅读 · 0 评论 -
【React笔记】setState之后执行某个函数+函数间流程控制
目的:由于setState({a:''1})是异步操作,如果想setState成功后再执行某个函数:this.setState({disableFlag:true},function () { this.getTab2Data(); })...原创 2020-02-25 10:48:32 · 4517 阅读 · 1 评论 -
js属性作为对象的Key
参考转载:JS如何将变量作为一个对象的Key地址:https://www.cnblogs.com/robinunix/p/11543775.htmlvarlast='last';vara = {'first':'hello',[last]:'world'};a['first']// "hello"a[last]// "worl...原创 2020-02-04 14:53:01 · 586 阅读 · 1 评论 -
【React】两种样式文件引用约定->解决样式不生效问题
文件目录结构图(不同的命名方式):两个scss的内容:.test { background-color: #5e83fb !important;}引用文件的两种方式:方式1:import styles from './index.module.scss';方式2:import './index.scss';方式1的使用方式(react编译器会将文件编译成作...原创 2020-01-14 15:21:28 · 3414 阅读 · 0 评论 -
【React】路由组件跳转页面并存储参数
记录目前用的比较舒服的方式:1、跳转<Button type="secondary" size='small' > <Link to={{ pathname: '/base/strategyList',search:id+'', query: {sceneId:id,record:record} }}>查看</Link>...原创 2019-10-17 11:21:12 · 1550 阅读 · 2 评论 -
【npm】mac下node环境搭建
安装node基础环境:官网:https://nodejs.org/en/直接下载安装即可。验证方法:zxdeMacBook-Pro:~ zhangxu$ npm -v5.6.0zxdeMacBook-Pro:~ zhangxu$ 安装node管理工具nvm:(mpm管理器,管理多个npm版本,随时可以切换)下载安装:1、启动终端Termina...原创 2019-10-17 11:19:58 · 185 阅读 · 0 评论 -
【记录】Kubernetes (K8s)安装文档
Kubernetes (K8s)is an open-source system for automating deployment, scaling, and management of containerized applications。简单说就是一个管理容器的中间件,集成可视化的发布流程,有钱的小伙伴可以购买云平台相关产品,更加稳定,比如:阿里云-云效EDAS。...原创 2019-10-17 11:17:46 · 94 阅读 · 0 评论 -
【React】react学习笔记13-Redux(部分文案摘抄自官网)
官网:https://www.redux.org.cn/目的:Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 (如果你需要一个 WordPress 框架,请查看Redux Framework。)可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。不仅于此,它还提供 超爽的开发体验,比如有一个时间旅行调试器可以编辑后实时预...原创 2019-10-17 11:12:31 · 123 阅读 · 0 评论 -
【React】react学习笔记12-记录箭头函数的传值方法
import React,{Component} from 'react';export default class Main extends Component{ constructor(props){ super(props); this.state={ num:0 } } // 在回调函数...原创 2019-10-17 11:08:09 · 468 阅读 · 0 评论 -
【React】react学习笔记11-路由
官网:react-router官网:https://reacttraining.com/react-router/web/guides/quick-start使用:这个官网文档比较干净简洁,写的很清楚的,所以我直接抄的(吐槽百度竟然首页没有,我用谷歌搜到的):1、脚手架创建一个项目:npm install -g create-react-appcreate-re...原创 2019-10-17 11:07:20 · 267 阅读 · 0 评论 -
【React】react学习笔记10-兄弟组件间的传值
上一篇博文简述了脚手架的使用,以及在ws中的简单配置,详细的配置方法就不讲了,可能有很多细节,在日常使用中发掘就好。然后是脚手架的项目结构以及之间的联系,这个完全可以自己找出来,再不济就百度一下就好。 今天记录一下组件之间的传值问题,特别是兄弟组件的传值,真的是为难了我好久的一个问题:要做啥呢?:方便兄弟组件中传值,我知道的实现方式有两种,一种是使用React Context,...原创 2019-10-17 11:04:32 · 593 阅读 · 2 评论 -
【React】react学习笔记09-使用脚手架开发
安装npmNpm(Node Package Manager) 是node的包管理工具,每个包都是一个模块,所以也可以说npm是node的模块管理工具。网络上已经有很多的资料,安装过程比较简单,这里不做介绍。通过npm安装React脚手架命令如下:#查看库所在的目录zxdeMacBook-Pro:~ zhangxu$ npm root -g/Users/zhangxu...原创 2019-10-01 11:08:39 · 108 阅读 · 0 评论 -
【React】react学习笔记08-生命周期
记录一些基本的资料,生命周期这种东西在项目中会有很深刻的体会的,所以没必要死记硬背~常见的方法: componentWillMount在渲染前调用,在客户端也在服务端。 componentDidMount: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaS...原创 2019-10-01 10:34:22 · 204 阅读 · 0 评论 -
【React】react学习笔记07-综合应用todoList
todoList是react学习的一个祖传Demo,估计学过的都写过哈哈。这个demo比较简单,包含了三个组件,然后整合了之前学到的所有东西,只要能够自己把这个demo写出来,那么基本上就可以做项目了。 博主上半年遇到个中后台项目,React框架,之前也从没见过React是个啥玩意,于是找了个视频看完了第一集,TodoList,比这个稍微多一个删除功能,然后照着自己写了一个。之后就...原创 2019-10-01 09:55:44 · 147 阅读 · 0 评论 -
【React】react学习笔记06-React多组件父子传值
前文讲到,React是面向组件来开发的,那么组件之间是怎样配合的呢?父组件传参子组件:下面我定义了两个组件,上层组件为Component,子组件为SubComponent。父组件调用子组件的时候,通过props属性传递了两个参数,分别为:times以及clickEvent<div> <p>=========将父组件中的state值与函数传递给子组件...原创 2019-09-30 11:00:25 · 373 阅读 · 0 评论 -
【React】react学习笔记05-React组件对象的三大属性-引用【ref】
作用:获取到某个指定的dom。用处(并不推荐过多使用):第一:管理焦点,文本选择,媒体播放(媒体回放)第二:触发动画第三:集成第三方的DOM库用法DEMO:点击submit按钮,会将input的值打印到控制台上,但是要注意,这种方式已经过时。<!DOCTYPE html><html><head> &...原创 2019-09-29 09:32:56 · 191 阅读 · 0 评论 -
【React】react学习笔记04-React组件对象的三大属性-属性值【props】
定义用于接收上层组件传入的参数的对象!DEMO这里是一个简单的传值到组件内部的demo:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>React Tutorial</title></head>&...原创 2019-09-27 19:13:32 · 441 阅读 · 0 评论 -
【React】react学习笔记03-React组件对象的三大属性-状态【state】
今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!:作用:组件内部数据交互的容器对象!上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例:// 方式二:(复杂组件)类组件【ES6】,这是一个基本的类组件 class Component extends React.Co...原创 2019-09-27 17:34:49 · 204 阅读 · 0 评论 -
【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件。 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可。 步骤: 1、定义组件 a、轻量组件-函数组件(局限性:只能用在没有state、prop属性的场景,后面会解释)// 方式一:(轻量组件)函数组件function Co...原创 2019-09-27 17:29:12 · 111 阅读 · 0 评论 -
【React】react学习笔记01-概念与基本使用
俺为啥要学这玩意: 家里的杂事好不容易处理完了,开始正式静下心来学习~博主是做后端开发的,js基础不深,之前也是用React写过许多东西了,但是基本上都是用的CV大法,别人的组件修修改改拿来就用,总感觉自己在使用上还有很大的欠缺,所以从头开始系统的学习。 而博客是我的笔记,也是自我归纳整理的过程,说不定也能不小心帮助到那个有兴趣的同学,何乐而不为呢?所以把我的学习过程分...原创 2019-09-27 17:25:19 · 99 阅读 · 0 评论