应用场景:

  1. 负责场景下的高性能
  2. 重用组件库,组件组合

中文官网:https://reactjs.org.cn/doc/in...

特点:

  1. 声明式编码(不需要关心如何实现,只需要关注在哪里做什么)
  2. 组件化编码
  3. 高效的DOM Diff,最小化页面重绘
  4. 单向数据流

创建一个新的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对比的更多相关文章

  1. Vue于React特性简单对比(一)

    一,对象实体对比 vue的对象实体依然是html,而react的对象实体已经变味jsx,一种新的语法结构. vue的html与react的jsx都可以进行拆分,拆分成更细小的组件,组件之间可以传值. ...

  2. Vue(MVVM)、React(MVVM)、Angular(MVC)对比

    前言 昨天阿里内推电面一面,面试官了解到项目中用过Vue,就问为什么前端框架使用Vue而不适用其他的框架,当时就懵了.因为只用过Vue,不了解其他两个框架,今天就赶紧去了解一下他们之间的区别.大家发现 ...

  3. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  4. vue对比其他框架

    对比其他框架 React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保 ...

  5. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

  6. php开发面试题---jquery和vue对比(整理)

    php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...

  7. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  8. React vs. Angular vs. Vue

    原文连接 历史 React是一个用于构建Web应用程序UI组件的JavaScript库. React由Facebook维护,许多领先的科技品牌在其开发环境中使用React. React被Faceboo ...

  9. 一个简单的 vue.js 实践教程

    https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...

随机推荐

  1. Spring配置文件beans标签报错问题解决

    因为有很多配置是复制过来的,附带的很多注释的格式会导致报错,所以可以要试试把注释去掉,只有配置文件的话可能就不会报错了.

  2. ubuntu搭建、安装gitlab服务器以及初始化密码

    本为14.04 在搭建之前要确定其网络环境是没有问题.用root身份进行操作 1.安装和配置必要的依赖关系 apt-get update apt-get install -y curl openssh ...

  3. Ubuntu访问samba共享文件方法

    1.1  安装samba客户端 sudo apt-get install smbclient -y 1.2  查看文件共享权限 smbclient -L //192.168.100.6 1.3  创建 ...

  4. LeetCode 152. 乘积最大子序列(Maximum Product Subarray)

    题目描述 给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] 有最大乘积 6. ...

  5. leetcode 135分发糖果

    这是一道hard题,不好想,但最后还是想出来了,私以为还是根据一些思想方法自己想出来做法印象比较深刻,其次看人家的做法思想自己写代码,其次看代码理解默写,其次直接抄代码: 首先,给每个孩子都发一个糖果 ...

  6. leetcode 72. 编辑距离

    /***** 定义状态: DP[i][j]其中i表示word1前i个字符,j表示Word2前i个字符 DP[i][j]表示单词1前i个字符匹配单词2前j个字符,最少变换次数: 状态转移: for i: ...

  7. Jmeter(九)集合点

    性能测试需要模拟大量用户并发,集合点能够尽量让虚拟用户同一时刻发送请求, 在Jmeter中集合点是通过定时器-同步定时器来完成的.

  8. Selenium 2自动化测试实战10(鼠标事件)

    一.鼠标事件 1. webdriver中,关于鼠标操作的方法封装在ActionChains类中 ActionChains类提供了鼠标操作的常用方法: perform:执行所有ActionChains中 ...

  9. 十四:jinja2过滤器之常用的过滤器

    1.abs:返回一个数的绝对值(见上一篇)2.default:如果当前变量没有值或字段,则展示默认值(见上一篇) 3.转义过滤器:如果后端出过来的值含html标签,可以控制是否视为html标签执行或者 ...

  10. Delphi DBGridEh导出Excel

    unit Unit_DBGridEhToExcel; interface uses SysUtils, Variants, Classes, Graphics, Controls, Forms, Ex ...