![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 85
01xm
慢慢又漫漫
展开
-
【Redux】
1. 简单理解redux是一个专门用于做状态管理的JS库。有很多组件,A、B、C、D、E几个组件,现在C内有状态,A、B、E都想用,如果采用以前的方法,找他们之间的关系,或者用消息订阅与发布方法,这样的工作量很大,代码很多;这时redux独立于所有组件存在的,有一个专门存放这些状态的仓库store,C的需要共享的状态在里面存着,谁想用就去redux里取,用就取,不用就不取,集中式管理多个组件共享的状态,这样就节省了工作量。2. 简介组件可以派发(dispatch)行为(action)给store,原创 2022-01-09 16:03:36 · 340 阅读 · 0 评论 -
【React】面向组件编程 - 基本理解和使用 | 组件三大核心属性state-props-refs | 事件处理 | 非受控组件 | 受控组件
1. 基本理解和使用1.1 函数式组件// 1. 创建函数式组件function MyComponent(){ console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件(适用于简单组件的定义)</h2>}// 2. 渲染组件到页面ReactDOM.render(<MyComponent/>, document.getElementById('test')原创 2022-01-01 22:56:44 · 694 阅读 · 0 评论 -
【React】diff算法
React之diff算法什么是虚拟DOM什么是Diff算法传统diff算法React的diff算法1. 什么是调和?2. 什么是React diff算法?3. diff策略。4. tree diff5. component diff:React对不同的组件间的比较,有三种策略。6. element diff:当节点处于同一层级时,diff提供三种节点操作:删除、插入、移动。什么是虚拟DOM虚拟DOM是一个对象,一个什么样的对象呢?一个用来表示真实DOM的对象。举个例子:真实DOM<ul id=原创 2021-11-15 17:36:02 · 1854 阅读 · 1 评论 -
【React】生命周期
React生命周期生命周期生命周期组件从创建到死亡,会经过一些特定的阶段。 React组件中包含一系列钩子函数(生命周期回调函数),会在特定的时刻调用。我们在定义组件的时候,会在特定的声明周期回调函数中,做特定的工作。如下图是生命周期的结构图:我们通过一个案例更详细的了解这个生命周期: class A extends React.Component{ constructor(props){ console.log("A --- constructor")原创 2021-11-09 17:01:36 · 726 阅读 · 0 评论 -
【React】路由(二)
React路由1. Switch的使用2. 样式错误3. 模糊匹配和精准匹配4. Redirect的使用(初始化路由)5. 嵌套路由1. Switch的使用1.通常情况下,path和component是一一对应的关系。2.Switch可以提高路由匹配效率(单一匹配) ---- 即匹配到一个后将不再往下匹配<Switch> <Route path="/about" component={About}/> <Route path="/home" component=原创 2021-10-31 11:55:12 · 381 阅读 · 0 评论 -
【React】路由(一)
React路由1. SPA2. 路由的理解2.1 什么是路由?2.2 路由分类2.3 react-router-dom的理解2.4 路由的基本使用:2.5 路由组件以及一般组件2.6 NavLink使用与封装1. SPA单页Web应用(single page web application,SPA)。整个应用只有 一个完整的页面 。点击页面中的链接 不会刷新 页面,只会做页面的 局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。2. 路由的理解2.1 什么是路由?一个路由就是原创 2021-10-25 20:55:45 · 206 阅读 · 0 评论 -
【React】React中事件的处理
React的事件处理1、this绑定问题:在用户自定义的函数中没有this。2、React的数据流是单向的,没有数据绑定。A、元素本身的值。B、元素的值发生改变后的事件处理。例如输入框需要设置 value 和 onChange 。import React, { Component } from "react";export default class CardSample extends Component { //状态的初始化一般放在构造器中 constructor(prop原创 2021-10-23 15:12:35 · 250 阅读 · 0 评论 -
【React】- React Hooks
React Hooks一、概念为什么会有Hooks一、概念为什么会有Hooks介绍Hooks之前,首先要说一下React的组件创建方式,一种是类组件,一种是纯函数组件,并且React团队希望,组件不要变成复杂的容器,最好只是数据流的管道。开发者根据需要,组合管道即可。也就是说组件的最佳写法应该是函数,而不是类。但是我们知道,在以往开发中类组件和函数组件的区别是很大的,纯函数组件有着类组件不具备的多种特点:纯函数组件没有状态纯函数组件没有生命周期纯函数组件没有 this这就说明了,函数组件只原创 2021-10-16 16:30:00 · 156 阅读 · 0 评论 -
【React】组件进阶
组件时独立且封闭的单元,默认情况下,只能使用自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好地完成整个应用的功能。而在这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就要打破组件的独立封闭性,让其与外界沟通,这个过程就是组件通讯。原创 2021-10-14 20:05:32 · 439 阅读 · 0 评论 -
【React】特性之refs
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。原创 2021-10-12 17:56:36 · 344 阅读 · 0 评论 -
【React】React组件基础
React组件基础一、组件介绍二、组件的两种创建方式1、使用函数创建组件2、使用类创建组件3、抽离为独立的JS文件三、React事件处理1、事件绑定2、事件对象四、有状态组件和无状态组件五、组件中的 state 和 setState(让组件动起来)1、state的基本使用2、setState( )修改状态3、从JSX中抽离事件处理程序(优化),出现this指向问题六、事件绑定 this 指向(解决刚才的问题)1、利用箭头函数解决2、Function.prototype.bind()3、class的实例方法原创 2021-09-14 21:19:27 · 206 阅读 · 0 评论 -
【React】React基础、React JSX、脚手架的安装及使用
【React】笔记-React基础、React JSX、脚手架的安装及使用原创 2021-09-13 11:01:22 · 371 阅读 · 0 评论