博客
关于我
【React基础】基本环境搭建
阅读量:625 次
发布时间:2019-03-13

本文共 1039 字,大约阅读时间需要 3 分钟。

React的基本概念及开发环境搭建

React的基本概念

React是Facebook开发的一个JS库,最初设计用于应对传统MVC框架在复杂应用中的扩展性不足的问题。它通过 declarative 的方式简化了状态管理和数据绑定,为开发者提供了更高效的开发体验。

React的特点

  • 无模板:React不依赖于特定的模板语言,开发者可以自由选择使用哪种工具。
  • 非MVC框架:React不是传统的MVC框架,它更注重状态管理和数据流。
  • 响应式:React能够自动检测到数据变化并更新视图。
  • 轻量级:React的核心库非常小,能够在任何现代浏览器中运行。

React的原理

React的核心原理是通过虚拟DOM(Virtual DOM)实现高效的 DOM操作。它将真实的DOM结构抽象为一个JS对象,通过diff算法(一种高效的差异检测算法)逐步更新只发生变化的部分。

  • 虚拟DOM:确保只对界面上真正发生变化的部分进行实际的DOM操作。
  • diff算法:逐层次地比较节点,生成最小的变化集合。
  • 这种方式大大减少了重复的DOM操作,提升了性能。

    React的发布时间

    React于2013年发布,由Facebook开源。

    React开发环境的搭建

    引入工具

    • React核心文件react.js
    • React DOM文件react-dom.js,通常放在react.js之后引入。
    • Babel:用于转换 JSX 语法为浏览器可理解的 JavaScript。

    安装方法

    通过 npm 包管理器安装:

    npm i react --savenpm i react-dom --savenpm i @babel/standalone --save

    操作步骤

  • 初始化项目

    npm init -y

    这将生成一个 package.json 文件。

  • 引入文件到 HTML:将 react.jsreact-dom.jsbabel.js 引入到 HTML 文件中。

  • 配置DOM根节点

    这个节点是 React渲染的入口。

  • 使用 JSX 语法:在 script 标签中设置 type="text/babel",并编写 JSX 代码:

    const myDom = 

    hello, world

    ;ReactDOM.render(myDom, document.getElementById("demoReact"));
  • 效果展示

    在浏览器中,您将看到一个简单的 "hello, world" 标题。

    转载地址:http://cxjaz.baihongyu.com/

    你可能感兴趣的文章
    Plotly 域变量解释(多图)
    查看>>
    Plotly 绘制表面 3D 未显示
    查看>>
    Plotly-Dash 存在未知问题并创建“加载依赖项时出错“;通过使用 Python-pandas.date_range
    查看>>
    Plotly-Dash:如何过滤具有多个数据框列的仪表板?
    查看>>
    Plotly:如何为 x 轴上的时间序列设置主要刻度线/网格线的值?
    查看>>
    Plotly:如何从 x 轴删除空日期?
    查看>>
    Plotly:如何从单条迹线制作堆积条形图?
    查看>>
    Plotly:如何以 Root 样式绘制直方图,仅显示直方图的轮廓?
    查看>>
    Plotly:如何使用 Plotly Express 组合散点图和线图?
    查看>>
    Plotly:如何使用 plotly.graph_objects 和 plotly.express 定义图形中的颜色?
    查看>>
    Plotly:如何使用 Python 对绘图对象条形图进行颜色编码?
    查看>>
    Plotly:如何使用 updatemenus 更新一个特定的跟踪?
    查看>>
    Plotly:如何使用长格式或宽格式的 pandas 数据框制作线图?
    查看>>
    Plotly:如何向烛台图添加交易量
    查看>>
    Plotly:如何在 plotly express 中找到趋势线的系数?
    查看>>
    Plotly:如何在桑基图中设置节点位置?
    查看>>
    Plotly:如何处理重叠的颜色条和图例?
    查看>>
    Plotly:如何手动设置 plotly express 散点图中点的颜色?
    查看>>
    Plotly:如何结合 make_subplots() 和 ff.create_distplot()?
    查看>>
    Plotly:如何绘制累积的“步骤“;直方图?
    查看>>