React 相关知识

已于 2022-09-24 13:34:07 修改
阅读量225 收藏
点赞数
文章标签： javascript 前端 react.js
于 2022-09-20 10:21:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianbaiyihao/article/details/126937008
版权

React 学习

利用webpack创建React框架项目

开发模式

/*
 * @Description: 
 * @Author: 莲白
 * @Date: 2022-09-23 08:24:47
 * @LastEditTime: 2022-09-23 11:57:47
 * @LastEditors: 莲白
 */
/**
 * eslint 处理
 */
const path=require('path')
const EslintWebpackPlugin=require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
/**
 * 公共方法处理相同样式处理代码
 * @param {*} pre  判断是sass或者less
 * @returns 
 */
const getStyleloaders=(pre)=>{
  return [
    'style-loader','css-loader',{
      loader:"postcss-loader",
      options:{
        postcssOptions:{
          plugins:['postcss-preset-env'],
        }
      }
    },
    pre
  ].filter(Boolean)
}
module.exports={
  entry:'./src/main.js',
  output:{
    path:undefined,
    filename:"static/js/[name].js",
    chunkFilename:"static/js/[name].chunk.js",
    assetModuleFilename:'static/media/[hash:10][ext][query]',
  },
  module:{
    rules:[
      //处理css 兼容性问题
      //配合pack.json中的browserslist 来指定兼容性到什么成度
      {
        test:/\.css$/,
        use:getStyleloaders(),
      },
      {
        test:/\.less$/,
        use:getStyleloaders('less-loader'),
      },
      {
        test:/\.s[ac]ss$/,
        use:getStyleloaders('sass-loader'),
      },
      {
        test:/\.styl$/,
        use:getStyleloaders('stylus-loader'), 
      },
      //处理图片
      {
        test:/\.(jpe?g|png|gif|webp|svg)/,
        type:"asset",
        parser:{
          dataUrlCondition:{
            maxSize:10*1024,//一般来说10kb
          }
        },
      },
      {
        //处理其他资源
      test:/\.(wpff2?|ttf|map3|mp4)/,
      type:"asset/resource",
      },
      //处理js
{
  test:/\.jsx?$/,
  exclude: /node_modules/,
  include:path.resolve(__dirname,'../src'),
  loader:require.resolve('babel-loader'),
  options:{
    cacheDirectory:true,
    cacheCompression:false,
    plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean) //激活js功能
  },
},

    ],
  },
     //处理html
     plugins:[
      new EslintWebpackPlugin({
context:path.resolve(__dirname,'../src'),
exclude:'node_modules',
cache:true,
cacheLocation:path.resolve(__dirname,'../node_modules/.cache/.eslintcache'),
      }),
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/index.html')
      }),
      isDevelopment && new ReactRefreshWebpackPlugin(),
    ].filter(Boolean),
      //开发模式
    mode: "development",
    devtool:'cheap-module-source-map',
    optimization:{
      splitChunks: {
        // include all types of chunks
        chunks: 'all',
      },
      runtimeChunk: {
        name: (entrypoint) => `runtime~${entrypoint.name}`,
      },
    },
    //webpack解析模块加载选项
    resolve:{
      //自动补齐文件扩展名
extensions:['.jsx','.js','.json'],
    },
  devServer:{
    host:"localhost",
    port:3300,
    open:true,
    hot:true,//开启HMR
    historyApiFallback: true ,//解决报错404页面无法加载的问题
  },
}

相关依赖指令：

npm i eslint-webpack-plugin html-webpack-plugin style-loader css-loader postcss-loader postcss-preset-env less-loader sass-loader sass stylus-loader -D   样式-图片-其他处理依赖
npm i babel-loader @babel/core babel-preset-react-app eslint-config-react-app -D    balel/eslint 相关依赖 
npm i webpack-dev-server webpack webpack-cli -D    webpack 相关依赖
npm i react react-dom  react 依赖
npm install --save-dev cross-env   cross-env 依赖
npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh 开启HMR  依赖
npm i react-router-dom  react 路由依赖

