Reac 学习初识（一）

最新推荐文章于 2024-09-02 15:52:41 发布

weixin_34408717

最新推荐文章于 2024-09-02 15:52:41 发布

阅读量171

点赞数

文章标签：前端 webpack javascript ViewUI

原文链接：https://my.oschina.net/johnsken/blog/1633626

版权

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中的基本概念

React.js
React.js 是 React 的核心库，在应用中必须先加载核心库。
ReactDOM.js
ReactDOM.js 是 React 的 DOM 渲染器，React 将核心库和渲染器分离开了，为了在 web 页面中显示开发的组件，需要调用 ReactDOM.render 方法，第一个参数是 React 组件，第二个参数为 HTMLElement。
JSX
作用：描述DOM元素
JSX 是 React 自定义的语法，最终 JSX 会转化为 JS 运行于页面当中。
组件
组件是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达，我们将要写的 React 代码绝大部分都是在做 React 组件的开发。
VIRTUAL DOM
React 抽象出来的虚拟 DOM 树，虚拟树是 React 高性能的关键。
单向数据流：
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"

<html>
    <head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    </head>

    <body>
        <div id="root></div>
        <script type="text/babel">
             ReactDOM.render(
                 <h1>Hello, world!</h1>,
                  document.getElementById('root')
                );
        </script>
    </body>
</html>

运行结果：

运行结果

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