REACT - 技术教程文章
一步步搭建react-native环境(苹果OS X)【代码】【图】
因重新升级了系统，一步步搭建react-native环境。1、安装Homebrew 打开终端命令->ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" (注：ruby命令苹果系统自带的，如果没有则需安装。) 等待安装完成，输入 brew -v是否已经安装成功。2、安装curl 使用brew来安装curl（也可以使用wget）->brew install curl(或brew install wget)3、安装nvm并授权 使用curl安装->curl -...
18-React.createElement.html【代码】
<div id=‘root‘></div><script src="./react.js"></script><script src="./react-dom.js"></script><script src="./babel.min.js"></script><script type="text/babel">//JSX :本质是react.createElement函数得语法糖// const el=<h2 className="box">hello,react</h2> //jsx等效于//第一个参数,待创建得元素名称//第二个参数,待创建得元素得属性//第三个参数,待创建得元素得内容或子元素 const el=React.createElement(‘h2‘...
react-native-easy-app 详解与使用之（二） fetch【代码】【图】
react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android)，特别是在从0到1的项目搭建初期，至少可以为开发者减少30%的工作量。 react-native-easy-app 主要做了这些工作：1. 对AsyncStorage进行封装，开发者只需几行代码即可实现一个持久化数据管理器。2. 对fetch进行封装，使得开发者只需关注当前App的前后台交互逻辑和协议，定义好参数设置及解析逻辑即可。[3. 重新封装了RN的View、T...
使用react进行父子组件传值【代码】【图】
在单页面里面，父子组件传值是比较常见的，之前一直用vue开发，今天研究了一下react的父子组件传值，和vue差不多的思路，父组件向子组件传值，父通过初始state，子组件通过this.props进行接收就可以了；子组件向父组件传值需要绑定一个事件，然后事件是父组件传递过来的this.props.event来进行值的更替，话不多说，上代码：父传子：父组件：自定义名<ChildCom content={‘我是父级过来的内容‘}/> 子组件：使用this.props.自定义...
【react】React学习：状态(State) 和 属性(Props)
React ：元素构成组件，组件又构成应用。React核心思想是组件化，其中 组件 通过属性(props) 和 状态(state)传递数据。 State 与 Props 区别props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身...
[React + Functional Programming ADT] Create Redux Middleware to Dispatch Multiple Actions【代码】
We only have a few dispatching functions that need to be known by our React Application. Each one actually has multiple actions that need to be dispatched. While we could just have many imperative calls to dispatch in our dispatching functions, but why not use it as an excuse to use an array and write some middleware.We will create a middleware function that will check dispatched actions to see if...
NIO selector 多路复用reactor线程模型【代码】
NIO selector 多路复用reactor线程模型package com.study.hc.net.nio;import java.io.IOException; import java.net.InetSocketAddress; import java.nio.ByteBuffer; import java.nio.channels.*; import java.util.Iterator; import java.util.Random; import java.util.Set; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent.FutureTask; import java.util.c...
ReactiveX Operators
This documentation groups information about the various operators and examples of their usage into the following pages:Creating ObservablesCreate, Defer, Empty/Never/Throw, From, Interval, Just, Range, Repeat, Start, and TimerTransforming Observable ItemsBuffer, FlatMap, GroupBy, Map, Scan, and WindowFiltering ObservablesDebounce, Distinct, ElementAt, Filter, First, IgnoreElements, Last, Sample, S...
React相关（二）
1、reduxredux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理主要有三个核心方法，action，store，reducer工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也...
get started with React Native－001【图】
http://facebook.github.io/react-native/docs/getting-started.html#contentRequirements OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.New to Xcode? Download it from the Mac App Store.Homebrew is the recommended way to install node,watchman, and flow.brew install node. New to node or npm?brew install watchman. We recommend installing watchman,otherwise yo...
前端框架React Js入门教程【精】【图】
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJS的风采吧~~ 章有点长，耐心读完，你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开...
使用框架注意事项:vue-react
最近在学习react和vue，两者其实有很多地方相似。首先都是使用虚拟DOM来实现页面的局部状态的刷新。 ## 图片读取- react的是用./src 来找图片路径- vue是把文件放在static文件夹里 ## 渲染页面 1、字符串模版 ${} 2、react ：{} 3、vue :{{}} ## modules分包 - store里面的文件都是js文件 一级index modules文件是二级 ##Vuedatacreatedmethodscpmupted ##Vuexstatemutationsactionsgettermodules原文：https://www.cnblogs.com/op...
React Hooks新特性学习随笔【代码】
React Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。前言本篇主要以讲解语法为主。useState这个例子用来显示一个计数器。当你点击按钮，计数器的值就会增加，现在我们的写法如下，class Example extends React.Component {constructor(props) {super(props);this.state = {count: 0};}render() {return (<div><p>You clicked {this.state.count} times</p><button onClic...
用react + redux + router写一个todo【图】
概述最近学习redux，打算用redux + router写了一个todo。记录下来，供以后开发时参考，相信对其他人也有用。注意：我只实现了Footer组件的router，其它组件的实现方法是类似的。由于react-router升级到V4，所以redux官网的demo有些地方不再适用。代码代码请见我的github组织架构如下图：原文：https://www.cnblogs.com/yangzhou33/p/9095378.html
ReactNative学习之Html基础【代码】【图】
前言： React Native开发作为一种新型的移动开发方式，个人觉得App的一部分需求会逐步替换成这种方式，也是公司移动开发人员所必须掌握的一种开发技术，所以鉴于这种情况我觉得很有必要学习一下，特此开贴记录一下整个学习过程。什么是HTML文件？HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 一个HTML文件的...
在Windows上搭建React Native Android开发环境【图】
安卓环境配置安装JDK安装完成后,使用命令行检查版本 java -version安装Android Studio 以及SDK 下载AS和SDK，建议使用http://www.androiddevtools.cn/，这里整理得比较清晰，SDK下载可能要使用国内镜像，具体使用上面的网址有介绍。 这里需要注意设置环境变量ANDROID_HOME 1. 打开控制面板，选择系统和安全->系统->高级系统设置->高级->环境变量->新建，变量名填写ANDROID_HOME，变量值填写你把Android SDK解压后放置的位置。 ...
react从入门到熟悉（回顾react）【代码】【图】
首先npm和node环境就不说了，不懂得参考我写的vue2.0安装，里面有npm和node安装的介绍react开发参考官网创建react项目搭建开发环境，安装的是最新版npx create-react-app my-app(这个是项目名称)安装完成后cd my-app 直接npm run start 看到运行之后的效果 先按官网走一遍基础吧JSX简介JSX是一个Javascript的语法扩展，了解下jsx编译Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。 const element = (<div classN...
React-Native 遇到的坑
一、错误日志：Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.这个错误是在使用 RN官网推出最新的列表组件 FlatList 是出现的红色警告，出现这个错误可以正常运行，就是每次调试时看到它总觉得怪怪的，所以就查资料处理了，下面给出解决方案：解决示例代码片段：<FlatList style={myStyle.newsList} ref={(flatList)=>th...
Vue与React比较
与React相似：（1）虚拟DOM（Virtual DOM）虚拟DOM的诞生是基于：改变真实的DOM状态远比改变一个JS对象的花销要大的多。虚拟DOM是一个映射真实DOM的JS对象，当有变化产生时，就会创建一个新的虚拟DOM对象，计算新旧Virtual DOM的差别，然后把这些差别应用在真实的DOM上。虚拟DOM的本质是嵌套着数组的原生对象，当新一项被加进当前JavaScript对象时，一个函数会计算新旧Virtual DOM的差异且反应在真实的DOM上。高性能框架提供了计算...
React基础语法 之 生命周期函数【图】
什么是声明生命周期函数：生命周期函数是组件在某一个时刻会自动执行的函数。 一：挂载阶段（Mounting）执行的生命周期函数： componentWillMount（） == UNSAFE_componentWillMount（） 表示：组件将要挂载阶段自动执行 render（） 表示：渲染页面内容时自动执行 componentDidMount（） ...
vue和react页面秒杀倒计时实时更新【图】
刚好做到一个优惠券秒杀显示时间，倒计时时间，效果如下， 主要用到定时器 setInterval 思想：定义一个定时器，完成之后一定要再生命周期内销毁定时器1.vue中使用，在 mounted 生命周期里定义一个计时器， beforeDestroy 销毁定时器 mounted(){ let _this = this this.timerID = setInterval(() => { this.useTime = _this.ShowCountDown(this.startTime,this.endTime) },1000); },销毁定时器 be...
react项目搭建和启动【代码】【图】
1.全局安装webpacknpm install webpack然后在启动的时候就会报错 改成带上版本号就不会报错npm install webpack@3.5.5 -g --unsafe-perm2.创建package.json文档 .首先新建文件reactWebpacke（这个名字自己随便取），然后在此文件执行下面代码npm init然后一路next下去如下面图片 项目文件夹中会出现一个文件package.json 2.安装react, react-dom, webpacknpm install react react-dom --savenpm install webpack --sa...
SGU 194. Reactor Cooling(无源汇有上下界的网络流)【代码】【图】
时间限制：0.5s空间限制：6M题意： 显然就是求一个无源汇有上下界的网络流的可行流的问题 Solution：没什么好说的，直接判定可行流，输出就好了code/*无汇源有上下界的网络流 */ #include <iostream> #include <cstring> #define ms(a,b) memset(a,b,sizeof a) usingnamespace std; constint MAXN = 209;struct node {int u, v, c, ne; } edge[MAXN * MAXN << 2]; int pHead[MAXN*MAXN], SS, ST, T, ncnt, ans; int Gup[MAX...
十八、React react-router4.x中：实现路由模块化、以及嵌套路由父子组件传值【代码】
一、路由模块化（用字典定义路由，然后循环出来）1.官方文档参考【官方文档】https://reacttraining.com/react-router/web/guides/quick-start 【路由模块化实例】https://reacttraining.com/react-router/web/example/route-config2.路由模块化：实现代码其它代码参考：十七：https://blog.csdn.net/u010132177/article/details/103323644 主要内容：【1】、【2】处 App.jsimport React from 'react'; import './App.css'; import...
react生命周期
1.getDefaultProps初始化设置props2.getInitialState初始化设置state3.componentWillMount第一次完成渲染时调用4.componentDidMount第一次渲染完成后调用，且仅调用一次，一般用于绑定时间5.componentWillReceiveProps渲染完成再次收到Prop时调用6.shouldComponentUpdate暂时还用用到过7.componentWillUpdate接收到新props或者state时调用8.componentDidUpdate每次渲染完成都会调用，在滚动插件isCroll中每次dom的结构变化时，整体...
夺命雷公狗-----React---5--props对象的传递【代码】【图】
提示：props的值是不可以改变的... <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="./js/react.js"></script><script src="./js/react-dom.js"></script><script src="./js/browser.min.js"></script></head><body><div id="demo"></div><script type="text/babel">//定义一个组建，名字第一个必须是大写var Fir = React.createClass({render:function(){return(//必须要有一个...
React 和 vue的区别以及React的环境搭建，运行
# React## React 和 vue- React 和 vue 同属MVVM框架 - M:model - V:VIEW - VIEWMODEL- React 全部是在js中定义的，不象vue将文件拆分为3部分。- react 不存在模板的说法## 虚拟DOM- 概念 - DOM是浏览器提高的API数量相对固定，扩展比较难 - 虚拟DOM：用js对象表现出DOM的内容以及层级系，可以自定义api,通过特定的方式渲染到页面中。- 原理 - 按需更新，重新渲染- diff算法 - 逐层对比新旧dom树，所有节点对比完毕后，就能...
几款简单的 React Native UI 组件【图】
本文推荐 11 个非常棒的 React Native 开源组件，希望能给移动应用开发者提供帮助。React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架，已经用于 Facebook 的生产环境。React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP。1. iOS 表单处理控件 tcomb-form-nativetcomb-form-native 是 React Native 强大的表单处理控件，支持 JSON 模式，可插拔的外观和感觉。在线演示：http:/...
ReactNative——页面跳转【代码】【图】
效果图： 进入工作目录，运行react-native init NavigatorProject创建项目NavigatorProject import React, { Component } from ‘react‘; import {AppRegistry,StyleSheet,Text,View,TouchableHighlight,Image,Navigator } from ‘react-native‘; class navigatorProject extends Component{ render(){ let defaultName = ‘firstPageName‘; let defaultComponent = FirstPageComponent; return( ...
react开发教程（三）组件的构建【代码】
什么是组件组件化就好像我们的电脑装机一样，一个电脑由显示器、主板、内存、显卡、硬盘，键盘，鼠标...。组件化开发有如下的好处：降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求。例如输入框，可以替换为日历、时间、范围等组件作具体的实现。调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位...