分类：React

2020
09-28

react基本安装与测试示例

本文实例讲述了react基本安装与测试。分享给大家供大家参考，具体如下：语法特点：声明式编码：只在意结果不在意过程组件化编码：html,css,js的集合单向数据流：vue也是单向数据流，有一个双向绑定功能。支持服务器端编写高效：先生成一个虚拟DOM，然后在DOM中操作，再一次性返回到真实界面首先安装好node.js和npm安装Webpack：npminstall-gwebpack安装对应的loader:npminstallbabel-loader--save-de安装react$npminsta... 继续阅读 >
2020
09-27

React.js组件实现拖拽排序组件功能过程解析

因为使用了react.js技术栈，所以封装优先考虑输入和输出。基于数据驱动去渲染页面、控制拖拽元素的顺序。由于我不考虑兼容IE8等旧版本浏览器，拖拽的效果采用了HTML5的拖放（Drag和drop）。当然，如果要求兼容性丰富，使用鼠标点击的相关事件也很简单。实现的效果如下：第一步是先了解H5拖放的相关属性，MDN上有详细的说明，链接有一点需要注意的是，react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法。例如原生的cl... 继续阅读 >
2020
09-27

react 原生实现头像滚动播放的示例

react 原生实现头像滚动播放的示例 本文介绍了react原生实现头像滚动播放的示例，分享给大家，具体如下：之前需要的是下面这个效果现在。。。憋说话，先看看效果。感觉很简单呀，直接渲染，transform就可以了，嗯嗯，是的没错。渲染出来，获取元素，然后添加css，美中不足衔接不是很顺畅，不过还是做出来了。<divclassName="avatar-transform"ref={this.tmall}>{!!personAvatar.length&&personAvatar.map((item,index)=>{return<div... 继续阅读 >
2020
09-27

React Native 实现热更新并自动签名打包功能

项目背景：手动link的安卓App1.下载react-native-code-pushnpminstall--savereact-native-code-push2.在android/settings.gradle文件下新增：include':app',':react-native-code-push'project(':react-native-code-push').projectDir=newFile(rootProject.projectDir,'../node_modules/react-native-code-push/android/app')3.在android\app\src\main\java\com\app\MainApplication.java 文件中修改...//1.Import... 继续阅读 >
2020
09-27

react axios 跨域访问一个或多个域名问题

react axios 跨域访问一个或多个域名问题 1.react+axios跨域访问一个域名配置非常简单，只需要在当前的package.json文件里面配置："proxy":"http://iot-demo-web-dev.autel.com",//当然，这里是一个假地址像这样：这样跨域便完成了，当然，也可以像网上那样，多几段代码，像这样：我不知道你们写入这段代码会怎么样，反正我是会报错，具体报错是怎么我这里没办法展示，因为我的项目已经运行了npmruneject这个命令报错的意思大概就是proxy希望得到的是一个字符... 继续阅读 >
2020
09-27

react 不用插件实现数字滚动的效果示例

突然要实现个数字滚动效果，网上一搜，一大堆都是用组件的。我只是想实现个简单的效果而已，决定还是自己搞搞吧。先来看看效果吧也不多说了，实现起来不难，但是有点细节问题需要自己好好琢磨一下大概思路，1.一开始为0，获取第一次数据，记录下来2.和前一次数据进行对比3.然后transform4.最后收工好了，附上代码、exportdefaultclassNumberextendsReact.Component{constructor(props){super(props);this.state=... 继续阅读 >
2020
09-25

原理深度解析Vue的响应式更新比React快

前言我们都知道Vue对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。例子举例来说这样的一个组件：<template><div>{{msg}}<ChildComponent/></div></template>我们在触发this.msg='Hello,Changed~'的时候，会触发组件的更新，视图的重新渲染。但是<ChildComponent/>这个组件其实是不会重新渲染的，这是Vue刻意而为之的。在以前的一段时间... 继续阅读 >
2020
09-25

react国际化化插件react-i18n-auto使用详解

react-i18n-auto专门为中文国际化提供的自动化方案，快速迭代国际化开发，方法如下安装npminstallreact-i18n-auto--save-dev第一步：添加babel插件配置（.babelrc添加方式）{"plugins":["@babel/plugin-transform-runtime","react-i18n-auto","..."]}第二步：添加自动化配置i18n.config.jsconstgenerator=require('react-i18n-auto/generator')constpath=require('path')generator.gen({excluded:/node_mod... 继续阅读 >
2020
09-24

记一次react前端项目打包优化的方法

记一次react前端项目打包优化的方法 前文之前一年多前接手的一个react项目，前段时间因为做业务中台项目，对公司现有的应用项目做中台化改造，这期间将项目部署到uat环境，测试期间，测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久，白屏时间超过30s，体验很差，生产不至于这么慢但也是白屏时间挺长的，所以减少白屏时间增加用户体验成为了当务之急。复制代码分析通过控制台判断加载资源时间还有资源大小通过开发者工具可以看到白屏的主要原因在于bundle.js... 继续阅读 >
2018
07-31

为什么说React是UI的未来

为什么说React是UI的未来 我们曾经认为太阳围绕地球运行，把瘟疫看作神对人类的惩罚，而现在我们坚信MVC架构和双向数据绑定就是构建WebUI程序的最佳方式。过去，人们没有更好的方式来探寻这个世界，由于认知的局限，人们对这些“误解”深信不疑。最终，天文学家证明了日心说，医生发现疾病是由细菌引起的。类似的，React引入了单向数据流的概念。这些发现都没有立刻得到大众认可。伽利略的理论被认定为异端邪说。Semmelweis博士发现疾病源... 继续阅读 >
2018
03-12

React 是怎样炼成的

React 是怎样炼成的 本文主要讲述React的诞生过程和优化思路。内容整理自2014年的OSCON-ReactArchitecturebyvjeux，虽然从今天（2018）来看可能会有点历史感，但仍然值得学习了解。以史为鉴，从中也可以管窥Facebook优秀的工程管理文化。字符拼接时代-2004时间回到2004年，MarkZuckerberg当时还在宿舍捣鼓最初版的Facebook。这一年，大家都在用PHP的字符串拼接（StringConcatenation）功能来开发网站。... 继续阅读 >
2018
02-21

2018，如何成为一名React Native开发者？

2018，如何成为一名React Native开发者？ 随着移动端开发和React的流行，越来越多的人想要学习ReactNative。本文将向你推荐一些自学ReactNative的恳切建议，介绍一些关于ReactNative的学习资源，并推荐一些简单实用的开发工具。相信只要按照本文所述的方法实践，你一定能更快速得成为一名ReactNative开发者。如果你已经看过TheStateofJavaScript2017（2017年JavaScript状态调查）的结果，你会发现许多有趣的数据。其中突出的一点是：许多人想要学习Re... 继续阅读 >
2016
09-10

React 入门实例教程

React 入门实例教程 现在最热门的前端框架，毫无疑问是React。React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。这个... 继续阅读 >