码迷,mamicode.com
首页 > 其他好文 > 详细

认识react, 并简单与vue对比

时间:2018-12-15 21:10:46      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:install   搭建环境   应用   cat   高性能   渲染   yarn 安装   webpack   ofo   

应用场景:

  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对比

标签:install   搭建环境   应用   cat   高性能   渲染   yarn 安装   webpack   ofo   

原文地址:https://www.cnblogs.com/datiangou/p/10124385.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!