![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
Kevin11Yao
这个作者很懒,什么都没留下…
展开
-
React性能优化小技巧
REACT 优化性能介绍一些项目中可用于改进 React 代码的有效技巧。避免在渲染函数中使用内联函数定义原因:如果在JSX属性中使用箭头函数,它将在每次渲染时创建新的函数实例。这可能会为垃圾收集器带来很多工作。可以定义箭头函数,而不是为 props 定义内联函数。避免在 map 方法中使用 Index 作为组件的 Key原因:使用 index作为 key, 被用在React虚拟DOM元素的时候,会使你的应用可能出现错误的数据 。当您从列表中添加或删除元素时,如果该 key 与以前相同,则 Re原创 2021-06-08 10:32:46 · 118 阅读 · 0 评论 -
React 学习笔记 —— 错误边界 ErrorBoundary
理解:错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面特点:只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误使用方式:getDerivedStateFromError配合componentDidCatch// 生命周期函数,一旦后台组件报错,就会触发static getDerivedStateFromError(error) { console.log(error); // 在render之前触原创 2021-04-19 22:45:34 · 1150 阅读 · 0 评论 -
React 学习笔记 —— render props
如何向组件内部动态传入带内容的结构(标签)?Vue中: 使用slot技术, 也就是通过组件标签体传入结构 <A><B/></A>React中: 使用children props: 通过组件标签体传入结构 使用render props: 通过组件标签属性传入结构,而且可以携带数据,一般用render函数属性children props<A> <B>xxxx</B></A>{this.props.ch转载 2021-04-19 19:36:28 · 114 阅读 · 0 评论 -
React 学习笔记 —— PureComponent
为什么会引入PureComponent?提高效率问题组件优化Component的2个问题只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低只要父组件重新render(), 就会自动重新render子组件,纵使子组件没有用到父组件的任何数据 ==> 效率低效率高的做法只有当组件的state或props数据发生改变时才重新render()原因Component中的shouldComponentUpdate()总是返回原创 2021-04-19 18:35:01 · 86 阅读 · 0 评论 -
React学习笔记——Context
理解一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信使用1) 创建Context容器对象: const XxxContext = React.createContext() 2) 渲染子组时,外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据: <xxxContext.Provider value={数据}> 子组件 </xxxContext.Provider> 3) 后代组件读取数据: //第原创 2021-04-19 17:17:18 · 95 阅读 · 0 评论 -
React 学习笔记 —— Fragment
在 JSX 的语法中,明确要求,仅能有一个根标签因此,我们往往使用 div 去包裹整个组件标签但这样,会在页面上增加许多无用的 div,并且增加页面的标签层级可以用以下两种方式解决第一种:使用 Fragment 标签,它会在编译时被忽略import {Fragment} from 'react'...<Fragment> <p>test</p> <p>test</p></Fragment>...第二种:.转载 2021-04-19 16:46:40 · 172 阅读 · 0 评论 -
React学习笔记——3种常用的hooks
React Hook/Hooks是什么?Hook是React 16.8.0版本增加的新特性/新语法可以让你在函数组件中使用 state 以及其他的 React 特性三个常用的HookState Hook: React.useState()Effect Hook: React.useEffect()Ref Hook: React.useRef()State HookState Hook让函数组件也可以有state状态(虽然函数组件没有this), 并进行状态数据的读写操作语法原创 2021-04-19 16:39:53 · 582 阅读 · 0 评论 -
React学习笔记——lazyLoad
当未使用懒加载时,页面一打开,就将所有的路由组件给加载到页面了如果路由组件很多,且用户不会真正访问到那么多的路由组件,那么就相当于加载了不需要的多余组件因此,可以使用路由懒加载,当用户真正需要访问的时候再去请求如下import {lazy, Suspense} from 'react'import {Route} from 'react-router-dom'const Home = lazy(()=>import('./home'))const About = lazy(()=&.转载 2021-04-19 15:35:07 · 231 阅读 · 0 评论 -
React学习笔记——setState()的两种书写方法对比
setState更新状态的2种写法1.setState(stateChange, [callback])------对象式的setStatestateChange为状态改变对象(该对象可以体现出状态的更改)callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用import React, { Component } from 'react'export default class Demo extends Component { state = {转载 2021-04-19 13:51:37 · 566 阅读 · 0 评论 -
React学习笔记——使用redux调试工具
安装chrome浏览器插件下载工具依赖包npm install --save-dev redux-devtools-extension注:在Chrome中下载了扩展程序后,必须要安装工具依赖后才能生效原创 2021-04-19 12:34:35 · 136 阅读 · 0 评论 -
React学习笔记——纯函数和高阶函数
纯函数一类特别的函数: 只要是同样的输入(实参),必定得到同样的输出(返回)必须遵守以下一些约束1)不得改写参数数据2)不会产生任何副作用,例如网络请求,输入和输出设备3)不能调用Date.now()或者Math.random()等不纯的方法redux的reducer函数必须是一个纯函数高阶函数理解: 一类特别的函数1)情况1: 参数是函数2)情况2: 返回是函数常见的高阶函数:1)定时器设置函数2)数组的forEach()/map()/filter()/reduce()/f原创 2021-04-19 12:28:23 · 151 阅读 · 0 评论 -
React学习笔记——react-redux的使用
前言react-redux不同于redux,前者的诞生是由于react出品方认为使用rudux的react使用者太多了,进而Facebook公司自己出了react-redux来更好的优化react的使用。使用 react-redux安装 react-reduxyarn add react-redux在 react-redux 中,将组件分为两类:UI组件、容器组件其中,UI组件,不涉及 redux 相关代码,由 容器组件充当桥梁进行沟通,如下:在redux基本使用的demo基原创 2021-04-18 15:01:03 · 223 阅读 · 1 评论 -
React 学习笔记 —— redux 的使用
安装使用运行命令yarn add reduxredux 原理图主要流程组件 通过 Action Creators 创建不同种类的ActionsStore调用dispatch方法将不同的Actions进行执行Reducers 管理状态的初始化和后续操作,返回给 Store 新的状态,组件可以通过store.getState() 获取状态各部分职责Action Creators: 负责生成 Action 对象,并分发给 StoreStore:负责管理数据,并将 Action 传原创 2021-04-18 14:34:43 · 264 阅读 · 0 评论 -
React 学习笔记 —— antd 的使用
步骤总结、antd的按需引入+自定主题安装依赖:yarn add react-app-rewired customize-cra babel-plugin-import less less-loader修改 package.json.... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired te转载 2021-04-15 18:17:00 · 161 阅读 · 0 评论 -
React学习笔记——BrowserRouter与HashRouter的区别
底层原理不一样:BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。path表现形式不一样BrowserRouter的路径中没有#,例如:localhost:3000/demo/testHashRouter的路径包含#,例如:localhost:3000/#/demo/test刷新后对路由state参数的影响(1).BrowserRouter没有任何影响,因为state保存在history对象中。(2..原创 2021-04-15 15:37:17 · 139 阅读 · 0 评论 -
React学习笔记——向路由组件传递params参数的3种方式
params参数特点:路径中会暴露信息值,且需要声明接收路由链接(携带参数)://直接传属性<Link to={'/demo/test/tom/18'}>详情</Link>//在该组件内部访问对象并传参<Link to={`/demo/test/${obj.info1}/${obj.info2}`}>详情</Link>注册路由(声明接收):<Route path="/demo/test/:name/:age" component原创 2021-04-15 13:28:10 · 1513 阅读 · 3 评论 -
React 学习笔记 —— 多级路由刷新页面时样式丢失问题
问题原因:多级路径下,加载样式时,使用相对路径,在刷新时将多级路由也考虑在内// 如下,样式路径 './' 导致加载资源时,需要参考当前路径,因此多级路由会影响资源的加载 <link rel="stylesheet" href="./test.css" />解决的三种方法:使用 绝对路径public/index.html 中 引入样式时不写 ./ 写 / (常用) // 加载 根目录下的 test.css ,与当前路由无关 <link rel="stylesheet"转载 2021-04-14 22:39:03 · 241 阅读 · 0 评论 -
React学习笔记——路由的基本使用
路由步骤路由的实现,是基于BOM的history,实现网页不刷新,局部更新页面。点击导航链接,引起路径变化路径变化,被路由器检测到,进行组件匹配,从而被展示安装yarn add react-router-dom注意:不要忘记-dom(区分于vue的vue-touer)...原创 2021-04-14 21:29:56 · 185 阅读 · 0 评论 -
React学习笔记——使用fetch发送简单的网络请求
发送网络请求—使用fetch发送(未优化)//发送网络请求---使用fetch发送(未优化)search=()=>{ fetch(`/api1/search/users2?q=${keyWord}`).then( response => { console.log('联系服务器成功了'); return response.json() }, error => { console.log('联系服务器失败了',error); ret原创 2021-04-14 13:23:53 · 204 阅读 · 0 评论 -
PubSubJS的基本使用——对于React的消息订阅与发布
引言为了解决在React中兄弟组件间的消息通信(此处为组件List和Search),我们可以利用PubSubJS这个工具库来实现。在React中的适用场景在任意组件间的沟通下载引入的两种方式1.使用npmnpm install pubsub-js --save2.使用yarnyarn add pubsub-js官方基础使用案例关键函数:PubSub.subscribe()、PubSub.publish()、PubSub.unsubscribe()、PubSub.publishSync原创 2021-04-13 20:16:51 · 1227 阅读 · 0 评论 -
React学习笔记——配置代理
react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)方法二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js编写setupProxy.js配置具体代理规则:const原创 2021-04-12 17:43:52 · 119 阅读 · 0 评论 -
React学习笔记——vscdoe中react插件的安装
步骤打开VSCODE的扩展商店搜索react选择此图标并点击安装该插件的最常用的两个代码片段 rcc 和 rfcrcc :react class componentrfc :react function component操作方式同上其他快捷片段可以在快捷商店中直接查看...原创 2021-04-11 12:46:54 · 781 阅读 · 0 评论 -
React 学习笔记 —— css 样式的模块化
问题描述当不同组件中的css规则,存在冲突时,高优先级的样式,就会覆盖低优先级的样式,示例如下:目录结构样式冲突Welcome 组件后引入,因此覆盖Hello组件的样式如下当组件越来越多的时候,我们当然不想组件之间产生干扰,看如下两种解决方案css预处理工具(更常用).hello { h1 { background-color: tomato; }}.welcome { h1 { background-color: gold }}/* 会被翻译成这原创 2021-04-11 12:30:25 · 119 阅读 · 0 评论 -
React 学习笔记 —— 组件生命周期(包含17新版和旧版对比)
生命周期汇总图生命周期的三个阶段(旧)1. 初始化阶段: 由ReactDOM.render()触发—初次渲染constructor()componentWillMount()render()componentDidMount()2.更新阶段: 由组件内部this.setSate()或父组件重新render触发shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()原创 2021-04-09 17:26:11 · 301 阅读 · 0 评论 -
React学习笔记——在受控组件中使用函数柯里化
先来了解两个定义高阶函数和函数的柯里化高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。常见的高阶函数有:Promise、setTimeout、arr.map()等等函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。代码: <div id="test"></div原创 2021-04-09 15:40:19 · 135 阅读 · 0 评论 -
React 学习笔记 —— 非受控组件与受控组件
非受控组件特点:现用现取,当事件触发时,再在回调函数中获取输入框中的值。 <div id="test"></div> <script type="text/babel"> // 非受控组件 现用现取 class Login extends React.Component{ //当事件触发时,再在回调函数中获取输入框中的值 handleSubmit=(event)=>{原创 2021-04-09 14:55:40 · 71 阅读 · 0 评论 -
React 学习笔记 —— refs 属性的三种书写方式
refs属性有三种书写方式字符串形式(简单,但可能被废弃)回调形式(开发用的最多)createRef形式(官方推荐)字符串形式 ref注意:过度使用字符串ref 会存在效率问题,该方式可能会在未来的版本中移除 <div id="test"></div> <script type="text/babel"> class Demo extends React.Component { showData原创 2021-04-09 12:49:03 · 269 阅读 · 0 评论 -
React 学习笔记 —— props 属性
一、基本用法this.state 是组件内部产生的数据this.props 是从组件外面,通过属性传入到组件中的数据<div id="test"></div> <script type="text/javascript" src="../JS/react.development.js"></script> <script type="text/javascript" src="../JS/react-dom.developmen原创 2021-04-09 10:22:47 · 267 阅读 · 0 评论 -
React 学习笔记 —— 事件绑定和 state 属性修改简写版
代码<div id="test"></div> <script type="text/javascript" src="../JS/react.development.js"></script> <script type="text/javascript" src="../JS/react-dom.development.js"></script> <script type="text/javascrip原创 2021-04-09 09:59:01 · 73 阅读 · 0 评论 -
React学习笔记——类中的方法内部的this指向
类中的方法内部的this指向代码如下:<div id="test"></div> <script type="text/javascript" src="../JS/react.development.js"></script> <script type="text/javascript" src="../JS/react-dom.development.js"></script> <script ty原创 2021-04-08 12:44:48 · 221 阅读 · 0 评论