![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 56
lixiaonaaa
写bug的
展开
-
react性能优化篇之useCallback的使用场景及其深度解读
useCallBack不要每个函数都包一下,否则就会变成反向优化,useCallBack本身就是需要一定性能的useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变useCallBack需要配合React.memo使用作者:工边页字链接:https://juejin.cn/post/7107943235099557896来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。...转载 2022-08-26 10:12:45 · 15402 阅读 · 8 评论 -
react 、vue DOM的diffing算法——经典面试题
1、什么是DOM的diffing算法1)diffing意为different,react、vue,都是先生成虚拟DOM之后,再转换为页面的真实DOM。2)DOM更新时,react会先与之前的虚拟DOM做对比,和之前一样的节点可复用,不会重新渲染;然而与之前不同的节点,则重新生成。这样做是为了提高效率。如下图,时间每隔一秒在变化,而输入框的内容不变。2、面试题1). react/vue中的key有什么作用?(key的内部原理是什么?)当状态中的数据发生变化时,react会根据【新原创 2021-02-21 21:41:39 · 642 阅读 · 0 评论 -
函数式的setState
1,通常我们使用setState,会传入一个对象,这是对象式的setState。const {count} = this.statethis.setState({count:count+1})2,然而setState还有另外一种写法,就是函数式的setState。this.setState( state => ({count:state.count+1}))实际上,对象式的setState是函数式的setState的简写方式(语法糖)。所以如果你的setState比较复杂,可原创 2021-02-20 21:06:49 · 1219 阅读 · 0 评论 -
react生命周期详解
1. 生命周期流程图(旧)生命周期的三个阶段(旧)1)初始化阶段:由ReactDOM.render()触发---初次渲染constructor() componentWillMount() render() componentDidMount()2)更新阶段: 由组件内部this.setSate()或父组件重新render触发shouldComponentUpdate() componentWillUpdate() render() componentDidUpd...原创 2021-02-20 20:34:32 · 2048 阅读 · 0 评论 -
redux异步应用的理解
之前写过一篇博客是关于redux-saga的使用,用于解决异步问题,这篇博客想要补充一下对redux异步的理解。1,同步和异步的区别1)同步action,就是指action的值为Object类型的一般对象export const createIncrementAction = data => ({type:INCREMENT,data})2)异步action,就是指action的值为函数,异步action中一般都会调用同步action。(异步action不是必须要用的)。exp原创 2021-02-20 20:23:05 · 224 阅读 · 0 评论 -
react-redux踩坑记—— 报错TypeError: Object(…) is not a function
由于 react 和 react-dom 版本过低导致,可重新安装react 和 react-dom最新版本即可npm install react -g--savenpn install react-dom -g--save原创 2020-12-10 14:34:26 · 1072 阅读 · 1 评论 -
react 子组件接收的props赋值给state的陷阱
一般情况下,子组件接收到父组件传来的props,当做变量直接用就可以,但是个别情况下子组件需要将props赋值给state。一开始,按照常规写法class Child extends React.Component { constructor(props) { super(props) this.state = { list: props.list } }}会发现,页面会重新渲染,但是页面数据并没有变化。这涉及到要熟悉react的生命周期(图片来自原创 2020-12-16 17:19:59 · 3169 阅读 · 0 评论 -
记react 父组件调用子组件方法(全)
纯函数组件 react Hook//父组件import React, {useRef} from "react";import Child from '../Child';let Parent = () => { const childRef = useRef(); const updateChildState = () => { console.log('调用子组件:', childRef) // changeVal就是子组件暴露给父组件的方法原创 2020-12-16 11:07:50 · 1704 阅读 · 0 评论 -
create-react-app脚手架创建react项目,如何暴露webpack配置文件
npm 命令npm run eject原创 2020-12-15 10:30:19 · 343 阅读 · 1 评论 -
react系列学习(六)——react.lazy懒加载的基本使用
当react项目非常庞大的时候,会导致打包文件build.js文件也特别复杂,庞大,从而导致首页加载缓慢,影响用户体验。所以我们希望有些比较大的组件,只在此组件被加载时,内部资源才被引用。这就是代码分割,也就是react.lazy的作用。import React, { Component, Suspense, lazy } from 'react';//懒加载组件const ReduxComp = lazy(() => import('./Comp/Account'));const R.原创 2020-12-15 10:47:53 · 3235 阅读 · 3 评论 -
react系列学习(五)——react-router-dom5.X的使用及相关问题详解
1、例子界面如下图:2、代码:2.1、主页面:import { HashRouter, Route, Switch, Link, Redirect } from 'react-router-dom';<HashRouter> <div className="App"> hello react <br /> <Link to='/redux'> <span>redu.原创 2020-12-14 15:58:45 · 1172 阅读 · 0 评论 -
react系列学习(四)——express+mock模拟动态数据
为了方便与后台开发同步,我们通常在react项目中模拟后台接口,以便于我们前端开发更顺利。首先安装express和mockjs,express是模拟服务器,mockjs是模拟数据npm install --save expressnpm install --save-dev mockjs在目录下增加mock文件夹server.jsvar express = require("express")var app = express();var router = expre原创 2020-12-11 09:24:43 · 542 阅读 · 0 评论 -
react系列学习(三)——react-redux使用方法
1,react-redux是作者为了方便使用redux封装的库,可用可不用,看个人的习惯。2,react-redux的主要思想,是将组件拆分为容器组件和UI组件,容器组件主要用来状态管理,进行store的计算,并映射到UI组件的props中;UI组件顾名思义就是只呈现view,不进行store的操作,只负责接收状态。3,容器组件3.1 connect 方法connect方法是用于容器组件和UI组件的连接,将store映射到UI组件的props中。import { connect } f原创 2020-12-10 13:57:34 · 272 阅读 · 0 评论 -
react系列学习(二)——react-saga使用方法
1,上一篇记录了redux,redux是同步的,既发出action指令后,reducer立即计算store,并返回。那么异步问题该如何解决?从后台请求获取的数据如何存储到store?这就是中间件的作用,也就是redux-saga的用处。2,index文件同样是合并多个saga,便于管理代码,和reducer的合并一样import {all} from 'redux-saga/effects';import helloSaga from './helloSage';import watchI原创 2020-12-09 15:38:35 · 5060 阅读 · 2 评论 -
react系列学习(一)——redux使用方法
1,首先上文件夹目录忽略saga,saga下一章再介绍。2,redux为状态管理器,可以理解为存储全局状态,每个页面都可获取,解决多页面复杂数据交互问题。3,redux整个流程主要由三部分组成:store, action, reducer。从单词字面理解即可,store为存储状态数据的容器;action是动作,是如何改变状态的指令,由store发出;reducer是计算,通过接收到的action指令,计算出新的store,返回。三者形成闭环,来运转redux。接下啦,我们来看具体实现。.原创 2020-12-09 14:59:40 · 324 阅读 · 0 评论