React
七月是我的生日
人生太苦,但你要甜!
展开
-
React开发中的一些问题(待补充)
1.redux修改数据引起的性能问题上一篇redux文章中讲到了,我们在reducer中重新修改数据的时候,需要复制一份state(浅拷贝),防止我们原本的数据被修改,之后进行数据修改。我们在文件中的代码如下所示:function reducer(state = defaultState, action) { switch(action.type) { case actionTypes.CHANGE_TOP_BANNERS: return {...sta原创 2020-09-23 01:14:20 · 192 阅读 · 0 评论 -
记一次愉快项目开发中详细使用redux的过程(配置 + 数据请求)
写在前面在现在我对于redux的了解基本就属于会做一些简单操作,但是真正在开发中去做一写请求什么的,绝壁狗die,所以我来重新整理一次开发中redux的使用过程,理理思路。虽然现在我不会,maybe,写完这个文章我就豁然开朗了。------------------------------------------------------------------------------------------------------------------------------------第一部分首先说原创 2020-09-21 21:42:08 · 974 阅读 · 3 评论 -
React项目开发准备流程
1.云音乐项目规范1.项目介绍。。。。。。2.项目规范项目开发规范以及代码风格1.文件夹和文件名称统一使用小写,多个单词以连接符(-)连接。2.JavaScript变量名称采用小驼峰标识,常量全部使用大写字母,组件采用大驼峰。3.CSS采用普通CSS和styled-component结合来编写(全局采用普通CSS,局部采用styled-component)4.整个项目不在使用class组件,统一使用函数式组件,并且全面拥抱Hooks5.所有的函数式组件,为了避免不必要的渲染,全部是同原创 2020-09-19 17:38:12 · 928 阅读 · 0 评论 -
React-Hooks从0到1
1:为什么需要react-HooksHook 时react 16.8的新增特性,它可以让我们在不编写class的情况下使用state以及其他的react特性(比如生命周期)class组件相对于函数式组件的优势(1)√√√ class组件可以定义自己的state,用来保存组件内部的状态。xxx 函数式组件不可以,因为函数每次调用都会产生新的临时变量。(2)√√√ class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻辑。比如在componentDIdMount种发原创 2020-09-17 20:18:07 · 364 阅读 · 0 评论 -
react-router深入浅出
1.改变页面路由的两种方式监听hash的改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bo原创 2020-09-15 21:56:49 · 293 阅读 · 0 评论 -
React --- 深入浅出redux
1.为什么需要redux?2.redux核心理念StoreActionreducer3.redux三大原则原创 2020-09-12 17:04:20 · 205 阅读 · 0 评论 -
React中过渡动画以及纯函数的使用
在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验。当然,我们可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-group用来完成过渡动画。React曾为开发者提供过动画插件react-addons-css-transition-group,后由社区维护,形成了现在的react-transition-gro这个库可以帮助我们方便的实现组件的入场和离场动画,使用时需要进行额外的安装:1.学习使用 react-tra.原创 2020-09-08 22:05:13 · 258 阅读 · 0 评论 -
React中axios的封装和使用
1.axios库的使用axios: ajax i/o system.主要作用于发送请求的等。axios是目前前端使用非常广泛的网络请求库,包括Vue作者也是推荐在vue中使用axios ;响应、转换请求和响应数据等等;主要特点包括︰在浏览器中发送XMLHttpRequests请求、在node.js中发送 http请求、支持Promise API、拦截请求和响应数据等。2.axios的基本使用(promise)第一步: 安装axios npm install axios==第二步:原创 2020-09-08 21:08:45 · 15036 阅读 · 1 评论 -
React AntDesign库的使用以及其他补充
1.react中动态添加class1.react原生添加classReact在jsx语法中给了我们开发者足够多的灵活性,你可以想编写javascript代码一样,通过一些逻辑来决定是否添加某些class。{/* 需求:当isActive为true的时候就是增加active的类名,否则不增加 */}<h3 className={"title " + (isActive ? "active" : "")}></h3><h1 className={["title",(is原创 2020-09-07 22:59:48 · 597 阅读 · 0 评论 -
React中的四种样式使用优缺点比较
1.组件化天下下的CSScss的设计就不是为组件化而生的,所以在目前组件化的框架中都在需要一种合适的CSS解决方式。组件化中选择合适的CSS解决方案应该符合以下条件:1.可以编写局部的css:css具备自己的局部作用域,不会随意污染其他组件内部的样式。2.可以编写动态的css:可以获取当前组件的一些状态,根据状态的变化生成不同的css样式。3.支持所有的css特性:伪类,动画,媒体查询等。4.编写起来简单方便,最好符合一贯的css风格特点,2.React中的CSS3.react中常见原创 2020-08-31 13:14:52 · 1298 阅读 · 0 评论 -
React知识点补充
1.setState不可变的数据首先明确一点为了保证PureComponent以及我们为了实现项目优化自己写的shouldComponent能够正确渲染页面,setState不允许直接修改state中的数据,我们最好是将其备份一份,然后进行修改。shouldComponentUpdate()传过来了两个参数nextProps, nextStatenextProps : 最新的propsnextState : 最新的state每一次在内部进行浅层比较,props以及state是否发生了变化,原创 2020-08-29 14:24:59 · 181 阅读 · 0 评论 -
React setState一些解析以及 react性能优化
详解setState1.开发中我们并不能直接通过修改state的值来让界面发生更新:因为我们修改了state之后,希望React根据最新的State来重新渲染界面,但是这种方式的修改React并不知道数据发生了变化;React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化;我们必须通过setState来告知React数据E经发生了变化;2.setState函数是我们继承的Component原型中定义的。3.setStat原创 2020-08-23 16:40:15 · 729 阅读 · 0 评论 -
React 父子组件传值 && React生命周期
1.react生命周期react生命周期:很多的事物从创建到销毁的整个过程,这个过程被称之为声明周期React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能;生命周期和生命周期函数的关系:生命周期是一个抽象的概念 ,在生命周期的整个过程,分成了很多个阶段;1.比如装载阶段( Mount), 组件第一次在DOM树中被渲染的过程 ;2.比如更新过程( Update ), 组件状态发生变化,重新更新渲染的过程;3.比如卸载过程( Unmount) , 组件从D原创 2020-08-04 18:57:23 · 776 阅读 · 0 评论 -
React -05react脚手架解析
react脚手架的详细解析1.前端工程的复杂化1.如果我们只是开发几个小的demo程序 ,那么永远不需要考虑一些复杂的问题 :比如目录结构如何组织划分;比如如何管理文件之间的相互依赖;比如如何管理第三方模块的依赖;比如项目发布前如何压缩、打包项目;等等…2.现代的前端项目已经越来越复杂了 :不会再是在HTML中引入几个css文件,引入几个编写的js文件或者第三方的js文件这么简单;比如css可能是使用less、 sass等预处理器进行编写,我们需要将它们转成普通的css才能原创 2020-08-04 16:02:01 · 190 阅读 · 0 评论 -
React -04 组件化开发(1)
1.JSX的本质1.jsx使用没问题,但是去掉 type=“text/babel” 就会报错jsx --> babel -> React.createElement();<script type="text/babel">const message = <h2>Hello World!</h2>ReactDOM.render(message,document.getElementById('app'));</script>原创 2020-06-27 21:05:47 · 344 阅读 · 0 评论 -
React 03 - JSX核心语法(2)
1.JSX核心语法21.1 图片格式处理如果说原本的图片是400px * 400px的大小.而我需要展示的仅仅为 120px * 120px.这样就会降低浏览器性能。1.http请求大的图片,降低性能。2.浏览器处理图片又需要小号性能。解决方法:处理地址参数;//图片格式处理函数function getSizeImage(imgUrl, size){ return imgUrl + `?param=${size}x${size}`;}1.2 jsx绑定属性(基本属性原创 2020-06-22 14:11:20 · 206 阅读 · 0 评论 -
React ----- 02 react JSX语法(1)
1 复习:JavaScript中类的定义1.1 ES5中类的定义// ES5中定义类function Person(name,age){ this.name = name; this.age = age;}//函数一般加在原型上Person.prototype.say = function(){ console.log(this.name,this.age,'say');}var p = new Person('kobe','40');consol.原创 2020-06-21 23:02:51 · 191 阅读 · 0 评论 -
React ----- 01 react初识
1.什么是react?官方解释: 用于构建用户界面的JavaScript库。对于web端开发人员而言,主要离不开三个技术。html -> 构建页面结构css -> 构建界面样式javascript -> 构建页面内容和交互jQuery -> vue react Anaular2.react的特点1.声明式编程声明式编程是目前整个大前端开发的模式:Vue、react,angular。它允许我们只需要维护自己的状态,当状态改变时,React可以根据最新的状态区原创 2020-06-21 00:42:16 · 178 阅读 · 0 评论