生产模式

/*
 * @Description:
 * @Author: 莲白
 * @Date: 2022-09-23 08:24:47
 * @LastEditTime: 2022-09-24 10:40:16
 * @LastEditors: 莲白
 */
/**
 * eslint 处理
 */
const path = require("path");
const EslintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ImageMinimizerWebpackPlugin = require("image-minimizer-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
/**
 * 公共方法处理相同样式处理代码
 * @param {*} pre  判断是sass或者less
 * @returns
 */
const getStyleloaders = (pre) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env"],
        },
      },
    },
    pre,
  ].filter(Boolean);
};
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/[name].[contenthash:10].js",
    chunkFilename: "static/js/[name].chunk.js",
    assetModuleFilename: "static/media/[hash:10][ext][query]",
    clean: true,
  },
  module: {
    rules: [
      //处理css 兼容性问题
      //配合pack.json中的browserslist 来指定兼容性到什么成度
      {
        test: /\.css$/,
        use: getStyleloaders(),
      },
      {
        test: /\.less$/,
        use: getStyleloaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleloaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleloaders("stylus-loader"),
      },
      //处理图片
      {
        test: /\.(jpe?g|png|gif|webp|svg)/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, //一般来说10kb
          },
        },
      },
      {
        //处理其他资源
        test: /\.(wpff2?|ttf|map3|mp4)/,
        type: "asset/resource",
      },
      //处理js
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, "../src"),
        loader: require.resolve("babel-loader"),
        options: {
          cacheDirectory: true,
          cacheCompression: false,
        },
      },
    ],
  },
  //处理html
  plugins: [
    new EslintWebpackPlugin({
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true,
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new MiniCssExtractPlugin({
      filename: "static/css/[name].[contenthash:10].css",
      chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "../public"),
          to: path.resolve(__dirname, "../dist"),
          globOptions: {
            //忽略index.html文件
            ignore: ["**/index.html"],
          },
        },
      ],
    }),
  ].filter(Boolean),
  //开发模式
  mode: "production",
  devtool: "source-map",
  optimization: {
    splitChunks: {
      // include all types of chunks
      chunks: "all",
    },
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
    minimizer: [
      new CssMinimizerWebpackPlugin(), //css压缩
      new TerserWebpackPlugin(), // js压缩
      new ImageMinimizerWebpackPlugin({
        minimizer: {
          implementation: ImageMinimizerWebpackPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }), //图片压缩
    ],
  },
  //webpack解析模块加载选项
  resolve: {
    //自动补齐文件扩展名
    extensions: [".jsx", ".js", ".json"],
  },
};

具体依赖：

生产环境依赖
npm i css-minimizer-webpack-plugin mini-css-extract-plugin -D 样式压缩依赖
npm i image-minimizer-webpack-plugin imagemin -D  图片压缩依赖
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D 无损压缩（推荐） 如果下载不下来，请换成淘宝镜像
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D 有损压缩
npm install copy-webpack-plugin --save-dev  复制数据依赖  如果下载不下来，请换成淘宝镜像

最终优化版本

/*
 * @Description:
 * @Author: 莲白
 * @Date: 2022-09-23 08:24:47
 * @LastEditTime: 2022-09-24 11:52:58
 * @LastEditors: 莲白
 */
/**
 * eslint 处理
 */
