分类：react

2021
11-01

React中Portals与错误边界处理实现

目录Portals错误边界处理如果没有使用错误边界会怎样？注意点Portals可以说是插槽，但不同于Vue中的slot，它指的是将一个React元素渲染到指定的容器(真实DOM)中比如说，Modal组件一般默认直接作为body的真实结构的子元素渲染出来，那么我们就可以借助ReactDOM.createPortal(ReactElement,RealDOMcontainer)创建一个React元素，示例代码：importReactfrom'react'importReactDOMfrom'react-dom'importModa... 继续阅读 >

2021
10-28

React中refs的一些常见用法汇总

目录什么是Refs一、String类型的Refs二、回调Refs三、React.createRef()四、useRef五、Refs与函数组件总结什么是RefsRefs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。Ref转发是一项将ref自动通过组件传递到子组件的技巧。通常用来获取DOM节点或者React元素实例的工具。在React中Refs提供了一种方式，允许用户访问dom节点或者在render方法中创建的React元素。Refs转发Ref转发是一个可选特性... 继续阅读 >

2021
10-17

React实现导入导出Excel文件

目录表示层业务层核心插件xlsxexcel导入excel导出excel导出插件（js-export-excel）实现效果结语表示层这里我是使用的是antd的Upload上传组件引用antd部分代码import{Button,Table,Upload}from'antd';<Upload{...props}fileList={state.fileList}><Buttontype="primary">Excel导入</Button></Upload><Buttontype="primary"onClick={handleExport}>Excel导出</Button>业务层首先分析一下工作：导入Excel工作... 继续阅读 >

2021
10-15

基于visual studio code + react 开发环境搭建过程

开发环境windows开发工具visualstudiocodenode安装和npmwindows安装node可以直接在node官网直接下载直接当作普通软件安装即可。安装完成可以在控制台中运行node测试是否安装成功win+r输入cmd,直接在终端输入node-v输出版本号及已经成功安装。目前新版本的node自带npm(npm是随同node一起安装的包管理工具)。这里安装好了node并且测试安装成功之后，可以继续在控制台输入npm-v检查是不是安装成功。同样成功... 继续阅读 >

2021
10-12

教你如何从 html 实现一个 react

什么是ReactReact是一个简单的javascriptUI库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。前言📝👉我们认为，React是用JavaScript构建快速响应的大型Web应用程序的首选方式。它在Facebook和Instagram上表现优秀。官网地址... 继续阅读 >

2021
10-12

React 并发功能体验(前端的并发模式)

React是一个开源JavaScript库，开发人员使用它来创建基于Web和移动的应用程序，并且支持构建交互式用户界面和UI组件。React是由Facebook软件工程师JordanWalke创建，React的第一个版本在七年前问世，现在，Facebook负责维护。React框架自首次发布以来，React的受欢迎程度直线飙升，热度不减。2020年10月，React17发布了，但令人惊讶的是——“零新功能”。当然，这并不是真的表示没有任何新添加的功能，让广... 继续阅读 >

2021
09-30

react中的DOM操作实现

目录前面的话使用场景ref【HTML元素】【类组件】【函数式组件】【对父组件暴露DOM节点】非受控组件【默认值】ReactDOM【render()】【unmountComponentAtNode()】【findDOMNode()】新ref前面的话某些情况下需要在典型数据流外强制修改子代。要修改的子代可以是React组件实例，也可以是DOM元素。这时就要用到refs来操作DOM使用场景下面是几个适合使用refs的情况1、处理焦点、文本选择或媒体控制2、触发强制动... 继续阅读 >

2021
09-24

react纯函数组件setState更新页面不刷新的解决

目录问题描述：原因分析：解决方案：补：react中，hooks钩子时useState更新不渲染组件的问题问题描述：const[textList,setTextList]=useState(原数组);setTextList(新数组);当修改原数组时，如果原数组是个深层数组（不只一层），使用setTextList修改时，不会触发页面刷新原因分析：这个涉及到可变对象he不可变对象的知识，在vue和react中，如果更新可变对象时，可能会引起视图更新，这是因为，vue和react默认都是浅监听，只会... 继续阅读 >

2021
09-24

