1.生成虚拟domcreateElement的作用就是生成虚拟dom。虚拟dom到底是个啥，其实它就是个javascript对象~，这个对象的属性有props，vType，type， 而props也是个对象，它有children属性也有其他的，比如className，onClick之类的。2.虚拟dom转化成dom虚拟dom的vtype是3的时候对应的type是自定义组件，vtype是2的时候是对应的type是div之类的浏览器原生组件。涉及到一个递归函数initVnode，initVnode接收一个参数：虚拟dom，返回一个参...
1.ReactJs 需要依赖nodejs环境，如果没有安装nodejs的话，需要安装。下载地址：https://nodejs.org/en/download/ 下载下来之后，安装windows版本的msi,点击下一步就可以了。之后进行相应的环境配置就ok。 2.安装全局包 我们需要安装两个包，这两个包是babel插件。 在windows运行: npm install -g babel npm install -g babel-cli 3.创建一个应用根目录 d:>mkdir reactApp...
随着React Native和 微信小程序的出现，Native一家独大的局面出现裂痕，很多小公司使用已经正在着手微信小程序和React Native了，我公司就已经走上React Native之路。那么，React Native 和 Native 和 微信小程序 三者比较起来到底哪者更强呢？今天从适应性（适合什么项目）、开发限制、软件迭代更新、成本角度谈谈自己对三者的看法。 个人角度：适应性（适应什么项目） 大项目、游戏项目：Native 中大型项目：react native...
1.基本写法： (1)import React from ‘react‘;class Login extends React.Component{render(){return(<div></div>)} }export default Login; (2)import React,{Component} from ‘react‘;class Login extends Component{render(){return(<div><div>)} }export default Login; 2.使用变量：import React from ‘react‘;class Login extends React.Component{render(){let name=‘React‘;return(<div>Hello,{name}</div>...
1. constructor()constructor(props){super(props)this.state=({}) }一定先写super 可以接收从父组件传来的值父组件往子组件传值的方法<ChildComponent nextValue={xxx.xxx} nextValue2={xxx.xxx}/>直接在组件中写属性名等于属性值就可以，有多少传多少在子组件 ChildComponent 中获取父组件传来的值只需要用this.props.nextValue就可以得到父组件传来的值由此衍生一个问题，子组件如何给父组件传值首先，需要在父组件定义一...
前言前面我们已经搭建了基础环境，现在将开发环境更完善一些。devtool在开发的过程，我们会经常调试，so，为了方便我们在chrome中调试源代码，需要更改webpack.config.js，然后启动webpack-dev-server。完成之后在chrome浏览器中打开debug，点击Sources选项，即可看见提示，继而输入你想查看的源文件名即可显示该文件源代码，如果你觉得某处代码有问题，对应行号打上断点即可调试。...... module.exports = {devtool: ‘cheap-modu...
这里的组件指的是有状态组件，只有有状态组件才有this.state和生命周期函数React组件生命周期分为三部分： - **组件创建阶段**：特点：一辈子只执行一次 >constructor： > componentWillMount: > render： > componentDidMount: 页面加载发送ajax 或者 进行dom操作 - **组件运行阶段**：按需，根据 props 属性 或 state 状态的改变，有选择性的 执行 0 到多次 > componentWillReceiveProps: > shouldComponentUpdate: ...
redux: redux是flux的进阶版，相较与flux 更加方便，其内部封装了flux的一些方法，使可以快速的完成数据的交互 1、使用场景大型项目 多模块，多数据 2、安装 cnpm install redux --save-dev 3、工作流程：当组件需要改变store数据的时候，需要先创建一个action，通过dispatch将action传给Store，store会将action转发给reducer，在reducer内部进行数据的结合（previousState和state），然后生成一个新的 数据结构传递给s...
We will learn how to perform network requests to a backend using RxJS Observables.A example of basic jquery request:console.clear(); var requestStream = Rx.Observable.just(‘https://api.github.com/users‘);//Current requestStream is just a stream //We need to subscribe it to make it work requestStream.subscribe(url => {//Preform a serve reqest by jQueryjQuery.getJSON(url).done( res => {console.lo...
1. 子组件向父组件传值父组件Header:import Nav from ‘Nav.js‘; class Header extends React.Component {constructor(props) {super(props);this.state = {}this.callbackForNav = this.callbackForNav.bind(this);}callbackForNav({ selectedTopChannelOrder, selectedSubChannelOrder, selectedTopChannelName, selectedSubChannelName }) {this.setState({ selectedTopChannelOrder, selectedSubChannelOrder, selectedTopCha...
1. react-router 对象式配置 和 组件式配置 组件式配置（Redirect） ----对应---- 对象式配置（onEnter钩子）IndexRedirect -----对应-------indexRoute的onEnter钩子函数 原文：http://www.cnblogs.com/miaowwwww/p/6181736.html
1、目录介绍node_modules：模块安装后的文件 public：公共目录 index.html：入口文件 manifest.json:：允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段(不用管) src：开发目录 index.js：入口文件 App.js： 根组件 App.test.js：用于测试的文件 App.css：根组件样式 package.json：项目配置文件 README.md：项目说明文件注：因为初始文件比较乱，可自...
Reactor 模型不再介绍，网上有很多。在实现的过程中有一些收获： 1. Reactor 广义上说，事件发生时便会触发为事件注册的处理函数。在注册感兴趣的事件时，需要将处理函数一并绑定到事件上，在 NIO 中我们通过 SelectionKey 的 attachment 携带函数对象。 2. 使用 NIO ，应该摒弃 BIO 编程时的阻塞思维。如：while(writeBuffer.remaining()>0){socketChannel.write(writeBuffer);} 这种繁忙等待的写法，放在以 NIO 为内核的...
父组件内import React, { Component } from‘react‘; import SYSTEM from‘./system‘ export defaultclass Login extends Component{constructor(props){super(props)this.state={}}render(){return (<div><SYSTEM name="第一"></SYSTEM><SYSTEM name="第二"></SYSTEM><SYSTEM></SYSTEM><SYSTEM name="第四"></SYSTEM></div>)} }子组件内import React,{Component} from‘react‘ export defaultclass system extends Component{c...
使用react native制作的一款网络音乐播放器 基于第三方库 react-native-video 设计"react-native-video": "^1.0.0" 播放/暂停 快进/快退 循环模式(单曲,随机,列表) 歌词同步 进度条显示 播放时间 基本旋转动画 动画bug 安卓歌词解析失败 其他使用的数据是百度音乐api抓取下来自己使用 RAP 整理.主要是:所有歌曲列表 http://rapapi.org/mockjsdata/16978/rn_songList当前歌曲歌词 http://tingapi.ting.baidu.com/v1/restserver/tin...