const path = require("path");
const EslintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ImageMinimizerWebpackPlugin = require("image-minimizer-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
/**
 * 公共方法处理相同样式处理代码
 * @param {*} pre  判断是sass或者less
 * @returns
 */
//获取cross-env定义的环境变量

const isProduction = process.env.NODE_ENV === "production";
console.log(process.env.NODE_ENV, "99999");
const getStyleloaders = (pre) => {
  return [
    isProduction ? MiniCssExtractPlugin.loader : "style-loader",
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env"],
        },
      },
    },
    pre && {
      loader: pre,
      options:
        pre === "less-loader"
          ? {
              lessOptions: {
                //ant 自定义主体配置颜色
                modifyVars: { "@primary-color": "#1DA57A" },
                javascriptEnabled: true,
              },
            }
          : {},
    },
  ].filter(Boolean);
};
module.exports = {
  entry: "./src/main.js",
  output: {
    path: isProduction ? path.resolve(__dirname, "../dist") : undefined,
    filename: isProduction
      ? "static/js/[name].[contenthash:10].js"
      : "static/js/[name].js",
    chunkFilename: isProduction
      ? "static/js/[name].[contenthash:10].chunk.js"
      : "static/js/[name].chunk.js",
    assetModuleFilename: "static/media/[hash:10][ext][query]",
    clean: true,
  },
  module: {
    rules: [
      //处理css 兼容性问题
      //配合pack.json中的browserslist 来指定兼容性到什么成度
      {
        test: /\.css$/,
        use: getStyleloaders(),
      },
      {
        test: /\.less$/,
        use: getStyleloaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleloaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleloaders("stylus-loader"),
      },
      //处理图片
      {
        test: /\.(jpe?g|png|gif|webp|svg)/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, //一般来说10kb
          },
        },
      },
      {
        //处理其他资源
        test: /\.(wpff2?|ttf|map3|mp4)/,
        type: "asset/resource",
      },
      //处理js
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, "../src"),
        loader: require.resolve("babel-loader"),
        options: {
          cacheDirectory: true,
          cacheCompression: false,
          plugins: [!isProduction && "react-refresh/babel"].filter(Boolean), //激活js功能
        },
      },
    ],
  },
  //处理html
  plugins: [
    new EslintWebpackPlugin({
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true,
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    isProduction &&
      new MiniCssExtractPlugin({
        filename: "static/css/[name].[contenthash:10].css",
        chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
      }),
    isProduction &&
      new CopyPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "../public"),
            to: path.resolve(__dirname, "../dist"),
            globOptions: {
              //忽略index.html文件
              ignore: ["**/index.html"],
            },
          },
        ],
      }),
    !isProduction && new ReactRefreshWebpackPlugin(),
  ].filter(Boolean),
  //开发模式
  mode: isProduction ? "production" : "development",
  devtool: isProduction ? "source-map" : "cheap-module-source-map",
  optimization: {
    splitChunks: {
      // include all types of chunks
      chunks: "all",
      cacheGroups: {
        //react  react-dom react-router-dom 一起打包成一个js文件
        react: {
          test: /[\\/]node_modules[\\/]react(.*)?[\\/]/,
          name: "chunk-react",
          priority: 40, //权重
        },
        //antd 单独打包
        antd: {
          test: /[\\/]node_modules[\\/]antd[\\/]/,
          name: "chunk-antd",
          priority: 30, //权重
        },

        //剩下的node_modules 单独打包
        lib: {
          test: /[\\/]node_modules[\\/]/,
          name: "chunk-libs",
          priority: 20, //权重
        },
      },
    },
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
    //是否需要压缩
    minimize: isProduction,
    minimizer: [
      new CssMinimizerWebpackPlugin(), //css压缩
      new TerserWebpackPlugin(), // js压缩
      new ImageMinimizerWebpackPlugin({
        minimizer: {
          implementation: ImageMinimizerWebpackPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }), //图片压缩
    ],
  },
  //webpack解析模块加载选项
  resolve: {
    //自动补齐文件扩展名
    extensions: [".jsx", ".js", ".json"],
  },
  devServer: {
    host: "localhost",
    port: 3300,
    open: true,
    hot: true, //开启HMR
    historyApiFallback: true, //解决报错404页面无法加载的问题
  },
  performance:false, //关闭性能分析，提升打包速度
};

参考源码：

git hub 地址：
https://github.com/yingxingxing/React.git

下载后指令：

cnpm i antd
cnpm i less
cnpm i eslint

由于npm 下载依赖问题，请换成淘宝镜像，如遇到问题可提出来，共同讨论，共同进步，谢谢！

