React Demo  Github 地址

经过React Native 的洗礼之后，写了这个 demo ；React 是为了使前端的V层更具组件化，能更好的复用，同时可以让你从操作dom中解脱出来，只需要操作数据就会改变相应的dom； 而React Native 是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架，性能可能比原生app差一点点。

ReactJs和React Native的原理是相同的，都是由js实现的虚拟dom来驱动界面view层渲染。只不过ReactJs是驱动html dom渲染； React Native是驱动android/ios原生组件渲染。

React基于组件（component）开发，组件和组件之间通过props传递值，每个组件都有一个状态（state），当某个方法改变了这个状态值时，整个组件就会重新渲染，从而达到刷新（这里的刷新是指state的属性与之前的相比较，发生改变了就重绘，否则不变，相当于Vue里边的 watch函数）。另外，说到重新渲染就要提到虚拟dom了，就是用js模拟dom结构，等整个组件的dom更新完毕，才渲染到页面，简单来说只更新了相比之前改变了的部分，而不是全部刷新，所以效率很高。

目录我就不多介绍了，可以查看 github 中源码，主要实现了如下：

1，React JSX 语法实际使用

2，React 的生命周期，初始化，Rander 函数的渲染机制

3，React 常用的框架 Antd，图表插件 echarts 的使用

4，网络请求使用的 axiso  ，请求的封装，拦截，后端接口的统一管理封装 等

5，模块化，组件化

具体功能点有： 表格，标签页 ，表单 ，轮播 ，网络请求实践 ，列表渲染， 图表， 富文本 等 . . . . . /

查看 : React-Antd-demo-one 

React 简单实例 （React-router + webpack + Antd ）的更多相关文章

  1. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  2. React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)

    摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果 ...

  3. React Native ——入门环境搭配以及简单实例

    一.Homebrew 是OS X 的套件管理器. 首先我们需要获取 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent. ...

  4. 一个简单的 react 实例： < TodoList >

    <  react     TodoList:  > 组件: //引入React : import React from 'react'; //组件 class TodoList exten ...

  5. 从零搭建react+ts组件库（封装antd）

    为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...

  6. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  7. React入门实例:组件化+react-redux实现网上商城(1)

    项目运行 1.git clone https://github.com/soybeanxiaobi/React_demo_onlineShop 2.cd React_demo_onlineShop(文 ...

  8. client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法

    [本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~(￣▽￣) ...

  9. React基本实例

    学习React不是一蹴而就的事情,入门似乎也没那么简单.但一切都是值得的. 今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程.认真完成这个实例 ...

随机推荐

  1. jQuery事件篇---高级事件

    内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一．模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕 ...

  2. mysql8.0遇到删除外键的错误

    错误信息:Cannot drop index 'energy_type_id': needed in a foreign key constraint 创建device表的信息 CREATE TABL ...

  3. 鸟哥linux私房菜学习笔记 第二章知识点

    2.1 linux一切皆文件 2.2 磁盘分区 磁盘即文件 2.2.1 磁盘连接的方式与设备文件名的关系 模糊 1.正常的实体机器大概使用的都是 /dev/sd[a-] 的磁盘文件名,至于虚拟机环境下 ...

  4. HTML绝对路径和相对路径

    HTML路径: 绝对路径:从根目录开始 相对路径:../ 相对于html文件,上一级 ./ 相对于html文件,当前路径(可以省略) 文件夹名 相对于html文件,往文件里面走

  5. 洛谷P4781 【模板】拉格朗日插值(拉格朗日插值)

    题意 题目链接 Sol 记得NJU有个特别强的ACM队叫拉格朗,总感觉少了什么.. 不说了直接扔公式 \[f(x) = \sum_{i = 1}^n y_i \prod_{j \not = i} \f ...

  6. Uncaught TypeError: timeout.close is not a function. when try to use clearInterval

    It's because of your IDE! Make sure you have added automatic imports such as import { clearInterval ...

  7. 给大家分享下坐标转换的代码的JS和Python两个版本的源码【转】

    /** * Created by Wandergis on 2015/7/8. * 提供了百度坐标(BD09).国测局坐标(火星坐标,GCJ02).和WGS84坐标系之间的转换 */ /** * 百度 ...

  8. 微信小程序一个页面多个按钮分享怎么处理

    首先呢,第一步先看api文档: 组件:button https://developers.weixin.qq.com/miniprogram/dev/component/button.html 框架- ...

  9. js堆栈内存的释放

    ### JS中的堆栈内存 > 俗称叫做作用域(全局作用域/私有作用域) > - 为js代码提供执行的环境(执行js代码的地方) > - 基本数据类型值是直接存放在栈内存中的 > ...

  10. 对于大型公司项目平台选择j2ee的几层认识

    我是一个从野路子上一路走来的程序员,现在主要用.net做方案.选.net不选jave并没有什么特别的原因,只不过是因为我自己从c,java学起,后来被vs这个工具所吸引, 很熟悉这个平台罢了,从业15 ...