客户端高性能组件化框架React简介、特点、环境搭建及常用语法

最新推荐文章于 2025-03-19 17:05:42 发布

刻刻帝丶

最新推荐文章于 2025-03-19 17:05:42 发布

阅读量4.2k

点赞数 6

分类专栏： Web前端 React 文章标签：框架 react 组件化数据

本文为博主原创文章，转载请添加原文地址，需要大厂内推的+我脉脉哦：丛培森

本文链接：https://blog.csdn.net/q1056843325/article/details/54729657

版权

本文深入介绍了React框架，包括其高性能的虚拟DOM机制、组件化特性、单向数据流以及环境搭建过程。React起源于Facebook内部项目，因其组件化和可预测性而备受欢迎。文章还探讨了React与MVC模式的关系，强调React是用于构建组件化UI的库。此外，详细阐述了React的JSX语法、组件创建、属性验证、生命周期方法、状态管理和事件处理，提供丰富的示例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

【本文源址：http://blog.csdn.net/q1056843325/article/details/54729657 转载请添加该地址】

明天就是除夕了
预祝大家新春快乐 [ ]_(￣▽￣)*
天天饭局搞得我是身心疲惫= =
所以更新比较慢
今天想跟大家分享的就是这个大名鼎鼎的React框架
#简介
React是近两年非常流行的框架
流行到什么程度呢?
我看了一下Github上的数据

React达到了5w8+的star
在JavaScript中star排名第4
受欢迎程度可见一斑

感兴趣的同学，给大家设置一个传送门：Github-JavaScript-most stars

React并不难，还是挺容易上手的
起源于Facebook内部项目（一个广告系统）

传统页面从服务器获取数据，显示到浏览器上，用户输入数据传入服务器
但随着数据量增大，越来越难以维护了
Facebook觉得MVC不能满足他们的扩展需求了（巨大的代码库和庞大的组织）
每当需要添加一项新功能或特性时，系统复杂度就呈几何增长
致使代码脆弱不堪、不可预测，结果导致他们的MVC正走向崩溃
当系统中有很多的模型和相应视图时，其复杂度就会迅速扩大，非常难以理解和调试

总之就是Facebook对市场上所有JS-MVC框架都不满意，认为都不适合大规模应用
就自己写了一套，用来架设Instagram网站
写完后用着用着，发现哎呦这货还真是不错，然后就开源了
随着这几年的沉淀，React已经变得越来越强大了
值得我们去了解~

#MVC
科普一下MVC
MVC是一种软件架构模式（后端影响到了前端）
MVC就分为M、V、C三部分

Model（模型）:
应用程序中用于处理应用程序数据逻辑的部分，通常负责在数据库中存取数据
View（视图）:
应用程序中处理数据显示的部分，通常依据模型数据创建
Controller（控制器）:
应用程序中处理用户交互的部分，通常负责从视图读取数据，控制用户输入，并向模型发送数据

简单的理解一下
我们就是user，在页面中点击了一个按钮触发了事件
控制器Controller调整数据，模型Model中数据改变
数据改变又会导致视图View更新
UI的改变反馈呈现给我们user

这里我要特别说明一下，虽然这里介绍了MVC
但是不能说React就是MVC框架
可以说React是用于构建组件化UI的库，是一个前端界面开发工具
它可以作为MVC中的View视图部分

#框架特点
React它具有以下特点

高性能
传统web页面操作DOM涉及重绘重排相当耗性能
React 提供了一种不同而又强大的方式来更新Dom（轻量级虚拟Dom——Virtual Dom），代替直接操作DOM
更新virtual dom时不一定马上影响真实Dom，React会等到事件循环结束
利用Diff算法，通过当前新Dom表述与之前做比较，计算出最小步骤来更新真实Dom
组件化
Dom树上的节点称为元素，而虚拟Dom 的节点称作组件（可复用性）
（组件的特点下面还会谈到）
可预测性
state属性包含定义组件所需要的一些数据，当数据发生变化时，将会调用render重现渲染
React 把组件看成是一个状态机（State Machines）
通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致
单向数据流
数据从父节点传递到子节点，只需要从父节点获取props渲染即可
（往下看就理解了）

#环境搭建
我选择使用webpack搭建环境，当然其他工具也可以
这是我的webpack.config.js配置文件

module.exports = {
    entry: {
        index: './src/js/entry.js'
    },
    output: {
        path: './static/dist/',
        publicPath: 'http://localhost:8080/static/dist/',
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /.less$/,
                loader: 'style!css!less'
            }
        ]
    }
}

这里的关键就是除了要安装babel-loader和babel-core
还要安装babel-preset-es2015 和 babel-preset-react
用于解析ES6语法和React的JSX语法
还有react和react-dom也是必须要下载的依赖

全部依赖模块在这里

"devDependencies": {
  "babel-core": "^6.22.1",
  "babel-loader": "^6.2.10",
  "babel-preset-es2015": "^6.22.0",
  "babel-preset-react": "^6.22.0",
  "css-loader": "^0.26.1",
  "less": "^2.7.2",
  "less-loader": "^2.2.3",
  "react": "^15.4.2",
  "react-dom": "^15.4.2",
  "style-loader": "^0.13.1",
  "webpack": "^1.14.0",
  "webpack-dev-server": "^1.16.2"
}

#JSX
简单说一下React的JSX语法是个神马东西
可能一会儿大家会看大不明觉厉的代码
比如