使用脚手架初始化项目

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

my-app 为项目名称

脚手架中使用React 包

1.导入react和react -dom 两个包

1.导入react 和react-dom 两个包
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
2.绑定根元素
const root = ReactDOM.createRoot(document.getElementById('root'));
3.渲染组件元素
root.render(
    <App />
);

JSX语法

const title=<div>JSX语法</div>

注意：
1.React 元素的属性名 使用驼峰命名法
2.特殊属性名：class->className,for–>htmlFor ,tabindex->tabIndex
3.没有子节点的React元素可以用/>结束
4.推荐：使用小括号包裹JSX,从而避免JS中的自动插入分号陷阱

JSX中使用js表达式

数据存储在js中
语法（javaScript表达式））
注意：语法中是单大括号，不是双大括号
{}单花括号

注意点
单大括号中可以使用任意的javaScript表达式 例如：
1.数字，2.字符串，3.运算，4.三元表达式 5.函数
JS中的对象是一个例外,一般只会出现在style属性中
注意：不能在{}中出现语句(比如：if/for等)

JSX中的条件渲染

条件渲染：根据条件渲染特定的jsx结构
可以使用if/else或者三元运算符或逻辑与运算符来实现

JSX中的列表渲染

如果要渲染一组数据，应该使用数据的map()方法
注意：渲染列表时应该添加key属性,key属性的值要保证唯一
原则map()遍历谁，就要给谁添加key属性

const array=[
  {
    id:1,
    title:'莲白'
  },
  {
    id:2,
    title:'莲花'
  },
]
{array.map(item=>{ return <li key={item.id}>{item.title} </li>})}
JSX样式渲染

1.行内样式 —style

   <header style={{display:'flex'}}>
   </header>
  1. 类名----className(推荐)
    <div className="App">
    </div>
