REACT - 技术教程文章
React虚拟DOM浅析【代码】
转帖: http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/?hmsr=toutiao.io&bsh_bid=928783684在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。什么是虚拟DOM？虚拟DOM VS 直接操作原生DOM？虚拟DOM VS MVVM？对React虚拟DOM的误解？一、什么是虚拟DOM？ 在React中，render执...
2.ReactJS基础(虚拟DOM,JSX语法)【代码】【图】
将脚手架(create-react-app)创建的todolist项目精简为hello world示例即，删除自动生成的样式文件、logo.svt、App.test.js、serviceWorker.js等文件，并精简App.js和index.js里的代码，结果如下：npm run start 后，浏览器界面仅显示纯文本 Hello world ! 一，虚拟DOM首先，看一段html片段<div id="container"><p>这里是p标签里的文本节点</p><ul><li class="item">这里是li标签里的文本节点</li><li class="item">这里是li标签里的...
ReactNative学习之控件：react-native-elements
GitHub：https://github.com/react-native-training/react-native-elementsAPI：https://react-native-training.github.io/react-native-elements/API/card/中文参考网站：http://www.jianshu.com/p/6a4be11be170 分享组件：react-native-share原文：http://www.cnblogs.com/nbhhcty66/p/7923003.html
react native中的聊天气泡以及timer封装成的发送验证码倒计时【代码】【图】
今天看来情书写的文章，研究了一下大佬写的文章，自己做一点总结。其实，今天我想把我近期遇到的坑都总结一下：1.goBack的跨页面跳转，又两种方法，一可以像兔哥那样修改navigation源码，二可以用navigationActions 2.父子组件的传值，一可以用callBack 二可以用pubsub发布订阅模式 三可以用manager事件监听（a页面要显示的内容 有两种形式，一是从manager主动接收，也就是说不需要点击什么的获取数据，而是时时监听manager里...
React Native细节记录
1.环境搭建部分 官方文档0.44mac下搭建，使用homebrew安装东西，可先制定国内的镜像源http://ban.ninja/,具体操作步骤是终端输入vi ~/.bash_profile，若没有的话先创建该文件,在.bash_profile文件里粘贴export HOMEBREW_BOTTLE_DOMAIN=http://7xkcej.dl1.z0.glb.clouddn.com，然后保存退出（vi操作: 粘贴后control+c，然后输入:qw后回车），最后终端里输入source .bash_profile使其生效。可以brew install watchman看看是否OK。 ...
React使用Echarts【代码】
React使用Echarts报错Component series.line not exists. Load it first.（刚开始正常，后来页面刷不出来，一片空白） 解决import echarts from ‘echarts/lib/echarts‘;改为import echarts from ‘echarts‘; 原文：https://www.cnblogs.com/lin9966/p/13027188.html
react-ts模板2.0【代码】
最新整理的react模板2.0react模板2.0 地址戳这里整合了最新的webpack4，alloy-eslint约束, ant design v4.0.0react 16.12.0react-routerredux，redux-thunkhooks，typescriptantd v4，sass, less, dayjslodash，moment，uuid，js-cookiesuspense,lazy懒加载axios antd主题切换运行和打包$ npm i $ npm start $ npm run build-dev // 测试打包 $ npm run build-prod // 正式打包 $ npm run analyze // 分析打包 $ npm run lint // e...
在React中写一个Animation组件，为组件进入和离开加上动画/过度【代码】
问题在单页面应用中，我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果，为这么一个小功能引入第三方框架，实在有点小纠结。不如自己封装。思路原理以进入时opacity: 0 --> opacity: 1 ，退出时opacity: 0 --> opacity: 1为例元素挂载时挂载元素dom设置动画opacity: 0 --> opacity: 1元素卸载时设置动画opacity: 0 --> opacity: 1动画结束后卸载dom组件设计为了使得组件简单易用、低耦合，我们期望如下方式来调用组件：属...
[React] Define defaultProps and PropTypes as static methods in class component【代码】
class Toggle extends Component {static propTypes = {defaultOn: PropTypes.bool,on: PropTypes.bool,onToggle: PropTypes.func,children: PropTypes.oneOfType([PropTypes.func,PropTypes.array]).isRequired,}static defaultProps = {defaultOn: false,onToggle: () => {},} } 原文：http://www.cnblogs.com/Answer1215/p/7629853.html
React中Unsafe生命周期
componentWillMount, componentWillReceiveProps, componentWillUpdate 不安全： 在未来的React版本中有BUG，特别是允许异步渲染之后 16.3版本给三个周期添加UNSAFE_*标志。UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, UNSAFE_componentWillUpdate16.9版本添加或者不添加前缀UNSAFE_*，都可以使用。但是如果使用不添加前缀UNSAFE_*的话，浏览器会发出警告17.0版本移除不添加UNSAFE_*前缀的生命周期，只能使用添...
React基础篇 （3）-- 生命周期【代码】【图】
生命周期是react中的重要部分，理解它有助于我们更合理的书写逻辑。组件的生命周期可分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOM生命周期的方法有：componentWillMount ：在渲染前调用,在客户端也在服务端。componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构。可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操...
react路由权限设置【代码】
参考：https://tylermcginnis.com/react-router-protected-routes-authentication/ 解决路由私有方法创建PrivateRoute.js文件import React from ‘react‘ import { Route, Redirect } from ‘react-router-dom‘ import { connect } from ‘react-redux‘ import PropTypes from ‘prop-types‘const PrivateRoute = ({ component: Component, auth, ...rest }) => (<Route{...rest}render={props => auth.isAuthenticated === tr...
react typescript jest config (一)【代码】
1. initialize projectcreate a folder project Now we’ll turn this folder into an npm package.npm init -yThis creates a package.json file with default values.2. Install react typescript dependenciesFirst ensure Webpack is installed.npm i webpack webpack-cli webpack-merge html-webpack-plugin webpack-dev-server -DWebpack is a tool that will bundle your code and optionally all of its dependencies into...
the reactor pattern and java nio
在《java NIO》作者PPT《How to Build a Scalable Multiplexed Server With NIO》 和 Doug Lea 《Scalable IO in Java》PPT中 都有java nio的实现是通过reactor pattern 来实现的有说明。java nio作为一种跨平台IO操作。在不同平台上面封装了对应平台的IO模型。 在reactor pattern 作者中已经提及,通过reactor pattern 模式可以来实现跨平台操作。所以,java nio通过reactor pattern模式就是这样完成的。 java nio在window 平台下...
.NET开发者部署React-Native的惨痛经历（技术细节）【代码】【图】
前情摘要众所周知，搞.Net的人设置一次java的环境变量，可能都觉得实在太麻烦了，可能是因为这些年微软确实把我们给带坏了，所有东西一键安装，简单设置，打开项目直接运行就行了，而要想成功部署android开发环境，那可能需要自己填N个坑，最近FB出的React-Native比较火，哥们在不忍转学java的情况下，，虽然java不是anroid，但兄弟我还是决定用React-Native来实现自己的android梦，于是开始了数日的填坑运动，当然兄弟们不要像我学...
React 急急如律令
1.ES6ES5ES6varvar let constfunction (){}function foo(){}()=>{}foo(){}function (){ foo:function(){}}class A{ foo(){}}new A{}var name=‘aa‘, age=21;return{ name: name, age: age}var name=‘aa‘,age=21;return{name,age} module.exports=A2.JQuery2.1 查询: $(‘#id‘) $(‘.class‘)2.2 dom和jquery对象切换let $div = $(‘#div‘), div = document.getElementById(‘div‘);console.lo...
React 相关资料
为了汇集资源，这里引用这里的学习资源：https://github.com/reactnativecn/react-native-guideReact Native构建 Facebook F8 2016 App / React Native 开发指南 http://f8-app.liaohuqiu.net/React-Native入门指南 https://github.com/vczero/react-native-lesson30天学习React Native教程 https://github.com/fangwei716/30-days-of-react-nativeReact-Native视频教程(部分免费) https://egghead.io/technologies/reactReact Nat...
react native 初识react native【代码】【图】
最近找工作，总是被问道，知不知道react Native，我直接回答，没有；这就是动力了首先是windows下的环境搭建参考博客：史上最详细windows版本搭建安装react-native环境配置/http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/ 搭建开发环境http://reactnative.cn/docs/0.42/getting-started.ht...
React中用EChart写面积图【代码】【图】
UED出的设计图如下： 实际展示效果如下：调取的数据如下："staffCountList":[{"time":"2019-12-24 17:20","staffCount":2},{"time":"2019-12-24 17:10","staffCount":2},{"time":"2019-12-24 16:00","staffCount":1},{"time":"2019-12-24 15:50","staffCount":1},{"time":"2019-12-24 15:40","staffCount":2},{"time":"2019-12-24 15:30","staffCount":2},{"time":"2019-12-24 15:20","staffCount":1},{"time":"2019-12-24 15:10",...
react.js CMS 删除功能的实现【代码】【图】
页面效果图： 数据操作分析：在查询表组件的 TableData.js 中操作如下内容：给每一行绑定一个checkbox，且在点击这个 checkbox 时，触发 action 中的一个方法(formatPostCollectionList)，这个方法是用来更新选中的实体数组。formatPostCollectionList为action中的方法，需要export定义每一行的实体为一个数组，用变量 postCollections 表示如果选中当前行，则更新实体数组中的数据；如果取消当前行，则删除实体中的数据；参数为 ...
React学习笔记(四) 条件渲染与列表渲染【代码】
一、条件渲染1、条件渲染在 React 中，我们可以通过创建不同的组件封装不同的行为，然后根据应用的状态渲染对应状态下的部分内容// 定义组件封装登陆行为 class SignIn extends React.Component {constructor(props) {super(props)}render() {return <h1>Please Sign In</h1>} }// 定义组件封装注册行为 class SignUp extends React.Component {constructor(props) {super(props)}render() {return <h1>Please Sign Up</h1>} }// 根...
react-native中显示手机本地图片/视频【代码】
已知文件路径‘/data/user/0/com.ycdj/files/media/218787782/efa1d12f22d2/1235.jpg‘只需在路径前面拼上file:///即可，如：<Image source={{uri:`file:///${mediaPath}`}} style={{width:200, height:200}} resizeMode=‘contain‘ /> 视频的话，路径同上原文：https://www.cnblogs.com/ImaY/p/10401874.html
react work with angularjs together
http://blog.500tech.com/using-reactjs-with-angularjs/ http://www.funnyant.com/reactjs-what-is-it/ http://mono.software/2014/06/20/Improving-AngularJS-long-list-rendering-performance-using-ReactJS/原文：http://www.cnblogs.com/zyip/p/4813555.html
react-native服务启动，运行项目到安卓模拟器
1、在CMD中进入要启动的项目下，输入react-native start，等待启动成功。成功之后再浏览器中访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问，表示服务器端启动成功。2、在上个服务启动的情况下，重新打开一个CMD，进入项目目录下，输入命令react-native run-android运行，第一次运行的时候会下载gradle,时间较长，成功之后，会在android模拟器中安装上，出现Welcome to ReactNative等英文。 原文...
ReactJS入门指南【代码】
ReactJS入门指南 本文旨在介绍ReactJS的基本知识，并一步步详细介绍React的基本概念和使用方法等，以及相应的Demo。本文在很大程度上参考了React官方文档和官方指南。如果你英语还不错，大可直接去官网查看对应的英文文档和指南，写的非常不错；但如果你的英语跟我一样蹩脚或者不喜欢直接读文档，那么希望这篇文章能够给你带来帮助。如果你用React很久了，恰好你也看到这篇文章，欢迎指正错误！如果你不乐意看一大片文字，想直接...
react中异步组件以及withRouter的使用【代码】【图】
什么是异步组件？简单来说就是异步加载一个组件，正常情况浏览器加载的是我们打包好的bundle.js文件，那么这个文件是集合了所有js是代码，然而我们首屏加载并不需要一次性加载所有的组件，这会造成性能的损耗，所以我们可以使用异步组件，推荐使用（react-loadable）https://github.com/jamiebuilds/react-loadable，那么使用react-loadable就会造成路由跳转的问题，所以我们需要使用withRouter来解决，withRouter组件的功能是让当...
【React Native】使用React-Navigation遇到的坑
按照React-Navigation官网文档进行操作，发现一直报RNGestureHandlerModule.Direction类中为空，找了一下午答案，翻遍了谷歌，stackoverflow没找到解决办法。在五点的时候添加第三方库的时候发现react-native-gesture-handler需要部分React库。按照说明把缺少的库补全，终于跑起来了。以后安装库时需要注意warning信息了，这个坑太容易跳了。原文：https://www.cnblogs.com/WTFFFFFF/p/10491231.html
React Native 弹性布局FlexBox【代码】
React Native采用一中全新的布局方式：FlexBox（弹性布局）。可以很方便的实现各种复杂布局，是全新的针对web和移动开发布局的一种实现方式。何为FlexBox? 完整名称为：the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件。Flexbuju的主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。 在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyConte...
React:form【代码】
表单控件：input 文档在介绍控件之前，先提到了react组件自身的一个特点：状态由state掌控，改变组件状态只能用setState方法。而在html的表单里，input、radio、checkbox、select的值都是随用户输入改变的。要创建一个React的表单控件，也就是用React的方式创建表单组件：<label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label>在input控件中，value值就是一个状态state.value。当...
在React中引入IScroll插件做滚动【代码】
最近做一个H5项目，数据交互量比较大，很多页面都是从后台拿过来数据做一个列表显示，这自然就遇到了滚动。刚开始我直接使用css做法，直接添加overflow: scroll;但在微信端用户滑动会直接将整个页面拖动，露出顶部的域名和底部的黑色背景。用户反映体验不好，要改……好吧，自己动手。但这并不是好改的，因为在React中都是构建的是虚拟DOM，直接操作DOM也会对性能有一定影响。这时候网上搜了一下，拿出一个解决方案，献出部分代码：...