REACT - 技术教程文章
react 数组删除某一项更新setState无效的问题，react js怎么删除数组某一项，splice删除了某一项页面数据却不变【代码】
前言：相信许多人应该踩过这个坑，使用数组splice方法删除时候，然后通过setState更新数组，setState不工作。打印原数组已经删除了某一项，页面数据却不变。1、错误实例 removeEntities = (entities) => {const { arr } = this.state;arr.map((item, index) => {if (item === entities) {arr.splice(index, 1);this.setState({arr: arr, }); console.log(arr) //这里打印发现arr已经发生了变化，但是setState在页面...
react之引用echarts【代码】
react之引用echartsnpm：npm install echarts --save 代码：import React, { Component } from ‘react‘;// 引入 ECharts 主模块 import echarts from ‘echarts/lib/echarts‘; // 引入柱状图 import ‘echarts/lib/chart/bar‘; // 引入提示框和标题组件 import ‘echarts/lib/component/tooltip‘; import ‘echarts/lib/component/title‘;class EchartsTest extends Component {componentDidMount() {// 基于准备好的dom，初...
react native 热更新教程 react-native-pushy【代码】【图】
react-native-pushy 热更新是由中文网推出的 中文网维护 还是支持国内的吧 过程中如果终端不小心关闭了 请 打开终端 cd 命令到你的项目文件夹 然后继续下一步 ！android 环境按照react native 中文网搭建完成之后 是没有NDK的 要自己去下载 推荐使用 r10e百度网盘 下载 https://pan.baidu.com/s/1PoqMBV1OKyydOXYc_GzrZA 没有提取密码 版本 并且设置环境变量 并设置环境变量ANDROID_NDK_HOME，指向你的NDK根目录(例如/User...
[React] Use React Context to Manage Application State Through Routes【代码】
We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down through the component tree. // index.js ReactDOM.render(<MuiThemeProvider><Router><App /></Router> </MuiThemeProvider>, document.getElementById(‘ro...
React – Native 踩坑记
运行的时候先报错说can’t be opened because it is from an unidentified developer，这是osx自己安全设置搞太高，去安全选项改了（allow apps download from anywhere）之后。又报错说permission问题，于是在终端用(chmod -R 755 /项目根目录)(主意:755后面一定要加空格)把所有文件都改成755权限，然后就可以完美运行了。用模拟器和真机调试时，环境不同，在工程AppDelegate.m的- (BOOL)application:(UIApplication *)applicatio...
React-Native OpenGL体验一【图】
昨天初体验了一把SVG一个并不是多么复杂的动画，我在iOS模拟器上体验的是流畅的，但是在Android真机上体验，还是比较卡的。下面来介绍一个OpenGL的第三方库：下面是我运行的里面Demo的效果：至于如何使用者一个库，文档已经写的很清楚啦，下面是网址：github：https://github.com/ProjectSeptemberInc/gl-react-native/文档：https://projectseptemberinc.gitbooks.io/gl-react/content/ 原文：http://www.cnblogs.com/weifengzz/p...
ReactJs入门【代码】【图】
ReactJs入门教程-精华版现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这...
React-native Android Java Module如何暴露自己的方法给js【代码】
最近在看React-native，对内部实现很感兴趣，自己写了Module注册进去，并且在js中调用，很好奇自己的方法是怎么暴露给js的，看了BaseJavaModule的源码，里面有方法是如何暴露的。@Override public final Map<String, NativeMethod> getMethods() { Map<String, NativeMethod> methods = new HashMap<String, NativeMethod>(); Method[] targetMethods = getClass().getDeclaredMethods(); for (int i = 0; i < targetMethods...
React Navigation 学习【代码】
React Navigation： Android 和 iOS 设备上的路由工具，包括手势和动画。 零、环境篇在使用 react-navigation 之前，我们需要创建一个 react-native 项目。（参考https://reactnative.cn/docs/getting-started） 一、Navigator 的种类和创建在 web 项目中的 react-router，只负责功能实现，样式是需要开发者自己去设计的。而 react-navigation 自带了几种常见的交互和样式。它共有四种常用的 Navigator： Stack 的功能与 react-rou...
react踩坑-各种异常解决方案【图】
1.react项目导入PropTypes报错： Typo in static class property declaration react/no-typos如果使用PropTypes一直报错，先看看是不是大小写的问题，应该是propTypes 参考文章： https://blog.csdn.net/Beuty_Chen/article/details/107019128学习参考：https://blog.csdn.net/Super_LD/article/details/80717232原文：https://www.cnblogs.com/yjiangling/p/13229526.html
React获取文本框的值【图】
一、通过event对象信息的方式 二、使用ref使用ref自定义一个属性，可以通过this.refs.属性名称.value获取内容 原文：https://www.cnblogs.com/home-/p/11811611.html
react+webpack+redux+router+ant 构架react开发环境（1）【代码】【图】
需要安装的软件 node.js npm推荐使用使用node@6.3.0以上的版本，因为6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm，因为伟大的墙，所以介意大家更换镜像，安装完毕之后，打开终端（mac）window电脑因该是cmd,输入命令 node -v 会看到当前的node版本号，就说明安装成功了，可以下面的步骤了。构建项目新建一个文件夹使用webstorm编辑该文件夹，之后打开控制台，输入 npm init 来生成一个 package.json 的文件夹（...
react native for Android （make you first android app）【图】
第一步：如果你的电脑安装了node，恭喜你，第一步完成；如果没有，那请先安装node。第二步:安装react-native-cli,在windows下需要从github签下来的react-native里的react-native-cli，直接执行npm install react-native-cli 不好使，当你创建项目的时候会出错。github地址：http://www.github.com/facebook/react-native， 将整个react-native-master down 下来，进入到react-native-cli目录下，执行 npm install -g第三步：...
react-redux 记录【代码】
react-redux提供两个关键模块：Provider和connect。ProviderProvider这个模块是作为整个App的容器，在你原有的App Container的基础上再包上一层，它的工作很简单，就是接受Redux的store作为props，并将其声明为context的属性之一，子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到store。不过我们的组件通常不需要这么做，将store放在context里，是为了给下面的connect用的。这个是Provider的使用示例：...
react 中的 PureComponent
React.PureComponent最重要的一个用处就是优化React应用，因为它减少了应用中的渲染次数，所以对性能的提升是非常可观的。原理：在普通的 componnet 组件中，shouldComponentUpdate 使用来限定组件是否应该被更新的，他的默认返回值都是 true，所以即便是 state 和 props 没有发生改变时，也会导致组件重绘。因此针对上述情况，React 引入了 PureComponent 纯组件，它改变了 shouldComponentUpdate 生命周期方法，会自动判断 state...
React.js - 第1天【代码】
React.js - 第1天1. React简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友） 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。Angular1 2009 年 谷歌 MVC 不支持 组件化开发由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web...
ReactNative之Redux详解【代码】【图】
用redux有一段时间了，感觉还是有必要把其相关的知识点系统的总结一下的，毕竟好记性不如烂笔头。上篇博客更新了关于《ES6中的迭代器、Generator函数以及Generator函数的异步操作》的内容，该内容时saga的基础，稍后会总结saga相关知识点。循序渐进，本篇博客主要总结的是Redux相关的内容，然后下篇博客打算总结一下react-redux, 以及redux-thunk、redux-saga中间件。 一、Redux与iOS中的Notification的比较Redux 的功能和作用就是...
React的组件模式【代码】【图】
组件是 React 的核心，因此了解如何利用它们对于创建优秀的设计结构至关重要。什么是组件根据 React 官网的介绍，“组件让你可以将 UI 分割成独立的、可重用的部分，并独立管理每个部分。”当你第一次安装 npm install react 时，会得到一件事:组件及其 API。与 JavaScript 函数类似，组件接受名为 “props” 的输入并返回 React 元素，该元素描述(声明)用户界面(UI)的外观。这就是为什么 React 被称为声明性 API，因为你告诉它你希...
React 基础笔记【代码】
概览React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript库。可以将一些简短、独立的代码片段组合成复杂的UI界面，这些片段被称为“组件”。React 大体包含下面这些概念：组件JSXVirtual DOMData Flow组件可以将UI 拆分为独立且复用的代码片段，每部分都可独立维护。 组件，从概念上类似于 JavaScript 函数。它接受任意的参数（即 “props”），并返回用于描述页面展示内容的React 元素。 自定义组件命名：必须以大写字...
React + fetch API + 百度地图api + 跨域 填坑【代码】
做项目遇到一个百度地图api 的跨域问题。由于使用fetch ，在调用类似http://api.map.baidu.com/geocoder/v2/callback=renderReverse&location=39.983424,116.322987&output=json&pois=1&ak=您的ak 的时候，不可避免的出现了跨域问题。 fetch(baseUrl + ‘location=39,116&output=json&ak=您的ak&callback=showLocation‘,{mode:‘no-cors‘,// credentials: ‘include‘,headers:{ Accept: ‘application/json‘,}}).t...
React系列——websocket群聊系统在react的实现【代码】【图】
前奏这篇文章仅对不熟悉在react中使用socket.io的人、以及websocket入门者有帮助。下面这个动态图展示的聊天系统是用react+express+websocket搭建的，很模糊吧，要得就是这样的效果，我自己开了2个窗口，创建2个用户自问自答。没有什么高深的技术，对于很多想接触websocket的前端工程师来说，不擅长后端的websocket代码可能是硬伤。开发环境服务端：express服务器客户端：react技术栈，开发环境采用前端服务器的方式，打包后将静态...
react+redux构建淘票票首页【代码】【图】
react+redux构建淘票票首页描述 在之前的项目中都是单纯的用react，并没有结合redux。对于中小项目仅仅使用react是可以的；但当项目变得更加复杂，仅仅使用react是远远不够的，我们需要将UI渲染和数据处理区分开，因此我们需要引入redux来管理数据层。写该小demo的目的主要是为了在理论学习的基础上更好的进行实践，通过自己亲手写个小项目我们才能更好的理解redux是如何管理数据层的。数据是取自淘票票官方二月份的部分数据。技术...
react搭建项目问题【图】
根据rantd搭建项目：1、引入react项目无样式。 解决：2、model按需加载。 解决： 原文：https://www.cnblogs.com/na-w/p/11264483.html
React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱 （中）【代码】
最近写React一直在纠结样式的问题，今天找了篇看起来很不错的文章，认真读三遍先...原文链接：https://juejin.im/post/5b39e63ae51d4562aa017c81React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱 （中）上篇 介绍了 React 现在流行的 CSS 解决方案。本篇就直接进入主题详细讲讲我最喜欢的解决方式之一：tachyons个人认为，tachyons 适合小的、样式不是重点的项目以及写 Demo， 但这不代表不能用 tachyons 完成大项目和漂亮的...
React（3） --react绑定属性【代码】
react绑定属性/* react绑定属性注意：class要换成classNamefor要换成 htmlForstyle:<div style={{"color":‘red‘}}>我是一个红的的 div 行内样式</div>其他的属性和以前写法是一样的*///组件名称首字母大写、组件类名称首字母大写class Home extends React.Component{// 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用...
react-router-dom【代码】
1. BrowserRouter 与 HashRouter最显著的区别是，HashRouter的URL中含#，例如：http://example.com/#/your/page2. Link 与 NaviLink 在页面中都会以<a></a>的形式渲染出来。<NavLink to="/react" activeClassName="hurray">React </NavLink>NaviLink是一种特殊的Link, 当URL为to属性的值时，其style为activeClassName中指定的样式。3. webpack内置就支持code splitting, 但要使用babel（将JSX编译为JavaScript）时，需安装 @babel/...
如何在React中处理REST API请求【代码】
REST API通常用于Web开发中。它们是Web应用程序用来彼此“交谈”的编程接口。它们用于访问功能部件和数据。“ REST”（代表性状态转移）是定义API属性的概念。本文将重点介绍如何使用基于Web的API从数据库中检索数据。 Axios是一个npm软件包，允许应用程序将HTTP请求发送到Web API。要在您的React应用程序中使用Axios，请使用以下命令：npm install axios要么yarn add axios在创建react组件之前，请按照以下步骤将React和Axios导入...
《React后台管理系统实战 ：二》antd左导航：cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱【代码】【图】
一、admin页面布局及路由创建0）cmd批量创建目录及子目录//创建各个目录，及charts和子目录bar md home category product role user charts\bar charts\line charts\pie 或 mkdir home category product role user charts\bar charts\line charts\pie目录结构│ admin.jsx │ ├─category ├─charts │ ├─bar │ ├─line │ └─pie ├─header │ header.less │ index.jsx │ ├─home ├─left │ in...
react生命周期总结【图】
当通过createClass创建了组件之后，该React组件就有了生命周期。通常一个React组件的生命周期可分为三个阶段：Mounting：挂载组件，也就是组件实例化ReciveProps：存在期，在这个时期组件的props和state会变化，重新渲染组件Unmounting：卸载组件，也就是组件被销毁 React在生命周期中提供了10种API： 1.getDefaultProps()：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。 2.getI...
react native ios版本热更新【代码】
react native 热更新的好处js脚本代码改变了，比如对ui进行了一些修改，客户端要是想更新的话，如果直接下载apk 或者ipa,一个是浪费流量，还有比较麻烦热更新只要下载打包好的bundle 文件，然后进行替换就可以了思路比较简单，客户端跟服务端都维持 一个bundle版本信息，如果服务端的版本比客户端的 版本新就下载，然后替换掉 重新渲染就OK了具体实现，如果没有 热更新，载入bundle的代码是这样的jsCodeLocation = [[RCTBundleURLP...