认识react, 并简单与vue对比
应用场景:
- 负责场景下的高性能
- 重用组件库,组件组合
中文官网:https://reactjs.org.cn/doc/in...
特点:
- 声明式编码(不需要关心如何实现,只需要关注在哪里做什么)
- 组件化编码
- 高效的DOM Diff,最小化页面重绘
- 单向数据流
创建一个新的app:
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
- 使用 Yarn 安装 React:
yarn init
yarn add react react-dom
- 使用npm来安装 React:
npm init
npm install --save react react-dom
使用antd:
根据这个搭建环境: https://ant.design/docs/react...
react和vue一样:
- 结合各自的生态库构成MVC框架
react和vue不一样:
- vue双向绑定,react单项绑定
- react每次安装新包需要重新npm install,否则会报错:
'react-app-rewired' 不是内部或外部命令,也不是可运行的程序或批处理文件。
- 生态库:
vue: Vue + Vue-Router + VueX + Axios + Babel + Webpack
react: React + React-Router + Redux + Axios + Babel + Webpack
react-router:
线上学习react地址:https://reacttraining.com/rea...
注:如果要每个路由都是新的页面不包含上个页面,就添加exact
- hashHistory
通过 hash 进行对应。好处是简单易用,不用多余设定。
- browserHistory
适用于服务器端渲染,但需要设定服务器端避免处理错误。注意的是若使用 Webpack 开发用,服务器需加上 --history-api-fallback
$ webpack-dev-server --inline --content-base . --history-api-fallback
- createMemoryHistory
主要用于服务器渲染,使用上会建立一个存在记忆体的 history 物件,不会修改浏览器的网址位置。
const history = createMemoryHistory(location)
原文地址:https://segmentfault.com/a/1190000017059761
认识react, 并简单与vue对比的更多相关文章
- Vue于React特性简单对比(一)
一,对象实体对比 vue的对象实体依然是html,而react的对象实体已经变味jsx,一种新的语法结构. vue的html与react的jsx都可以进行拆分,拆分成更细小的组件,组件之间可以传值. ...
- Vue(MVVM)、React(MVVM)、Angular(MVC)对比
前言 昨天阿里内推电面一面,面试官了解到项目中用过Vue,就问为什么前端框架使用Vue而不适用其他的框架,当时就懵了.因为只用过Vue,不了解其他两个框架,今天就赶紧去了解一下他们之间的区别.大家发现 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- vue对比其他框架
对比其他框架 React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保 ...
- vue对比其他框架详细介绍
vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...
- php开发面试题---jquery和vue对比(整理)
php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- React vs. Angular vs. Vue
原文连接 历史 React是一个用于构建Web应用程序UI组件的JavaScript库. React由Facebook维护,许多领先的科技品牌在其开发环境中使用React. React被Faceboo ...
- 一个简单的 vue.js 实践教程
https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...
随机推荐
- Pygame模块实现功能超赞的贪吃蛇
import pygame import random import sys import pygame.freetype import re import datetime pygame.ini ...
- LeetCode19----删除链表的指定元素
给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链表变为 ...
- python3笔记八:python数据类型-Number数字
一:学习内容 数字类型分类:整数.浮点数.复数.布尔值 数字类型转换 数字类型的数学功能:abs().max().min().pow().round().math函数.random函数 二:数字类型分 ...
- 【Spark机器学习速成宝典】模型篇08保序回归【Isotonic Regression】(Python版)
目录 保序回归原理 保序回归代码(Spark Python) 保序回归原理 待续... 返回目录 保序回归代码(Spark Python) 代码里数据:https://pan.baidu.com/s/ ...
- node 常用模块
像在服务器上的操作,我们只要 require 引入的模块,只要不是 nodejs 中的模块,我们的下载环境都是开发环境 配置自动化:引用插件 nodemon 下载:npm i nodemon -g ...
- docker—tomcat 报错:Failed to get D-Bus connection: Operation not permitted
docker search centos 查系统镜像 docker pull docker.io/centos 进入容器 [root@git opt]# docker images REPOSIT ...
- shell脚本之awk、sed、grep案例
1.BEGIN END用法user DIR,内容显示用户名称.用户家目录 $NF为awk的内置变量,表示最后一行,$(NF-1)就表示倒数第二行,最后打印页脚 页眉显示 cat /e ...
- 在RHEL6_Oracle_Linux_6上生成正确的udev_rule_规则文件
1. #首先确认是 Linux 6.0以上版本 [root@vrh6 dev]# cat /etc/issue Oracle Linux Server release 6.2Kern ...
- oracle存储过程错误跟踪
1.首先创建用于保存错误信息的表 1 2 3 4 5 6 7 8 CREATE TABLE TBL_PROC_ERRMSG ( BIZ_CODE VARCHAR2(50), ERR_LINE ...
- [SQL语句的常用统计函数]
1. upper() 转化为大写 Lower() 转化为小写 SELECT UPPER(列名称) FROM 表名称 SELECT LOWER(列名称) FROM 表名称 2. Sum ...