React框架学习_关于React两种构建应用方式选择

时间: 2018-01-19阅读: 793标签: React
作者:@EasonPeng
本文为作者原创,转载请注明出处:https://www.cnblogs.com/eason-peng/p/8315185.html


1. 传统模式构建

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。这样在这个前端项目中,默认生成或者是定义全局变量,从而使用js各种开发包的特性。典型代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    ...
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>>
    ...
</head>
<body>
    ...
    <script type="text/javascript">
    $("div.test").onclick(function(){
        // code goes ...
    })
    </script>
</body>
</html>

这种方法构建的前端项目,显而易见很迅速,可以简单、直接的完成前端想要的各种逻辑。比如,我要控制一个div的显示,直接通过Jquery的selector操作,就可以完成。为了符合众多前端er的习惯,React也提供了类似的方案,可以说这个对于初学React的朋友来说非常方便。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="scripts/react.development.js"></script>
    <script src="scripts/react-dom.development.js"></script>
    <script src="scripts/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
</body>

</html>

而然随着互联网的发展,越来越多的网站开始变得臃肿、庞大,诸如淘宝网、facebook网站的逻辑相当复杂。对于网站处理逻辑非常繁多,渐渐地使用传统模式构建,会使项目难以更新feature,寻找bug也会非常麻烦。项目的更新、维护,对于团队的压力可想而知。因此,目前前端界的共识是使用Webpack+babel的构建模式。


2. Webpack+babel模式构建

随着JavaScript语言下一代标准的愈发成熟,ES6,即ECMAScript2015(ES2015)受到越来越多的开发者欢迎。为了弥补当前浏览器不支持ES6的缺陷,babel孕育而生,它是JavaScript的一个编译器,是用户能够在浏览器中体验下一代JavaScript语言的魅力。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

React官方将这两个工具封装在了名为create-react-app的脚手架中,按照官网的说法,create-react-app适合搭建单页面应用[详细信息]

初学React的小白用户,可以使用简单的指令,它将启动webpack-dev-server的HTTP Server。在这个服务器中,提供了babel的配置。

npx create-react-app my-app
cd my-app
npm start

npx为一个类似npm的cli工具,目的是管理本地的第三方工具集[介绍]

由于create-react-app提供了良好的封装,这些服务启动的过程,使用者是无法察觉的。要了解create-react-app启动的全工程,用户可以从这个教程了解。

当然create-react-app也提供了用户自定义的webpack和babel配置。只要输入下列指令(该指令不可逆):

npm run eject


3. 总结

对比两种不同的React构建方法,使用的目的也不一样。第一种方法提供了更为灵活多变的应用特效方案,适应于展示特效多的应用,如小游戏、H5广告等。而第二种方法适用于构建中大型Web app应用。

对于前端学习者来说,推荐使用第二种方法,毕竟这属于目前前端的趋势。有利于开发者适应大规模开发。潜台词就是更容易在大厂商找到工作!!!

react中PureComponent浅对比策略

PureComponent实现了Component中没有实现的shouComponentUpdata()方法,会对state和props进行一次浅对比,本文介绍一下浅对比策略,源码中,实现浅对比的函数是:shallowEqual()

如何扩展 Create React App 的 Webpack 配置

Create React App(以下简称 CRA)是创建 React 应用的一个脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具(比如 webpack)的配置封装了起来,让使用者不用关心这些工具的具体配置,从而降低了工具的使用难度。

渐进式React

可以说 React 为Web开发者带来了全新的开发模式,而在各类新功能下,如何达到性能最优仍是我们需要关心的。今天做一次精读尝试,原文地址在文末,话不多说,先呈上一份性能清单:

必须要会的 50 个React 面试题

如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性

react-navigation 监听顶部导航栏点击/滑动状态

使用createMaterialTopTabNavigator创建顶部导航栏,希望实现切换到指定的Tab再获取数据,查看官方文档只能找到tabBarOnPress 方法监听点击回调,但是无法监听滑动切换

解决vscode 开发react 导入绝对路径 无法跳转的问题

相对路径可正常跳转,但是在webpack配置alias使用绝对路径后无法跳转.解决办法:需要添加一个jsconfig文件,如下:

react 源码之setState

与multirepo 相对。 monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个module独立发布,每个module都有自己的依赖项(package.json),能够作为独立的npm package发布,只是源码放在一起维护。

怎样使用React Context API

React Context API 现在已经成为一个实验性功能,但是只有在 React 16.3.0 中才能用在生产中。本文将向你展示两个基本的 Web 商店应用程序,一个使用了 Context API 进行构建,另一个则不用。

React中使用CSS

在组件中直接使用style:不需要组件从外部引入css文件,直接在组件中书写。在组件中引入[name].css文件:需要在当前组件开头使用import引入css文件。在组件中引入[name].scss文件:引入react内部已经支持了后缀为scss的文件,所以只需要安装node-sass即可

create-react-app同时对多个框架(antd+antd-mobile)做按需加载的方法

在React项目开发中,经常需要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时,框架内的各种资源文件数量巨大,首先介绍下对单个框架做按需加载的方法

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全