Reac 学习 初识（一）

2019独角兽企业重金招聘Python工程师标准>>>

概述

什么是React

很多人可能会对这个问题感到困惑。React 其实不是Augular.js 或者 Backbone.js 那样的MVC 框架。 它只是MVC中的V — 也就是表现层， react 只做一件事，这也是符合UNIX的思路。按官网描述，其出发点为：

用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time）。

React最初来自Facebook内部的广告系统项目，项目实施过程中前端开发遇到了巨大挑战，代码变得越来越臃肿且混乱不堪，难以维护。于是痛定思痛，他们决定抛开很多所谓的“最佳实践”，重新思考前端界面的构建方式，于是就有了React。

React能做什么

一开始学React是从阮一峰的React教程里学的，讲得蛮详细 [React 入门实例教程]: http://www.ruanyifeng.com/blog/2015/03/react.html
相信很多人都想知道react到底能干什么，往下看基本概念

React中的基本概念

1. React.js
   React.js 是 React 的核心库，在应用中必须先加载核心库。
2. ReactDOM.js
   ReactDOM.js 是 React 的 DOM 渲染器，React 将核心库和渲染器分离开了，为了在 web 页面中显示开发的组件，需要调用 ReactDOM.render 方法， 第一个参数是 React 组件，第二个参数为 HTMLElement。
3. JSX
   作用： 描述DOM元素
   JSX 是 React 自定义的语法，最终 JSX 会转化为 JS 运行于页面当中。
4. 组件
   组件是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达， 我们将要写的 React 代码绝大部分都是在做 React 组件的开发。
5. VIRTUAL DOM
   React 抽象出来的虚拟 DOM 树，虚拟树是 React 高性能的关键。
6. 单向数据流：
   React 应用的核心设计模式，数据流向自顶向下（组件层级关系传递）

React的起源背景

• 古老时代
  在古老的时代中Web应用程序的每次交互都用于触发服务器往返。每次点击和每个表单提 交意味着网页被卸载，请求被发送到服务器，服务器响应浏览器然后呈现的新页面。通过这种 方式，前端没有真正的管理状态。每次发生什么事情，那就是浏览器所关注的宇宙的尽头。前端只是一些生成的HTML和CSS，也许有一点JavaScript洒在上面。但是也只是为了辅助。
  完全重绘的时代，在那个时候应该都没有严格意义上的前端工程师，我们都是切图仔。

• 第一代JS：手动重绘
  这是JS发展史上最重要的标志之一，哪怕到现在还在持续发挥着光与热。站在浏览器的角度：“我不知道我应该重新渲染，你弄明白了”，这样的思想使得前端开发人员具有了真正的话语权。第一代JavaScript框架，如Backbone.js，ExtJS和Dojo也包括了我们熟知的jQuery，首次在浏览器中引入了一个实际的 数据模型，而不是在DOM上放置一些轻量级的脚本。这也意味着您第一次在浏览器中更改状态 。数据模型的内容可能会改变，然后您必须得到用户界面中反映的这些更改。

• 性能分析
  框架之间对于操作DOM元素的性能问题讨论： https://www.zhihu.com/question/31809713

环境搭建

• 线上环境 线上环境提供给我们快速检验代码结果的好地方。同时线上环境也是很多技术预演的必备场景。
  操作地址： https://codepen.io/pen?&editors=0010

• 最小化html环境
  代码参见code部分，其验证了 react 作为库的特性，只需要像使用jQuery一样，引入react.js 和react-dom.js 就可以来使用react了。 引入react时需要设置 type="text/babel"

    
    
    
    

    
        

             ReactDOM.render(
                 
Hello, world!
,
                  document.getElementById('root')
                );
        
    

运行结果：

• Create-react-app
  这是开始构建新的React单页应用程序的最佳方式。它设置了您的开发环境，以便您可以使用最新的JavaScript功能，提供良好的开发人员体验，并优化您的应用程序以进行生产。你需要在你的机器上有Node> = 6。
  步骤： 1.npm install -g create-react-app 2.create-react-app my-app 3.进入目录 -> cd my-app 4.Npm start 运行项目
  Create-react-app不处理后端逻辑或数据库; 它只是创建一个前端构建管道，所以你可以将它用于任何你想要的后端。它使用诸如Babel和webpack之类的构建工具，但是使用零配置。
  当准备部署到生产环境时，运行npm run build将在build文件夹中创建应用程序的优化版本。我们可以从README和用户指南中了解有关创建React应用程序的更多信息。

• 生产版本
  以上都是我们在开发过程中使用React的方式，具体在生产环境中，我们可以按照下面的方式来配置不同的生产环境。
  https://doc.react-china.org/docs/optimizing-performance.html#create-react-app

• webpack 配置
  如果想查看Webpack 配置请运行 npm run eject 注意此操作是不可逆的。单纯查看可以直接参见： node_module -> react-script - > config -》

组件库的安装与使用

React之所以火爆的一大原因在于其丰富的组件生态圈，而作为国内热度很高的Ant Design 也被广泛使用。
官网：https://ant.design/index-cn
安装步骤： https://ant.design/docs/react/introduce-cn

React个人认为三套比较好的UI框架：
Ant Design： 由于是国内的UI框架 偏向国内的业务需求，主要体现页面元素比较多，业务功能比较紧凑
Material-ui： http://www.material-ui.com/ 动画的支持更好，配色更欧美范。
React-bootstrap：虽然Bootstrap也是facebook的产品，但是对于React 并没投入资源。

转载于:https://my.oschina.net/johnsken/blog/1633626