react笔记
冰淇淋配马卡龙
这个作者很懒,什么都没留下…
展开
-
解决多级路径刷新页面样式丢失的问题
解决多级路径刷新页面样式丢失的问题方法一:public/index.html 中 引入样式时不写 ./ 写 / (常用)方法二:public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)方法三:使用HashRouterReactDOM.render( <HashRouter> <App/> </HashRouter>, document.getElementById('r原创 2022-04-07 14:58:26 · 239 阅读 · 0 评论 -
React_路由的使用与组件问题,以及NavLink的使用和封装
一、相关理解SPA的理解A. 单页Web应用(single page web application,SPA)。B. 整个应用只有一个完整的页面。C. 点击页面中的链接不会刷新页面,只会做页面的局部更新。D. 数据都需要通过ajax请求获取, 并在前端异步展现。路由的理解什么是路由?一个路由就是一个映射关系(key:value)key为路径, value可能是function或component路由分类后端路由:A. 理解: value是function, 用原创 2022-03-25 17:26:09 · 321 阅读 · 0 评论 -
github搜索案例相关知识点总结
设计状态时要考虑全面,例如带有网络请求的组件,要考虑请求失败怎么办。ES6小知识点:结构赋值+重命名 let obj = {a:{b:1}} const {a} = obj; //传统解构赋值 const {a:{b}} = obj; //连续解构赋值 const {a:{b:value}} = obj; //连续解构赋值+重命名消息订阅与发布机制1、先订阅,再发布(理解:有一种隔空对话的感觉)2、适用于任意组件间通信3、要在组件的co.原创 2022-03-22 15:03:18 · 154 阅读 · 0 评论 -
React_脚手架配置代理方法(详细)
脚手架配置代理方法1:客户端:import React, {Component} from 'react'import axios from 'axios'export default class App extends Component{ getStudentData=()=>{ axios.get('http://localhost:3000/students').then( response => {console.lo原创 2022-03-18 17:37:25 · 267 阅读 · 0 评论 -
React笔记_DOM的diffing算法 以及 key的作用
验证diffing算法:<script type="text/babel"> //<!--此处一定要写babel--> //创建组件 class Time extends React.Component{ state = {date: new Date()} componentDidMount(){ setInterval(()=>{原创 2022-03-11 15:55:37 · 112 阅读 · 0 评论 -
React笔记_生命周期(详细)
生命周期的理解组件从创建到死亡它会经历一些特定的阶段。React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。引出生命周期对组件进行相应渲染以及或者卸载组件,使用自带函数unmountComponentAtNode()完整代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> &原创 2022-03-10 15:22:54 · 877 阅读 · 0 评论 -
React之高阶函数_函数柯里化
高阶函数_函数柯里化高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。常见的高阶函数:Promise()setTimeout()arr.map()等等代码示例:<!DOCTYPE html><html><he原创 2022-03-09 16:48:35 · 307 阅读 · 0 评论 -
React笔记之受控组件与非受控组件
包含表单的组件分类1. 受控组件将input这个DOM组件中的输入数据存储到state状态中,然后再在要使用的地方进行调用,是可控制的。完整代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>2_受控组件</title></head><body> <!--准备好一个容器-->原创 2022-03-09 10:57:38 · 550 阅读 · 0 评论 -
React之使用event.target来防止过度使用refs属性
通过onXxx属性指定事件处理函数(注意大小写)a) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 --------为了更好的兼容性b) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) -------为了高效通过event.target得到发生事件的DOM元素对象因为这里如果使用refs属性获取标签并运用显示的话都是对同一个input标签而言的,所以可以直接用event.target的方式,其中event是系统参数。相关代码:&.原创 2022-03-08 17:57:58 · 404 阅读 · 0 评论 -
react组件实例三大核心属性之refs
三大核心属性分别是:state、props、refsrefs属性组件内的标签可以定义refs属性来标识自己字符串形式的ref通过ref="input1"获取标签属性值通过this.refs传值展现完整代码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>1_字符串形式的ref</title></head><原创 2022-03-08 17:19:08 · 592 阅读 · 0 评论 -
React 之 函数式组件使用props
对于react的三大核心属性state、props、refs,只有props能被函数式组件使用,因为只有props属性可以作为参数调用。相关代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>3_函数组件使用props</title></head><body> <!--准备好一个容器-->原创 2022-03-08 10:02:19 · 4670 阅读 · 0 评论 -
react组件实例三大核心属性之props
三大核心属性分别是:state、props、refsprops属性每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中基本使用:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>1_props的基本使用</title></head><body>原创 2022-03-07 16:59:33 · 369 阅读 · 0 评论 -
react组件实例三大核心属性之state
三大核心属性分别是:state、props、refsstate属性state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)先附上整体实例原码:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>state</title>&l原创 2022-03-07 15:49:53 · 227 阅读 · 0 评论 -
区分【js语句(代码)】与【js表达式】
区分【js语句(代码)】与【js表达式】一定注意区分:【js语句(代码)】与【js表达式】1.表达式2.语句(代码)一定注意区分:【js语句(代码)】与【js表达式】1.表达式一个表达式会产生一个值,可以放在任何一个需要值的地方。下面这些都是表达式:(1) a(2) a+b(3) demo(1)(4) arr.map()(5) function test () {} 2.语句(代码)下面这些都是语句代码:(1) if(){}(2) for(){}(3) switch(){cas原创 2022-03-04 10:16:24 · 205 阅读 · 0 评论 -
React笔记 jsx语法规则
jsx语法规则:定义虚拟DOM时,不要写引号。标签中混入JS表达式时要用{}。const myId='aTgUiGu' const myData='hello,rEaCt' // <!-- 1.创建虚拟DOM -->const VDOM = ( <h2 id={myId.toLowerCase()}> <span>{myData.toLowerCase()}</span&原创 2022-03-03 17:27:31 · 99 阅读 · 0 评论 -
React学习笔记 虚拟DOM的两种创建方式
React学习笔记 虚拟DOM的两种创建方式1、使用jsx创建虚拟DOM2、使用js创建虚拟DOM1、使用jsx创建虚拟DOM代码:<div id="test"></div><!--引入react核心库--><script type="text/javascript" src="../js/react.development.js"></script><!--引入react-dom,用于支持react操作DOM-->&原创 2022-03-03 10:13:52 · 463 阅读 · 0 评论