react 跳转后路由变了页面没刷新的解决方案

目录问题解决方案问题这样的问题貌似原因还挺多的，我的问题是带参数的url不能刷新，router5.0版本，使用withRouter关联组件进行页面跳转如下所示路由代码解决方案在路由组件上最上层元素上加一个key增加路由的识别度，因为普通的跳转是根据path来识别的，但是path带上参数时，路由无法精确识别。不过，在跳转页面的时候，每个地址都会在localtion对象里添加一个key。如下打印//组件挂载componentDidMount(){console.lo... 继续阅读 >

2021
09-24

浅谈React Component生命周期函数

React组件有哪些生命周期函数？类组件才有的生命周期函数，包括ES6语法的class以及create-react-class模块：分为几个阶段：挂载，更新，卸载，错误处理；1，挂载：constructor(常用)、staticgetDerivedStateFromProps、render(常用)、componentDidMount(常用)constructor是类组件的构造函数，在这可以初始化组件的state或进行方法绑定如：constructor(props){super(props);this.state={test:'test'};this.someFn=this.someFn.... 继续阅读 >

2021
09-24

React列表栏及购物车组件使用详解

本文实例为大家分享了React列表栏及购物车组件的具体代码，供大家参考，具体内容如下一、组件介绍商家详细界面（StoreDetail组件）：importReactfrom'react';importaxiosfrom'axios';importGoBackfrom'../smallPage/GoBack';import'../../Assets/css/storeDetail.css';importMenuListfrom'../../Mock/MenuList';importOrderfrom'../menuPage/Order';importEvaluatefrom'../menuPage/Evaluate';importBusiness... 继续阅读 >

2021
09-22

React如何创建组件

目录前言组件介绍创建类组件关于state关于render创建函数组件渲染组件合成组件提取组件Props是只读的前言这节我们将介绍React中组件的类别，以及如何创建和使用组件。本文会向你介绍以下内容：创建类组件创建函数组件渲染组件合成组件提取组件Props是只读的组件介绍组件(Components)让你可以将用户界面分成独立的，可复用的小部件，并可以对每个部件进行单独的设计。从定义上来说，组件就像JavaSc... 继续阅读 >

2021
09-14

关于React Native 无法链接模拟器的问题

ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且ReactNative已经用于生产环境——FacebookGroupsiOS应用就是基于它开发的。解决方法(一)：去到android/app/build.gradle文件，按照如下配置使用以上方法，使用r热更新，显示无法连接模拟器。猜测是AndroidStudio模拟器的问题。把AndroidStudio卸载，整个安装目录、模拟器数据删除。再重装AndroidStudio，创建新的模拟器。重新run... 继续阅读 >

2021
09-14

React-vscode使用jsx语法的问题及解决方法

问题描述安装了插件ES7React/Redux/GraphQL/React-Nativesnippets还是不能完全支持所以我参考了博客,得出了我的解法解决方法打开设置搜索includeLanguages搜索的结果如下(这个wxml是我之前设置的微信wxml作为html支持emmet语法)点击添加项javascript:javascriptreact填写这个项,就可以了,你会发现他在上面写出来了"javascript":“javascriptreact”,跟我参考的博客写法类似这样就大功告成啦~以上就是React-vscode使用jsx语法的... 继续阅读 >

2021
09-10

React Hooks使用常见的坑

ReactHooks是React16.8引入的新特性，允许我们在不使用Class的前提下使用state和其他特性。ReactHooks要解决的问题是状态共享，是继render-props和higher-ordercomponents之后的第三种状态逻辑复用方案，不会产生JSX嵌套地狱问题。为什么会有Hooks？介绍Hooks之前，首先要给大家说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。... 继续阅读 >

2021
09-10

React引入antd-mobile+postcss搭建移动端

安装antd-mobile全局引入npminstallantd-mobile--save在App.js引入cssimport'antd-mobile/dist/antd-mobile.css';在jsx使用antd组件importReactfrom'react';import{Button}from'antd-mobile';constindex=()=>{return(<div><Buttontype="primary">primary</Button></div>);}exportdefaultindex;按需引入npminstallbabel-plugin-import-s安装插件，覆盖webpack配置cust... 继续阅读 >