react学习笔记
文章平均质量分 53
纷飞丿
我的前端开源库:
fly-barrage:功能完善,强大的 web 端弹幕库。包含完整 DEMO,可快速上手;
fly-gesture-unlock:功能完善,强大的 web 端手势解锁库。包含完整 DEMO,可快速上手;
展开
-
React 学习笔记(16):扩展知识点
1,setState 更新状态的2种写法(1). setState(stateChange, [callback]) ------ 对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback]) ------ 函数式的setState 1.up原创 2022-03-26 17:19:26 · 1208 阅读 · 0 评论 -
React 学习笔记(15):react 脚手架
1,脚手架的作用在前面的学习中,我们都是直接在 html 中引入 react 依赖包进行开发,这种方式很简单,上手也快,但是这种项目非常的简陋,开发效率低,很多目前前端生态中能够大幅提高开发效率的工具都没有用到。完善的项目应该有 webpack、devServer、eslint、jsx 编译 等等工具的支持,一个工程化的项目能够大幅度提高开发效率和开发体验。但是,如果让我们自己手动搭建一个完善的项目,成本会非常高,需要学习很多前置知识,而且搭建出来的项目还可能有很多问题。因此,React 官原创 2022-03-20 18:54:48 · 1390 阅读 · 0 评论 -
React 学习笔记(14):组件的生命周期
1,生命周期函数的理解组件从创建到死亡会经历一些特定的阶段。 React 组件中包含一系列的钩子函数(生命周期回调函数),会在特定的时刻调用。 我们在定义组件时,会在特定的生命周期函数中做对应的工作。2,React 旧版生命周期函数2-1,旧版生命周期函数图2-2,旧版生命周期函数单独讲解componentWillMount:在组件挂载前触发执行。 componentDidMount:在组件完成组件挂载后触发执行。 componentWillReceiveProps:父原创 2022-03-13 19:26:01 · 2398 阅读 · 0 评论 -
React 学习笔记(13):高阶函数、函数柯里化
1,基础概念高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。若 A 函数,接受的参数是一个函数,那么 A 就可以称之为高阶函数。 若 A 函数,调用的返回值依然是一个函数,那么 A 就可以称之为高阶函数。函数柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。2,使用高阶函数和函数柯里化优化上一节的例子上一小节代码的缺点:每一个输入 DOM 都需要绑定一个回调函数,导致需要写多个回调函数,非常的麻烦和多余。重写的代码如下:原创 2022-03-08 22:44:48 · 837 阅读 · 0 评论 -
React 学习笔记(12):非受控组件和受控组件
原创 2022-03-08 21:39:46 · 328 阅读 · 0 评论 -
React 学习笔记(11):事件处理
这一篇文章说说 React 中的事件应该注意的点。1,通过 onXxx 指定回调函数绑定事件的写法如下所示:class Demo extends React.Component{ showData = (event) => {} render(){ return( <div> <button onClick={this.showData}>点我提示左侧的数据</button> </div> ) }}原创 2022-02-18 15:03:28 · 379 阅读 · 0 评论 -
React 学习笔记(10):ref
在业务代码中,我们有可能需要获取真实 DOM 节点或者某个组件的实例,react 中提供的 ref 可以做到这两件事。ref 的写法有三种,分别是 字符串形式、回调函数形式 以及 createRef 形式。1,字符串形式写法如下所示:<script type="text/babel"> //创建组件 class Demo extends React.Component{ //展示左侧输入框的数据 showData = ()=>{ const {inp原创 2022-02-17 17:56:27 · 640 阅读 · 0 评论 -
React 学习笔记(9):props
props 用于父组件向子组件传递数据。1,props 基本使用<script type="text/babel"> //创建组件 class Person extends React.Component{ render(){ console.log(this); const {name,age,sex} = this.props return ( <ul> <li>姓名:{name}</li>原创 2022-02-17 15:13:45 · 375 阅读 · 0 评论 -
React 学习笔记(8):state(状态)
1,state(状态)的作用原创 2022-02-17 10:57:55 · 900 阅读 · 0 评论 -
React 学习笔记(7):函数式组件和类式组件
React 中组件的定义方式有两种,分别是函数式和类式,首先看看函数式组件的写法。函数式组件<script type="text/babel"> //1.创建函数式组件 function MyComponent(){ console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2> } //2.渲染组件到页面 Rea原创 2022-02-16 13:54:11 · 301 阅读 · 0 评论 -
React 学习笔记(6):类的相关知识
es6 class原创 2022-02-16 11:08:41 · 471 阅读 · 0 评论 -
React 学习笔记(5):jsx 语法规则与练习
jsx 语法规则:<script type="text/babel" > const myId = 'aTgUiGu' const myData = 'HeLlo,rEaCt' //1.创建虚拟DOM const VDOM = ( <div> <h2 className="title" id={myId.toLowerCase()}> <span style={{color:'white',fontSize:'29px'}}>原创 2022-02-11 16:52:29 · 89 阅读 · 0 评论 -
React 学习笔记(4):虚拟 DOM 和真实 DOM 的比较
例子代码:<script type="text/babel" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号,因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById原创 2022-02-11 16:37:51 · 1376 阅读 · 0 评论 -
React 学习笔记(3):虚拟 DOM 的两种创建方式
方式一:使用 jsx 创建。<script type="text/babel" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号,因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getEl原创 2022-02-11 16:28:03 · 549 阅读 · 0 评论 -
React 学习笔记(2):hello react 小案例
案例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello_react</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <原创 2022-02-11 16:17:39 · 100 阅读 · 0 评论 -
React 学习笔记(1):React 简介
该系列文章是看 B 站尚硅谷天禹老师React 教学视频时的学习笔记,视频链接点击这里。1,React 是什么?是一个用于构建用户界面的 JavaScript 库。2,为什么要学?原生 JavaScript操作 DOM 繁琐、效率低(DOM-API 操作 UI)。 原生 JavaScript 没有组件化编码方案,代码复用率低。3,React 的特点采用组件化模式、声明式编码,提高开发效率及代码复用率。 在 React Native 中可以使用 React 语法进行移...原创 2022-02-11 16:12:28 · 435 阅读 · 0 评论