react
好好学习的文涛
这个作者很懒,什么都没留下…
展开
-
虚拟dom中,key的作用
无论是vue或者react,但我们遍历数组生成dom元素的时候,都会建议我们给每一个dom元素加上key值,而且key值最好用每一项的唯一id,而不用index值,这是为什么呢?key的作用key值的作用,其实是:追踪列表中哪些元素被添加、被修改、被移除的辅助标志。通俗点来说,就是他可以帮助我们快速对比两个虚拟dom对象,找到虚拟dom对象被修改的元素,然后仅仅替换掉被修改的元素,然后再生成新的真实dom。原理讲解一:如果没有key值,就会根据就地复用的原则,一个一个对比,然后修改渲染二:如果k原创 2020-08-12 11:08:07 · 1187 阅读 · 1 评论 -
react-hook:useState与useEffect详解
背景hook是什么呢?又改变了什么呢?我们先来看官网的原话:Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。为什么要使用hook呢?因为在react项目越来越大之后,我们会发现有时候一个class类往往很大,代码的复用性也很差,冗余的代码也很多,特别是在class类很多的时候,每个class类的生命周期的逻辑代码就很多了,维护起来更是麻烦。跟着文章往下走,你就会知道hook使用的好处以及便捷,也能理解为什么reac原创 2020-06-29 11:32:52 · 2007 阅读 · 1 评论 -
react-生命周期超详细讲解
首先,我们来看一张官方的生命周期图很多人,看到这张图的时候,都是一脸懵逼的,因为他是把所有生命周期所出现的所有场景整合在一起的,初学者难免会有点混乱,接下来,我会通过代码加场景,跟大家一一的过一遍。挂载过程1.constructor()react的初始化函数,它完成了react数据的初始化,接受一个props参数,如果想要在constructor函数中使用父组件传递过来的props的时候,就需要在super里面传递这个参数。在我的另外一篇关于constructor的文章中也提到了,如果不定义co原创 2020-06-19 16:04:06 · 489 阅读 · 0 评论 -
react-虚拟dom超详细解析
前言我们都知道,react性能好,大部分原因就是因为他用了虚拟dom,而到底什么是虚拟dom呢?他和我们平时所说的dom元素有什么不一样呢?接下来让我们一步一步解答。虚拟dom与真实dom元素先来看一段简单的代码<ul id="box"> <li>111</li> <li>222</li></ul>这段代码里面,有一个ul元素以及它包裹着的两个li元素,ul元素与li元素,就都是我们平时说的dom元素,那么用虚拟dom原创 2020-06-17 17:47:10 · 786 阅读 · 0 评论 -
setState与异步
场景学过react的人都知道,react的setState是异步的,如state = { text: "111"}handleChange() { this.setState({ text: "222" }) console.log(this.state.text) // 111}得到的结果,是111,而不是我们期望中的222,而一般我们的解决办法都是,传入第二个回调函数state = { text: "111"}handleChange() { this.原创 2020-06-17 14:49:50 · 105 阅读 · 1 评论 -
constructor、super()、super(props)的区别
对于初学react的人来说,constructor好像在每一个组件里面都是有写的,但是大部分人也都不知道他的作用的什么,更不用说里面的super了,本篇文章就带大家缕一缕这三者的关系。1:constructor与super()众所周知,react的组件大部分采用的都是es6的class语法糖写法,而constructor就是class里面的默认方法,是必须的,如果我们没有定义,那么系统会默认生成一个constructor方法。而super(),是在constructor里面,用于继承父类的,因为子类是原创 2020-06-16 16:22:10 · 1438 阅读 · 2 评论