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

时间: 2018-01-19阅读: 942标签: 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应用。

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

链接: http://www.fly63.com/article/detial/373

React中编写CSS的姿势

在任何环境之下其实没有最佳,最有最适合,那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules

react如何通过shouldComponentUpdate来减少重复渲染

在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件都重写render,尽管绝大多数子组件的props没有变化

react-redux 的使用

类似于 Vue,React 中组件之间的状态管理 第三方包为:react-redux。react-redux 其实是 Redux的官方React绑定库,它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据。

21 项优化 React App 性能的技术

在 React 内部,React 会使用几项巧妙的小技术,来优化计算更新 UI 时,所需要的最少的更新 DOM 的操作。在大多数情况下,即使你没有针对性能进行专项优化,React 依然很快,但是仍有一些方法可以加速 React 应用程序

React使用propTypes进行类型检查

注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。随着你的应用的开发,你会使用类型检查的方法来捕获很多bug。对于一些应用,你可以使用js扩展就像Flow或者TypeScript去对整个应用进行类型检查

为什么说React 16是开发者的福音?

就像人们对更新移动应用程序和操作系统感到兴奋一样,开发人员也应该对更新框架感到兴奋。不同框架的新版本具有新特性和开箱即用的技巧。下面是将现有应用程序从 React 15 迁移到 React 16 时应该考虑的一些好特性。

React ref

React ref理解:通过指定ref获得你想操作的元素,然后进行修改.是当组件挂载后和卸载后,以及ref属性本身发生变化时,回调函数就会被调用。 因为ref引用的是组件的实例

函数式的React

React 是现在最流行的 JavaScript 库之一。使用 React 可以非常轻松地创建 Web 用户交互界面。 它的成功有很多因素,但也许其中一个因素是清晰有效的编程方法。在 React 的世界中,UI 是由一个一个组件所组成的。

react hook超实用的用法和技巧分析

react hook发布也已经有几个月了,相信有部分人已经开始使用了,还有些人在犹豫要不要用,可能更多人安于现状,没有要用的打算,甚至还有很多公司的react版本是15或以下的,迫于升级的难度没有使用。以我个人的观点,要不要使用react hook呢?

react中PureComponent浅对比策略

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

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

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

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