莲白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React相关知识
weixin_43165676的博客
11-14 1971
react常见知识
react及react生态知识总结
10-18
对react，react全家桶，react native等的知识点进行汇总
webpack-React脚手架配置
weixin_40746230的博客
06-12 914
webpack搭建 REACT脚手架配置
使用Webpack5搭建项目（react篇）
最新发布
coding...
04-26 1489
检测HMR热更新，样式文件是可以触发，但是js文件依旧不行，所以引用插件，react-refresh-webpack-plugin。页面重新启动即可，但是刷新页面会有404的问题，解决方案：historyApiFallback，配置webapck.dev.js。在引入的时候我们没有这里是对js文件有自动补全的功能，但这里是jsx文件，所以继续配置webpack.dev.js。新建项目，生成package.json文件，创建config文件夹，创建webpack.dev.js文件。
如何在react中安装并配置less，简单易用。
qq_44890362的博客
01-18 3708
1.首先我们需要暴露webpack配置项 yarn eject 执行了上面的指令后大家应该可以看到暴露出来的文件夹如下图 2.安装一下less相关的依赖： npm i less less-loader --save 3.接下来就是配置环节 ：先打开webpack.config.js文件（需要配置三个地方） 4.在文件中按住Ctrl+F进行搜索，首先搜 style files regexes找到位置后添加如下代码 const lessRegex = /\.less$/; ...
create-react-app+TS+antd+less配置——less-loader 6.0之后的配置【转载】
qq_60178319的博客
04-04 953
一、创建项目 a.全局安装create-react-app npm install create-react-app -g b.创建自己的项目 npx create-react-app my-projectName b1.创建支持TypeScript的react项目 npx create-react-app my-projectName --template typescript c.暴露项目的...
Webpack5 教程（5）--- 生产环境
每天都要努力学习哦~~
01-20 1156
生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度两种开发模式开发模式：代码能编译自动化运行生产模式：代码编译优化输出Webpack 基本功能开发模式：可以编译 ES Module 语法生产模式：可以编译 ES Module 语法，压缩 js 代码Webpack 配置文件5 个核心概念entryoutputloaderpluginsmode。
React 知识分享.ppt
06-12
关于web前端MVC框架-react框架的PPT分享,从react的设计理念出发讲解，以及在项目中应用。
React Native 知识分享 - 作业部落 Cmd Markdown 编辑阅读器1
08-03
React Native 知识分享 - 作业部落 Cmd Markdown 编辑阅读器 React Native 是一个基于 JavaScript 和 React 的框架，用于开发跨平台的移动应用程序。本篇文章旨在分享 React Native 的知识点，涵盖从设置开发环境到...
REACT：学习REACT基础知识
02-17
本篇文章将深入探讨React的基础知识，包括它的核心概念、安装与设置、组件化开发、状态管理和事件处理等。 1. **React核心概念** - **虚拟DOM**：React通过虚拟DOM（Document Object Model）来优化性能，避免直接...
2021.12.05 每天进步一点点：在react里配置less-loader和css-modules
tuzi007a的博客
12-05 2477
react中的less-loader, css-moduels配置
react 引入less 2018/12/21
weixin_40046130的博客
12-21 1062
最新的react包 引入less npm install less less-loader --save npm run eject 暴露出webpack 找到build中webpack.config.dev.js 新版本貌似引入sass  所以我们把关于sass 替换成less就ok 将sass替换成less 将sass-loader替换成less-loader 嫌麻烦的直接复制下面代码...
前端面试题（react）
小尘的博客
06-20 9662
性能优化分为2个方面setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态； replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了接收旧的 state 和 action，返回新的 state受控组件就是可以被 react 状态控制的组件 在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）
最新React项目配置less和按需加载antd
RistonTea的博客
10-14 423
一、create-react-app 脚手架搭建的react项目不支持 less，配置less步骤： 1、使用命令将配置文件暴露出来 yarn eject // 或者 npm run eject 注意：yarn eject或者npm run eject 报错This git repository has untracked files or uncommitted changes，因为我...
react中注意点
baidu_41601048的博客
11-06 352
1 如何动态更改className？ <spanclassName={`item${itemData.isComplet?'line':''}`}>{itemData.title}</span> 特别注意${itemData.isComplet?'line':''}` ，不是${itemData.isComplet}?'line':''`
react配置less-loader，两种配置方案
【03】的博客
08-19 2379
1、暴露配置文件 请查阅相关文章 https://web03.cn/blog/152 下载loader npm install less less-loader 配置方案1（推荐） 打开配置文件 webpack.config.js // const cssRegex = /\.css$/;//修改前 const cssRegex = /\.css|less$/;//修改后 新增代码 { loader: require.resolve('less-loader') }, 修改代码 // excl
手把手教你webpack3（7）style-loader详细使用说明
qq20004604的博客
12-05 3737
STYLE-LOADER详细使用说明前注：文档全文请查看 根目录的文档说明。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里，发【Issues】。DEMO地址1、概述简单来说，style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中。对于简单项目，打包然后插入也就足够了，但是遇见复杂情况，例如： 需要使用webpack
入门webpack(七）Webpack中的css-loader 和style-loader
热门推荐
TyrionJ的博客
02-13 2万+
传统上我们会在html文件中引入CSS代码，借助webpack style-loader和css-loader我们可以在.js文件中引入css文件并让样式生效。style-loader和css-loader作用是不同的。 css-loader: 加载.css文件 style-loader:使用<style>将css-loader内部样式注入到我们的HTML页面
antd按需加载遇到的坑：.bezierEasingMixin();
simoon's的博客
12-01 2万+
在less升级到3.x, webpack 升级到4.x的时候，按需加载就会出现错误 了。 ./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/le...
Vue vs React面试知识点精华
以下是对这两个框架的一些核心知识点的详细说明： **Vue.js** 1. **Vue 2.0 特性**：Vue 2.0 引入了虚拟DOM，提升了性能，同时也优化了响应式系统。它支持组件化开发，提供了强大的指令系统（如v-model、v-if/v-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值