![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
dong.wang
仅用于记录自己学习以及采坑的东西
展开
-
setState用法总结
1. setState传参setState中,第一个参数可以传入对象,也可以是函数,第二个为可选参数,参数为一个回调函数,那么什么场景下传入对象?什么场景下使用函数,什么场景下需要传入第二个参数呢?如果state的更新不依赖于之前的state中的值,使用对象如果state的更新依赖之前state中的值,则第一个参数传入函数如果state更新完成后立马需要使用state的值,则需要传入第二个参数2. setState是同步还是异步如果在react生命周期函数中使用setState或者直接在re原创 2020-12-21 16:54:24 · 4117 阅读 · 0 评论 -
react render方法中进行路由跳转
原创 2020-12-07 11:38:35 · 722 阅读 · 0 评论 -
react中表单验证
<Form.Item name="username" // 声明式表单验证 rules={[ { required: true, message: '用户名不能为空', }, { max: 12, .原创 2020-12-03 18:29:28 · 2119 阅读 · 0 评论 -
redux的基本概念和使用方法整理
一. 核心概念1. state使用普通对象描述state时,它可能长这样{ todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: false }], visibilityFilter: 'SHOW_COMPLETED'}它不提供修改器方法,要修改state中的数据,需要发起一个action2. actionaction就是一个普通的js对象,用原创 2020-11-12 16:22:59 · 475 阅读 · 0 评论 -
react-router中withRouter的作用
作用:把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上使用场景: 默认情况下,只有通过路由匹配到的组件中才存在this.props, 如果要在非路由匹配的组件中使用编程式导航进行路由跳转,则可以使用withRouter对组件进行包装...原创 2020-11-04 22:48:46 · 1279 阅读 · 0 评论 -
react中监听路由信息
// 在该构造函数中可以监听路由变化,prevProps可以拿到上次的路由信息与当前路由信息进行对比,进行某些操作 componentDidUpdate(prevProps) { if(prevProps.location.pathname !== this.props.location.pathname) { this.setState(() => { return { selectedTab: this.props.location...原创 2020-11-02 21:01:48 · 789 阅读 · 0 评论 -
react中路由重定向
原创 2020-10-31 16:31:27 · 1228 阅读 · 1 评论 -
Hook
// state Hook的基本使用 import React, { useState } from 'react';function App() { // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); return ( <div> {/* Hook中读取state */} <p>You clicked {count} times</p>.原创 2020-10-27 11:22:23 · 67 阅读 · 0 评论 -
react中的嵌套路由
原创 2020-10-18 22:29:45 · 520 阅读 · 0 评论 -
react中路由匹配
1. 模糊匹配2.精确匹配原创 2020-10-17 11:52:59 · 475 阅读 · 0 评论 -
react中默认路由
原创 2020-10-17 11:43:15 · 639 阅读 · 0 评论 -
react中的编程式导航
原创 2020-10-17 11:37:40 · 530 阅读 · 0 评论 -
react中路由的基本使用
原创 2020-10-17 11:17:22 · 170 阅读 · 0 评论 -
react中组件性能优化
1.减轻state2.避免不必要的渲染原创 2020-10-17 10:38:33 · 149 阅读 · 0 评论 -
react中的高阶组件
1.高阶组件的作用:实现组件的状态逻辑复用2.高阶组件的使用步骤:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script原创 2020-10-16 15:19:03 · 464 阅读 · 0 评论 -
react中组件的复用
1. 组件复用的两种方式1.1 render props模式 1.2 高阶组件(HOC)2. 组件复用到底复用的是什么?2.1 复用state2.2 操作state的方法3. render-props的使用步骤<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-原创 2020-10-16 14:28:40 · 699 阅读 · 0 评论 -
组件的生命周期
创建时更新时// 注意:如果要调用 setState() 更新状态,必须要放在一个 if 条件中// 因为:如果直接调用 setState() 更新状态,也会导致递归更新!!!原创 2020-10-16 10:42:46 · 116 阅读 · 0 评论 -
props深入(进阶)
1. children属性2. props校验需要校验的原因,组件使用者不知道需要传递什么样的数据,没有校验,报错后不知道错误原因,加上校验之后捕获使用组件时因为props导致的错误,给出明确的提示,增强组件的健壮性3. 常见的约束规则4. props的默认值设置了默认值,不用传入该属性,就可以再组件内部拿到该属性的值,如果设置了默认值,又传入了新的值,则以传入的值为准...原创 2020-10-16 10:01:52 · 157 阅读 · 0 评论 -
react中Context的基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.原创 2020-10-16 09:24:45 · 259 阅读 · 0 评论 -
react中兄弟组件进行传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.org/reac原创 2020-10-14 15:39:40 · 455 阅读 · 0 评论 -
react子组件向父组件传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.org/reac原创 2020-10-14 15:01:12 · 10030 阅读 · 0 评论 -
父组件向子组件传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.org/reac原创 2020-10-14 14:21:19 · 217 阅读 · 0 评论 -
react组件props的基本使用
作用:用于接收组件外部的数据传递数据: 通过给组件标签添加属性接收数据:函数组件通过 参数 props接收数据,类组件通过 this.props接收数据函数组件中props的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc原创 2020-10-14 11:46:03 · 269 阅读 · 0 评论 -
react组件发表评论demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.org/reac原创 2020-10-14 11:18:56 · 188 阅读 · 0 评论 -
受控组件优化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.原创 2020-10-14 09:50:55 · 76 阅读 · 0 评论 -
受控组件
把用户输入的值,通过setState 赋值给表单元素,这种叫做受控组件原创 2020-10-13 17:27:54 · 156 阅读 · 0 评论 -
react中改变事件中this指向的方法
抽离事件方法,下方代码会报错,原因是this指向问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script s原创 2020-10-13 16:24:52 · 279 阅读 · 0 评论 -
使用setState修改state的值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.原创 2020-10-13 16:15:00 · 856 阅读 · 0 评论 -
有状态组件(使用class类创建的组件)中state的基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.原创 2020-10-13 16:10:52 · 1070 阅读 · 0 评论 -
react中的事件对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.原创 2020-10-13 16:08:54 · 242 阅读 · 0 评论 -
react中的事件绑定以及与原生事件的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.原创 2020-10-13 16:07:29 · 496 阅读 · 0 评论 -
jsx
1.jsx的作用用于创建react元素2. jsx的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sc原创 2020-10-13 14:30:19 · 95 阅读 · 0 评论 -
react创建组件的两种方式
1. 使用函数创建组件```html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="ht原创 2020-10-13 16:03:45 · 149 阅读 · 0 评论