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. C# DateTime类型和sqlserver DateTime精度不同

    在最近的项目中, 有个关于时间的功能.一个请假的时间.前端选择的时候只有日期.所以比如请一天假就是选2017-8-15和2017-8-15,这样算请这一天的假.但是后台存入数据库时我不能就存2017- ...

  2. django中的缓存

    对于一个动态网站来说,用户的每次访问都意味着对服务器的一次开销,当该服务器的并发访问非常大时,对于一个动态网站来说,开销会非常的大.所以对于大中型web应用来说,减轻服务器的性能瓶颈就很有必要 对于d ...

  3. 赶集网mysql开发36军规

    赶集网mysql开发36军规 写在前面的话: 总是在灾难发生后,才想起容灾的重要性: 总是在吃过亏后,才记得曾经有人提醒过. (一)核心军规 (1)不在数据库做运算:cpu计算务必移至业务层 (2)控 ...

  4. bzoj P3884 上帝与集合的正确用法

    Description   根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“ ...

  5. cfE. Ehab and a component choosing problem(贪心)

    题意 题目链接 给出一棵树,每个节点有权值,选出\(k\)个联通块,最大化 \[\frac{\sum_{i \in S} a_i}{k}\] Sol 结论:选出的\(k\)个联通块的大小是一样的且都等 ...

  6. 洛谷P4716 【模板】最小树形图(朱刘算法)

    题意 题目链接 Sol 朱刘算法?感觉又是一种神仙贪心算法 大概就是每次贪心的用每个点边权最小的入边更新答案,如果不行的话就缩起来找其他的边 不详细说了,丢链接走人.. #include<bit ...

  7. CentOS网卡显示为__tmpxxxxxxxx

    一台服务器做了2组端口绑定(bonding),其中一组bond总是不成功,发现少了eth0/eth5 两个网卡,后来通过ifconfig -a 发现多了两个__tmpxxx的网卡 ifconfig - ...

  8. Java设计模式—桥梁模式

    终于又碰到了一个简单点的模式了. 桥梁模式也叫做桥接模式,定义如下:                将抽象和实现解耦,使得两者可以独立地变化. 这句话也太难理解了,桥梁模式是为了解决类继承的缺点而设计 ...

  9. LeetCode赛题392---- Is Subsequence

    392. Is Subsequence Given a string s and a string t, check if s is subsequence of t. You may assume ...

  10. 如何在FineReport中解析数据库内XML文件

    在数据库表中,其中字段XML所存的为xml格式数据在表xmltest中.那么在使用该表进行报表制作时,需要将存于xml字段中的值读取出来作为报表数据源. XML每条记录数据格式如下: <Fiel ...