React
文章平均质量分 54
秃头的科比
希望大家多关注 我会在以后的工作生活中不断的去完善文章中的不足之处
展开
-
ref的使用
ref的使用在react的开发模式中,通常情况下不需要、也不建议直接操作DOM;但是某些特殊的情况,确实需要获取到DOM进行某些操作,如何通过创建ref来获取对应的DOM元素呢?目前有三种方式(首先需要说明的是,在这里既然有了ref,就不会再通过document的方式去直接操作DOM了)import React, { PureComponent, createRef, Component } from 'react';class Counter extends PureComponent { c原创 2021-09-10 11:22:13 · 295 阅读 · 0 评论 -
组件间的通信方式
父子组件间的通信父传子:子组件会通过props获取到父组件传递过来的数据(这个和vue一样)这里需要注意一下:对于传递给子组件的数据,有时候我们可能希望对其进行验证,尤其是对于大型项目来说: (1)如果项目中使用了ts,那么可以直接进行类型验证。 (2)如果没有的话,也可以通过prop-types库进行类型验证。import React, { Component } from 'react';import PropTypes from 'prop-types';function Chil原创 2021-09-07 08:35:23 · 158 阅读 · 0 评论 -
this的绑定问题
this的绑定问题在事件执行后,我们可能需要获取当前类的对象中相关的属性,这个时候需要用到this,如果我们这里直接打印this,会发现它是一个undefined为什么是undefined呢?原因是btnClick函数并不是我们主动调用的,而且当button发生改变时,React内部调用了btnClick函数;而它内部调用时,并不知道要如何绑定正确的this;如何解决this的问题呢?方案一:使用bind给btnClick显示绑定this方案二:定义函数时, 使用箭头函数方案三:在事件监听时直原创 2021-09-07 08:17:11 · 93 阅读 · 0 评论 -
redux-hooks的使用
redux-hooks的使用useDispatch我们在项目中不再使用繁琐的connect函数了,而是借助于redux-hoos的useDispatch来直接dispatch,而不再需要connect的mapStateToDispatch了。useSelector由于我们不再使用connect函数的mapStateToprops了,因此我们需要借助于useSelector来获取到请求回来的数据。接受两个参数: 参数一:它会接受你所想要返回的数据。 参数二:shallowEqual在不使用第原创 2021-07-27 17:56:56 · 818 阅读 · 0 评论 -
immutableJS的使用
immutableJS的使用数据可变性的问题在React开发中,我们总是会强调数据的不可变性: 无论是对于类组件中的state,还是redux中管理的state都是不建议直接去修改state本身的; 事实上在整个JavaScript编码过程中,数据的不可变性都是非常重要的;数据的可变性引发的问题(案例):我们明明没有修改obj,只是修改了obj2,但是最终obj也被我们修改掉了;原因非常简单,对象是引用类型,它们指向同一块内存空间,两个引用都可以任意修改;有没有办法解决上面的问题呢?进行对象的拷贝即原创 2021-07-27 17:36:22 · 431 阅读 · 0 评论 -
受控和非受控组件的学习
当提起这个时,一般都是与表单相互联系的。在react中,HTML表单的处理方式和普通的DOM元素不太一样:表单元素通常会保存在一些内部的state。一般DOM默认处理HTML表单的行为,会在用户点击提交时会提交到某个服务器中并且刷新页面。而在react中,并没有禁止这个行为,它依然是有效的。但是通常情况下会使用js函数来方便的处理表单提交,同时还可以访问用户所填写的表单数据。而实现这种效果的标准方式便是使用“受控组件“。在HTML中,表单元素,例如:input、textarea、select之类的表单元素原创 2021-07-18 16:49:05 · 111 阅读 · 0 评论 -
高阶组件的学习
了解高阶组件之前,需要先了解下高阶函数,因为二者非常相似。高阶函数:接受函数为参数或者返回值为函数。js中常见的filter、map、reduce等都是高阶函数,也包括memo函数。高阶组件:高阶组件本身并不是一个组件,而是一个函数,它可以接受一个组件为参数并返回一个新的组件。高阶组件并不是react API的一部分,它是基于react的组合特性而形成的设计模式。 高阶组件在一些react的第三方库中非常常见:比如redux中的connect、react-router中的withRouter。 我们将组原创 2021-07-18 10:24:30 · 113 阅读 · 0 评论 -
react性能优化——组件嵌套中的render调用问题
当父组件的render函数被调用时,其所有的子组件的render函数都将会被重新调用,性能必然是很低的。那么它们在调用render前应该有一个前提,就是只有当所依赖的state或者props发生改变时,再去重新调用render方法。解决方式一:当有些属性不需要render时,可以利用shouldComponentUpdate()生命周期函数,它默认返回true,将其改为false,从而阻断所有render的重新渲染。 方式一的弊端: (1)只适用于类组件。 (2)但是直接改为false的话原创 2021-07-18 09:19:49 · 767 阅读 · 0 评论 -
深入学习setState
问题一:为什么要使用setState开发中我们并不能通过直接修改state的值来让界面发生更新(数据值本身虽然已经发生了变化,但是界面并没有发生更新),因为当我们修改了state之后,react并没有实现类似于vue2中的object.defineProperty或者vue3中的proxy的方式去监听数据变化从而自动刷新界面,在react中我们必须通过setState去告知render函数数据已经发生了变化(这一点个人感觉vue3中的ref、reactiveAPI类似于setState)但是在react组原创 2021-07-15 20:28:47 · 694 阅读 · 0 评论 -
react如何实现插槽功能
react中是没有类似于vue中插槽的功能。但是我们可以试着实现一下(这里就更加体现出react的灵活性了)因为jsx是可以作为数据直接传递给子组件的,而不需要像vue那样提前预留好插槽的位置。所以总的来说,react是根本不需要slot插槽这个功能的。当然,如果只需要一个插槽的话,可以通过以下两个方法://父组件render() { const leftJsx = <span>aaa</span>; return ( <div>原创 2021-07-15 18:43:30 · 1992 阅读 · 0 评论 -
进一步了解jsx的本质
所有的jsx代码最终都会被 babel 转为 react.createElment() 的函数调用。const test1 = <h1>hello react</h1>const test2 = react.createElement(“h1”, null, “hello react”);ReactDOM.render(test1, document.getElementById("app"));从上面的例子中,可以看出这个 react.createElement() 函原创 2021-07-15 17:52:08 · 204 阅读 · 0 评论 -
react-hooks的学习
react-hooks首先hook指的类似useState、useRef这样的函数,hooks是对这类函数的统称。Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。class组件的优势(1)class组件可以定义自己的state,用来保存组件自己内部的状态;而函数式组件不可以,因为函数每次调用都会产生新的临时变量;(2)class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻辑,比如在comp原创 2021-07-03 00:23:51 · 225 阅读 · 0 评论 -
react路由的学习
react-router单页面富应用(SPA):整个web应用实际上只有一个页面,当URL发生改变时,并不会从服务器去请求新的静态资源,而是通过js监听URL的改变,并且根据URL的 不同去渲染新的页面;而前端路由便维护着URL和具体页面组件的映射关系,最终我们在页面上看到的实际就是渲染的一个个组件页面。前端路由原理:监听URL发生改变,同时不引起页面的刷新有两个方法: (1)通过URL的hash改变URL。 (2)通过HTML5的history模式修改URL。hash模式的原理本质上是监听原创 2021-06-30 23:47:42 · 144 阅读 · 2 评论