react
关注
分享
扫一扫
dong.wang
仅用于记录自己学习以及采坑的东西
展开
-
setState用法总结
1. setState传参setState中，第一个参数可以传入对象，也可以是函数，第二个为可选参数，参数为一个回调函数，那么什么场景下传入对象？什么场景下使用函数，什么场景下需要传入第二个参数呢？如果state的更新不依赖于之前的state中的值，使用对象如果state的更新依赖之前state中的值，则第一个参数传入函数如果state更新完成后立马需要使用state的值，则需要传入第二个参数2. setState是同步还是异步如果在react生命周期函数中使用setState或者直接在re原创 2020-12-21 16:54:24 · 4234 阅读 · 0 评论 -
react render方法中进行路由跳转
原创 2020-12-07 11:38:35 · 752 阅读 · 0 评论 -
react中表单验证
<Form.Item name="username" // 声明式表单验证 rules={[ { required: true, message: '用户名不能为空', }, { max: 12, .原创 2020-12-03 18:29:28 · 2189 阅读 · 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 · 503 阅读 · 0 评论 -
react-router中withRouter的作用
作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上使用场景： 默认情况下，只有通过路由匹配到的组件中才存在this.props, 如果要在非路由匹配的组件中使用编程式导航进行路由跳转，则可以使用withRouter对组件进行包装...原创 2020-11-04 22:48:46 · 1300 阅读 · 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 · 839 阅读 · 0 评论 -
react中路由重定向
原创 2020-10-31 16:31:27 · 1291 阅读 · 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 · 96 阅读 · 0 评论 -
react中的嵌套路由
原创 2020-10-18 22:29:45 · 566 阅读 · 0 评论 -
react中路由匹配
1. 模糊匹配2.精确匹配原创 2020-10-17 11:52:59 · 511 阅读 · 0 评论 -
react中默认路由
原创 2020-10-17 11:43:15 · 671 阅读 · 0 评论 -
react中的编程式导航
原创 2020-10-17 11:37:40 · 558 阅读 · 0 评论 -
react中路由的基本使用
原创 2020-10-17 11:17:22 · 215 阅读 · 0 评论 -
react中组件性能优化
1.减轻state2.避免不必要的渲染原创 2020-10-17 10:38:33 · 175 阅读 · 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 · 499 阅读 · 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 · 756 阅读 · 0 评论 -
组件的生命周期
创建时更新时// 注意：如果要调用 setState() 更新状态，必须要放在一个 if 条件中// 因为：如果直接调用 setState() 更新状态，也会导致递归更新！！！原创 2020-10-16 10:42:46 · 133 阅读 · 0 评论 -
props深入（进阶）
1. children属性2. props校验需要校验的原因，组件使用者不知道需要传递什么样的数据，没有校验，报错后不知道错误原因，加上校验之后捕获使用组件时因为props导致的错误，给出明确的提示，增强组件的健壮性3. 常见的约束规则4. props的默认值设置了默认值，不用传入该属性，就可以再组件内部拿到该属性的值，如果设置了默认值，又传入了新的值，则以传入的值为准...原创 2020-10-16 10:01:52 · 203 阅读 · 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 · 306 阅读 · 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 · 491 阅读 · 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 · 10113 阅读 · 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 · 244 阅读 · 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 · 300 阅读 · 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 · 259 阅读 · 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 · 94 阅读 · 0 评论 -
受控组件
把用户输入的值，通过setState 赋值给表单元素，这种叫做受控组件原创 2020-10-13 17:27:54 · 186 阅读 · 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 · 315 阅读 · 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 · 907 阅读 · 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 · 1102 阅读 · 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 · 272 阅读 · 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 · 551 阅读 · 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 · 178 阅读 · 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 · 116 阅读 · 0 评论