分类：react

2020
10-13

react的hooks的用法详解

hooks的作用它改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加。useState//声明状态const[count,setCount]=useState(0);//使用状态<p>Youclicked{count}times</p><buttononClick={()=>{setCount(count+1)}}>clickme</button>useEffect一个参数useEffect(()=>{console.log("首次渲染与更新")})模拟:compone... 继续阅读 >
2020
10-10

React 条件渲染最佳实践小结(7种)

在React中，条件渲染可以通过多种方式，不同的使用方式场景取决于不同的上下文。在本文中，我们将讨论所有可用于为React中的条件渲染编写更好的代码的方法。条件渲染在每种编程语言（包括javascript）中都是的常见功能。在javascript中，我们通常使用ifelse语句，switchcase语句和三元运算符编写条件渲染。以上所有这些方法都适用于React。但是问题是，我们如何才能有效地使用它们？像你知道的那样，React具有JSX... 继续阅读 >
2020
10-10

react-intl实现React国际化多语言的方法

本文主要介绍了react-intl实现React国际化多语言的方法，分享给大家，具体如下：效果预览ReactIntl国际化步骤创建国际化资源文件根据语言获取国际化资源引入react-intl的localdata创建LocaleProvider国际化上下文组件创建react-intl国际化上下文组件使用react-intl'scomponents&apis，进行国际化开发1.创建国际化资源文件目前我们管理资源文件的方式是在src/locales文件夹下：.├──en-US.js├──... 继续阅读 >
2020
10-10

Vue和React有哪些区别

一、监听数据变化的实现原理不同Vue通过getter/setter以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能React默认是通过比较引用的方式进行的，如果不优化(pureComponent/shouldComponentUpdate)可能导致大量不必要的VDOM得重新渲染为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变。所以应该说没有好坏之... 继续阅读 >
2020
10-10

vue或react项目生产环境去掉console.log的操作

vue或react项目生产环境去掉console.log的操作 在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。如果手动删除未免也太累了，再说以后想再开发还得重新写console。事实上webpack提供了删除console的插件，在vue-cli3里面是这样用的：首先安装terser-webpack-pluginnpminstallterser-webpack-plugin-D然后在vue.config.js文件里写插件的配置：module.exports={configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){config... 继续阅读 >
2020
10-09

React实现轮播效果

本文实例为大家分享了React实现轮播，供大家参考，具体内容如下思路1、使用全局的state进行状态管理2、设置全局下标，对当前的图片下表进行样式划分3、定时循环人物便利改变全局下标 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><metahttp-equiv="X-UA-Compatible"content="ie=edge"... 继续阅读 >
2020
10-09

利用React高阶组件实现一个面包屑导航的示例

什么是React高阶组件React高阶组件就是以高阶函数的方式包裹需要修饰的React组件，并返回处理完成后的React组件。React高阶组件在React生态中使用的非常频繁，比如react-router中的withRouter以及react-redux中connect等许多API都是以这样的方式来实现的。使用React高阶组件的好处在工作中，我们经常会有很多功能相似，组件代码重复的页面需求，通常我们可以通过完全复制一遍代码的方式实现功能，但是这样页... 继续阅读 >
2020
10-09

React冒泡和阻止冒泡的应用详解

阻止事件冒泡分三种：1：阻止合成事件往最外层document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation();2:合成事件间的冒泡，使用e.stopPropagation()；3：阻止合成事件，往处理document上的其他原生事件冒泡，需要通过e.target来判断，示例代码如下。importReact,{Component}from'react';importReactDOM,{findDOMNode}from'react-dom';classCounterextendsComponent{constructor(props){super(props);thi... 继续阅读 >
2020
10-09

React实现阿里云OSS上传文件的示例

React实现阿里云OSS上传文件的示例 简介阿里云OSS是阿里云提供的海量、安全、低成本、高可靠的云存储服务，提供99.9999999999%的数据可靠性（号称）。能够使用RESTfulAPI可以在互联网任何位置存储和访问，支持容量和处理能力弹性扩展。基本术语1.bucket：类似本地的一个文件夹2.object：oss存储数据的基本单元，类似本地的一个文件。3.region：oss存储的数据中心所在区域4.Endpoint：oss对外服务的访问域名，oss以httpapi提供服务，不同region的... 继续阅读 >
2020
10-08

JavaScript React如何修改默认端口号方法详解

JavaScript React如何修改默认端口号方法详解 问题我们在使用React的时候经常会遇到这种情况，3000端口号被占用。有时候可以关掉3000端口，但更多时候，我们需要打开多个项目的时候，就必须要开启多个端口了。这时候就需要修改默认端口号了。解决办法修改默认端口号具体做法第一步：找到start.js文件这个文件的位置在：node_modules文件夹下->react-scripts文件夹下->scripts文件夹下->start.jsnode_modules下start.js文件51行处修改，整个文件端口号只出现一次修改后运... 继续阅读 >
2020
10-08

使用React-Router实现前端路由鉴权的示例代码

使用React-Router实现前端路由鉴权的示例代码 React-Router是React生态里面很重要的一环，现在React的单页应用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的库常用的就是就是React-Router。本文想写一下React-Router的使用，但是光介绍API又太平淡了，而且官方文档已经写得很好了，我这里就用一个常见的开发场景来看看React-Router是怎么用的吧。而我们一般的系统都会有用户访问权限的限制，某些页面可能需要用户具有一定的权限才能访问。本... 继续阅读 >
2020
10-08

实例讲解React 组件生命周期

在本章节中我们将讨论React组件的生命周期。组件的生命周期可分成三个状态：Mounting：已插入真实DOMUpdating：正在被重新渲染Unmounting：已移出真实DOM生命周期的方法有：componentWillMount在渲染前调用,在客户端也在服务端。componentDidMount:在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个... 继续阅读 >
2020
10-08

详细分析React 表单与事件

本章节我们将讨论如何在React中使用表单。HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态。在HTML当中，像<input>,<textarea>,和<select>这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用setState()方法进行更新。一个简单的实例在实例中我们设置了输入框input值value={this.state.data}。在输入框值... 继续阅读 >
2020
10-08

详解React 条件渲染

在React中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React中的条件渲染和JavaScript中的一致，使用JavaScript操作符if或条件运算符来创建表示当前状态的元素，然后让React根据它们来更新UI。先来看两个组件:functionUserGreeting(props){return<h1>欢迎回来!</h1>;}functionGuestGreeting(props){return<h1>请先注册。</h1>;}我们将创建一个Greeting... 继续阅读 >