![](https://img-blog.csdnimg.cn/0f8f33985c764adab091386ace993654.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
❤️❤️--react全家桶
文章平均质量分 76
是时候学习react了,一起学习吧~
suoh's Blog
My life is a straight line,turning just for you.
展开
-
【react全家桶学习】react的 (新/旧) 生命周期(重点)
相对比vue的生命周期,react显得复杂的多,光从名称上就比vue长,所以做好准备,不要放弃,坚持就是胜利、原创 2023-06-27 17:50:04 · 7607 阅读 · 5 评论 -
【react全家桶学习】react组件中的ref属性(详)
这是因为在每次染时会创建一个新的函数实例,所以 React 清空旧的 ref 并且设置新的。而Vue中的ref可能比较简单(直接this.$refs.xxx就可以),这一篇主要讲一下如何在React中使用ref,以及使用ref的场景。不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref。Refs 通常在 React 组件的构造函数中定义,或者作为函数组件顶层的变量定义,然后附加到 render() 函数中的元素。原创 2023-05-04 15:08:29 · 1006 阅读 · 0 评论 -
【react全家桶学习】react中组件的props属性(详)
(这种情况几乎不存在,在构造器中我们可以直接访问props而不是this.props,因此在实际开发中构造器就是能省略就省略,作用不大)应该加上花括号,react才会去读取花括号里面的东西(还记得vue里面吗,vue是在变量名加上冒号,代表读取变量,如。构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props。学过了vue的props属性,那react中的props属性如何使用呢?如果属性特别多,我们通过上面的方式传递十分繁琐,那如何批量传递呢?原创 2023-04-27 16:38:54 · 1875 阅读 · 1 评论 -
【react全家桶学习】react中组件定义及state属性(超详/必看)
重点是这一句:this.testFunc = this.testFunc.bind(this) 代表的含义就是,将原型上的testFunc函数通过bind改变this指向(使其指向index组件实例)返回一个新的函数重新赋值给testFunc函数,这样testFunc函数的this指向就正常了、那构造器的this以及render中的this均指向index组件实例,怎么就函数的this出现了undefined?2、组件是用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。原创 2023-04-26 11:12:52 · 2384 阅读 · 0 评论 -
【react全家桶学习】react中JSX语法规则
JSX的定义全称: JavaScript XMLreact 定义的一种类似于 XML的JS 扩展语法:JS +XML本质是 React.createElement(component,props,...children)方法的语法糖,作用:用来简化创建虚拟 DOM原创 2023-04-24 14:17:33 · 754 阅读 · 0 评论 -
【react全家桶学习】如何创建一个react组件(超详)
方式(2):使用less,给每个组件都定义一个总的class名,然后嵌套编写样式即可,当然实际开发中还是第二种方式用的多,第一种相对繁琐。问题6:我们可以看到在app.js文件中引入组件的时候比较麻烦,重复的名称较多,如何处理?保存看下效果,我们看到两个组件的背景色变成一致了,优先使用的后引入的 class名称的样式。后缀名,可以直接将组件的js文件后缀名改为jsx,当然引入的时候js和jsx后缀都可以省略。此时引入的时候就可以省略index,简洁了很多、命名,将组件js文件的首字母大写,代表组件js。原创 2023-04-17 15:01:32 · 1014 阅读 · 1 评论 -
【react全家桶学习】jsx语法如何在vscode中自动补全标签
我们在编写react的代码时,用到jsx语法,在js文件中输入html标签无法自动提示补全,很不方便,因此我们通过下文去解决该问题,提升开发效率。一、快速打开vscode中的settings.json。可以看到,此时再输入标签就有提示了~2、直接打开右上角的小图标即可。二、加入这行代码,保存即可。原创 2023-04-17 11:03:02 · 1286 阅读 · 0 评论 -
【react全家桶学习】初始化react脚手架及项目结构讲解
其实就是当我们想要编写移动端的时候,如果使用专门开发android或者ios的人员去开发,代价及技术成本相对较高,因此我们会使用应用加壳技术来实现,通过编写移动端html网页,然后编写完之后套一个壳最终打包为apk文件,当我们在手机上安装之后,其实打开时是我们的壳,里面嵌套的是html网页。这样就极大节省了人力,提升了开发效率也能达到同样的效果。因此manifest.json就是为了配置加壳后的apk应用的名字、权限、图标以及访问应用设备权限。了解了react脚手架及项目结构后,就进入正式的学习啦~原创 2023-04-14 16:35:51 · 1676 阅读 · 0 评论 -
【react全家桶学习】react简介
react是用于构建用户界面的JS库,是一个将数据渲染为HTML视图的开源JS库。用于构建 Web 和原生交互界面的库。由Facebook开发,且开源。中文官网 React。原创 2023-04-13 15:13:37 · 404 阅读 · 0 评论 -
react中ajax的封装与调用
ajax的封装:import $ from 'jquery'function ajax(url,params,callback){ $.ajax({ type:"get", url:url, data:params, async:true, dataType:'json', succe...原创 2019-08-11 22:53:45 · 584 阅读 · 0 评论 -
解决react组件css冲突的问题
每一个组件css命名如下:Home.module.css----就是给每个组件的命名之间加一个module组件内内部导入css文件,如下:import home from './Home.module.css'不能还像之前那种的导入方式:import './Home.css'需要将整个css给到home对象上然后dom使用方法如下:<div className={...原创 2019-08-14 21:56:04 · 4548 阅读 · 2 评论 -
浅谈react的基础知识
1、react发展---facebook在构建instagram网站的时候遇见两个问题 1、数据绑定的时候,大量操作真实dom,性能成本太高 2、网站的数据流向太混乱,不好控制于是facebook起初调研过市场上已存的mvc框架,发现都不太满意,于是就推陈出新,开发了react框架,并在2013年五月份开源React 把用户界面抽象成一个个组件,如按钮组件 Button、对话框组件 Di...原创 2019-07-31 20:54:30 · 196 阅读 · 0 评论 -
React组件
一、组件的定义1、通过函数function定义一个组件function HelloMessage(props) { return <h1>Hello World!</h1>;}2、通过class定义一个组件方式一:class Welcome extends React.Component { render() { return ...原创 2019-08-06 20:03:44 · 131 阅读 · 0 评论 -
React的constructor方法及state状态
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。以下实例创建一个名称扩展为 React.Component 的 ES6 类,在 render() 方法中使用 this.state 来修改当前...原创 2019-08-06 21:02:05 · 5315 阅读 · 0 评论 -
一个例子搞定react中state与props的区别
state 和 props 主要的区别在于props是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。class WebSite extends React.Component { constructor() { super(); this.st...原创 2019-08-06 21:29:39 · 404 阅读 · 0 评论 -
react中的列表及key的作用
当我们使用map遍历一个数组时,我们可以将该实例重构成一个组件,组件接收数组参数,每个列表元素分配一个 key,不然会出现警告,a key should be provided for list items,意思就是需要包含 key:function NumberList(props) { const numbers = props.numbers; const listItems...原创 2019-08-06 22:03:40 · 791 阅读 · 0 评论 -
redux与flux及vuex之间的区别
redux与flux及vuex之间的区别:(1)redux与flux的区别redux与flux很像,主要区别在于flux有多个可以改变应用状态的store,它通过事件来触发这些变化,组件可以订阅这些时间来和当前状态同步。redux中没有分发器dispatcher,但在flux中dispatcher被用来传递数据到注册的回调事件,另一个不同的是flux中有很多扩展是可用的,这也带来了一些...原创 2019-08-07 16:44:59 · 1612 阅读 · 1 评论 -
UmiJS的使用
Umi是阿里的一个企业级的react开发框架,可以实现零配置的方式进行react项目开发。首先手动创建以下目录:UmiJS是需要一个固定的文件夹pages来存放页面的然后在pages里面建立一个index.js页面,用于测试在index.js中随便写点东西在主文件夹umi-app-demo下安装Umi然后进入src目录里面cd src在src目录下运行umi然后通过l...原创 2019-08-05 15:53:11 · 8148 阅读 · 1 评论