![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 70
一月清辉
这个作者很懒,什么都没留下…
展开
-
使用 React Hooks 时要避免的6个错误
从第二次开始,每次当点击按钮时,count会增加1,但是setInterval仍然调用的是从初次渲染中捕获的count为0的旧的log闭包。在上面的组件中,有两个按钮,第一个按钮会触发计数器加一,第二个按钮会根据当前的计数器状态发送一个请求。此时,我们就可能会创建一个旧的闭包,该闭包会捕获过时的状态或者prop变量。这样,无论传入的id是否为空,useState和useEffect总会以相同的顺序来低啊用,这样就不会出错啦~ 。这样改完之后,React就能拿到最新的值,当点击按钮时,就会每次增加3。转载 2023-07-28 11:58:14 · 411 阅读 · 0 评论 -
react中类组件中的state与函数组件中的state的区别
在类组件中,通过this.state引用count,每一次setTimeout的时候都能通过引用拿到上一次的最新count,所以最后加到5。但是在函数组件中,每一次更新都是重新执行当前函数,1s内setTimeout里读取的count实际上都是初始值0,所以最后只加到1。下面两段代码中,1s内点击事件各触发5次会有什么表现吗?简单来说,类组件的state依赖上一次state,函数组件的state是重新执行当前函数。在函数组件中,页面上的数字只会从0增加到1。在类组件中,页面上的数字依次从0增加到5;原创 2023-05-25 18:53:56 · 357 阅读 · 0 评论 -
react-native学习过程记录
参考地址:https://blog.csdn.net/qq_42231156/article/details/126396576。例如: org.gradle.java.home=D:/all self program files/JavaJdk11。直接修改项目的指定的java版本(前提是安装了java11)注意:路径中 是 / ,而非 \。创建项目(即指定version)原创 2022-12-28 18:16:08 · 641 阅读 · 0 评论 -
Redux 知识汇总
文章目录1、为什么要用 redux2、Redux设计理念3、Redux遵循的三个原则4、Redux的重要构成5、Redux优/缺点5.1、优点5.2、缺点6、redux中如何进行异步操作7、Redux源码1、为什么要用 redux在 React中,数据在组件中是单向流动的,数据从一个方向父组件流向子组件通过 props,所以任意两个非父子关系的组件之间通信就相对麻烦,redux的岀现就是为了方便任意组件之间相互通讯。2、Redux设计理念将整个应用状态存储到store中,store里面保存着一个状原创 2021-11-18 11:05:40 · 1041 阅读 · 0 评论 -
React实现的应用中如果出现卡顿有哪些可以考虑的优化方案
React实现的应用中如果出现卡顿有哪些可以考虑的优化方案1、增加shouldComponentUpdate钩子对新旧 props进行比较,如果值相同则阻止更新避免不必要的渲染,或者使用 PureComponent替代 Component,其内部已经封装了 shouldComponentUpdate的浅比较逻辑。2、对于列表或其他结构相同的节点为其每一项增加唯一的key属性,以方便 React的diff算法中对该节点的复用,减少节点的创建和删除操作3、render函数中减少类似写法render(){原创 2021-11-17 11:40:36 · 4422 阅读 · 0 评论 -
React Hooks 你需要知道的
useEffect可以看成是 componentDidMount、componentDidUpdate和 componentwillUnmount三者的结合。useEffect( callback,[ source])生命周期函数的调用主要是通过第二个参数[ source]来进行控制有如下几种情况:[ source]参数不传时,则第一次渲染之后和每次更新之后都会执行useEffect(()=>{ console.log('初始化与每次更新之后,都会执行')})[ sourc原创 2021-11-16 22:46:16 · 1018 阅读 · 0 评论 -
React组件绑定this的四种方式
1、在构造函数初始化时,constructor中使用bind绑定this,这样做的好处是,避免每次渲染时都要重新绑定 import React, {Component} from 'react'class Test extends React.Component {constructor (props) { super(props) this.state = {message: 'Allo!'} //在构造函数中绑定this this.handleClick = this.handleC转载 2021-11-15 21:39:02 · 402 阅读 · 0 评论 -
React如何进行组件/逻辑的复用
组件的复用目前有三种形式:高阶组件(HOC)渲染属性(Render Props)Hooks1、高阶组件(higher order component,即HOC)1.1、是什么高阶组件是React中用于复用组件逻辑的一种高级技巧。高阶组件就是一个函数,它接受一个组件为参数,返回一个新组件。示例如下:import React from 'react'import ReactDOM from 'react-dom'// 函数const withMouse = (Com.转载 2021-11-11 23:11:06 · 664 阅读 · 0 评论 -
react中组件间3种通信方式----redux、props、订阅发布
1. 方式一: 通过props传递1). 通过props可以传递一般属性和函数属性,2). 一般属性–>父组件向子组件3). 函数属性–>子组件向父组件通信4). 缺点:只能一层一层传递/兄弟组件必须借助父组件2. 方式二: 消息订阅(subscribe)-发布(publish)机制1). 实现库: pubsub-js2). 组件A: 发布消息(相当于触发事件)3). 组件B: 订阅消息, 接收消息, 处理消息(相当于绑定事件监听)4). 优点: 对组件关系没有限制3. 方式转载 2020-10-30 11:16:46 · 1118 阅读 · 0 评论 -
React常见问题
1、React 中 key 的作用是什么?Key用于识别Virtual DOM 元素,以便追踪列表中哪些元素被修改、被添加或者被移除2、调用 setState 之后发生了什么?1、调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发调和过程(Reconciliation)。2、经过调和过程,根据新的状态构建 React 元素树。3、React 会自动计算出新树与老树的节点差异,根据diff算法,在充分利用原有节点的基础上,对现有节点进行增删改,进行局部更翻译 2020-09-10 21:02:46 · 1122 阅读 · 0 评论 -
内存溢出,打包失败CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
报错描述CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory原因分析报错中有句关键的话,CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足,这里说的 JavaScript 其实就是 No...转载 2020-04-29 11:00:21 · 17260 阅读 · 0 评论 -
React中面试常见的问题----setState是同步还是异步?
setState它本身的方法调用是同步的,但是并不代表着调用了setState后,state立刻就更新了,这个更新是要根据我们当前执行环境的上下文来确定的。如果我处于批量更新的情况下,那我的state就不是立马更新了;如果我不处于这个批量更新的情况下,那就有可能是立马更新了,但也不一定,比如说,这里我处于一个异步渲染的情况下,...原创 2020-04-19 21:27:55 · 822 阅读 · 1 评论 -
react中ref的三种使用方式
import React from 'react'export default class RefUse extends React.Component{ constructor(props){ super(props) this.objRef = React.createRef() //创建对象,注意获取组件或dom节点时,其挂载在该对象的current...原创 2020-04-15 23:06:10 · 1637 阅读 · 0 评论 -
虚拟dom (virtual dom)(vnode)
1,虚拟DOM的逻辑(React虚拟dom到真实dom发生了什么)2,React16 更新了什么React16中引入了Fiber这个概念,从根本上解决了由于js的单线程运行,遇到计算量较大的情况,导致动画和交互卡顿的问题。Fiber的核心是实现了一个基于优先级和requestIdleCallback的循环任务调度算法 。它可以把一个任务拆分成多个小任务,并且可随时中止或恢复任务,同时也可以...翻译 2020-04-12 13:05:38 · 24953 阅读 · 1 评论 -
前端路由实现常用的两种思路,history和hash
路由的实现方式1,利用监控锚点hash的变化实现前端路由思路, (参考hash.html) 是通过锚点来改变浏览器的URL,体现在URL后面会加上#,并且可以通过window.onhashChange来监听这一变化,从而我们可以建立好hash值和对应回调函数的映射关系,然后可以通过点击a标签,实现在不刷新页面情况下,通过ajax发送请求获取异步数据来改变页面的结构。优点—实现方式...翻译 2020-04-05 16:58:47 · 1222 阅读 · 0 评论 -
react搭建脚手架,以及常见问题解决
1,步骤如下准备工作:你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6第一步,下载脚手架,并创建一个my-app文件npx create-react-app my-app 注意:第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。执行完成后,会创建一个包含如下目录的文件夹如果所生成的...原创 2020-03-14 15:29:53 · 2331 阅读 · 0 评论 -
react native走过的路
this.setState失效原因:this.setState并非同步 非同步 非同步的,所以在某些情况下,设置后可能不会立即获取到最新的值。 this.setState({ money:123 }) console.log(this.state.money) //可能获取不到最新的值解决方法 : 使用回调 th...原创 2019-03-28 12:31:29 · 142 阅读 · 0 评论