IE 11上的React重新渲染
是指在Internet Explorer 11浏览器中使用React框架进行开发的网页应用，在页面发生变化时，React会重新渲染页面以更新显示内容。
React是一个用于构建用户界面的JavaScript库，它采用组件化的开发方式，将页面拆分成多个独立的组件，每个组件负责管理自己的状态和渲染逻辑。当组件的状态发生变化时，React会自动重新渲染受影响的组件，以保持页面的同步更新。
在IE 11上，由于其对现代Web标准的支持较弱，React的性能可能会受到一定的影响。IE 11不支持ES6的一些新特性，而React使用了许多ES6语法和功能。因此，在IE 11上使用React时，可能会遇到一些性能问题和兼容性挑战。
为了解决这些问题，可以采取以下措施：
- 使用Babel进行代码转换：Babel是一个广泛使用的JavaScript编译器，可以将使用了ES6语法的代码转换为ES5语法，以提高在IE 11上的兼容性。
- 使用Polyfill填充功能缺失：Polyfill是一种用于填充浏览器功能缺失的JavaScript代码，可以通过引入相应的Polyfill库来解决IE 11上缺失的功能，如Promise、Map、Set等。
- 避免频繁的重新渲染：在React开发中，应尽量避免频繁的状态更新和重新渲染，可以使用React的性能优化工具，如shouldComponentUpdate生命周期方法和React.memo等，来减少不必要的重新渲染。
- 使用React的Server Side Rendering（SSR）：SSR是一种将React组件在服务器端渲染成HTML字符串，然后将其发送到浏览器的技术。通过使用SSR，可以减轻浏览器上React的渲染负担，提高页面加载速度和性能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数（云函数）：https://cloud.tencent.com/product/scf
- 腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
- 腾讯云API网关：https://cloud.tencent.com/product/apigateway
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（移动推送）：https://cloud.tencent.com/product/umeng
- 腾讯云音视频（腾讯云短视频）：https://cloud.tencent.com/product/vod
- 腾讯云安全产品：https://cloud.tencent.com/product/safe
相关·内容
3回答
SCRIPT1002: React + Babel + Webpack的IE11语法错误
javascript、reactjs、internet-explorer、webpack、babeljs
我试着使用Webpack + Babel在IE >= 11中运行>=功能来获得我的React。设置是自定义的，使用inferno-compat层，所以这里不使用create-react-app。
然而--尽管将最新的babel-polyfill和babel-preset-env实践应用于我的.babelrc和webpack配置，但在尝试用IE11访问应用程序时，我仍然在bundle.js中得到了一个SCRIPT1002:语法错误。
当我遵循IEs控制台中的语法错误引用时，这是生成的bundle.js中冲突的部分(特别是箭头函数)：
function add(x, y) {
if
浏览 6提问于2017-12-06得票数 6
1回答
Vuejs在IE上不起作用
google-chrome、internet-explorer、vue.js、babeljs
这个链接在chrome上工作得很好。但是当使用IE11时，它会显示元素。
我尝试添加babel和polyfill，但没有成功。是一个单页面的网站。Vuejs作为脚本标签中的cdn。我没有用什么webpack的。
您可以通过查看源代码来检查代码
浏览 1提问于2018-08-09得票数 2
4回答
如何在nuxt2.0中添加一个多填充？
nuxt.js、nuxt-edge
在Nuxt 1.4.2中，我的nuxt.config.js中有以下内容
build: {
vendor: ['babel-polyfill'],
babel: {
presets: [
['vue-app', {
useBuiltIns: true,
targets: { ie: 11, uglify: true },
},
],
],
},
},
似乎所有这些都在Nuxt 2.0中被打破了。至少，我期待足够多的填充，以使IE 11工作。以下是我尝试过的：
像我以前一
浏览 4提问于2018-09-22得票数 24
回答已采纳
1回答
包含了巴别塔多边形填充，但forEach仍然不能在NodeLists上的IE11中工作
javascript、webpack、babeljs、npm-scripts、babel-polyfill
我已经让Webpack使用了Babel并包含了@babel/polyfill，但是IE11在NodeList上使用.forEach时仍然抛出了一个SCRIPT438错误。
这是我的package.json
{
...
"scripts": {
"build:js": "webpack --config ./_build/webpack.config.js"
},
...
"browserslist": [
"IE 11",
"last 3 versions"
浏览 3提问于2018-11-16得票数 13
回答已采纳
2回答
对象不支持属性或方法“”jscomp_symbol_iterator0“”
javascript、babeljs
我正在使用babel 6.7构建一个单页面的React.js web应用程序。我已经尝试包含所有相关的polyfill，例如babel-polyfill，以使其与ES5浏览器兼容。尽管如此，我还是时不时地收到一个javascript错误，如下所示
Object doesn't support property or method 'jscomp_symbol_iterator0'
主要来自运行IE10+的Windows7和8.1用户。
我假设这与js Symbol.iterator不受支持有关。有没有一种方法可以让我在较老的浏览器中多填充它？
谢谢!
浏览 1提问于2016-04-26得票数 5
1回答
如何处理每个依赖包的IE11兼容性？
reactjs、webpack、next.js、babeljs、internet-explorer-11
我正在构建一个应用程序，它使用React(v.17.0)，Next.js(v11.1.2)，…还有其他的堆叠。
默认情况下，Next.js可能支持IE11。
在我向我的项目中添加了一些包之后，它在IE11上失败了。它说，在控制台中，扩展操作符是不支持的，以及其他一些东西。
我想原因是出现问题的包没有正确设置。例如，包是在类型记录中构建的，但它们没有将tsconfig.compilerOptions.target指定为es5。我查了资料来源。
我试过了
在pages/_app.js中添加react app-polyfill/IE11
我应该试试…吗？
贡献每个包，使其能够与IE1
浏览 9提问于2021-09-07得票数 0
1回答
当process.env.NODE_ENV=='production‘时，在IE11.0.9600中未定义获取和报头。
javascript、internet-explorer、babeljs、fetch-api、babel-polyfill
当process.env.NODE_ENV=='development' -它是好的！
但我们的生产建设失败在IE11 (11.0.9600)。所有的工作在铬55良好。
devDependencies：
...
babel-core: "6.22.0",
babel-eslint: "^7.0.0",
babel-loader: "^6.2.5",
babel-preset-env: "^1.5.2",
babel-preset-es2015: "^6.16.0",
babel-preset-es2
浏览 7提问于2017-06-20得票数 7
回答已采纳
9回答
为什么IE 11显示空白页面渲染react应用程序
javascript、reactjs、internet-explorer、rendering、polyfills
我对IE 11和我的react应用程序有一个问题。我使用了Webpack，巴别塔和polyfill.io cdn，一切都很好，直到渲染堆文件，然后它停止做任何事情。你知道会出什么问题吗？
提前谢谢。
浏览 1提问于2018-12-05得票数 56
1回答
在Internet explorer 11上运行React应用程序会导致堆栈溢出
reactjs、internet-explorer、create-react-app
我正在尝试在internet explorer 11上运行我的react应用程序。 我正在使用Create-React-App，并且按照文档所说的做了- 在index.js中添加 import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import "fast-text-encoding/text"; //this is to bypass the arrow functions syntax errors// 在package.json中 "devel
浏览 53提问于2020-07-23得票数 3
回答已采纳
2回答
如果我使用的是巴别-波尔填充，我可以用打字记录来锁定ES6吗？
javascript、typescript、ecmascript-6、babeljs
我正在编写一个类型记录/ React / Redux应用程序，它利用了现代的ES6+特性，比如生成器和对象扩展。
我目前正在将我的tsconfig.json目标设置为ES5，并在我的应用程序中包括babel-polyfill。
因为在大多数浏览器中，ES6是而不是ES5，所以我更喜欢从类型记录配置中选择ES6。然而，我担心我将无法支持那么多的浏览器。
babel-polyfill是否提供了与转移到ES5目标相同水平的ES5支持？
浏览 3提问于2017-06-06得票数 2
回答已采纳
3回答
ChildNode.remove()填充babel-填充
javascript、babeljs、polyfills、babel-polyfill
我正在使用和我所描述的Mozilla，我需要一个IE的多填充。我使用的是webpack配置的babel聚脂填充：
"babel-polyfill": "^6.13.0",
"webpack": "^2.4.1",
webpack.config.babel.js:
entry: ['babel-polyfill', join(__dirname, path, "index.web.js") ],
我的假设是，babel-polyfill将为我提供我所需要的所有常见的填充--但事实并非如此，
浏览 5提问于2017-05-03得票数 11
回答已采纳
1回答
不使用fixPromise填充定义的要求未在IE 11上定义
javascript、babel-polyfill
我在Internet 11上得到了错误消息Promise is not defined，为了修复它，我用npm安装了babel-polyfill，我在上面设置了js (简单的js文件，而不是角文件或其他任何框架)文件。
require("@babel/polyfill");
但是我得到了require is not defined，.How，我必须包括多填充？
浏览 0提问于2018-09-12得票数 1
2回答
IE11中的Web Worker onMessage为空
javascript、reactjs、typescript、ecmascript-6、internet-explorer-11
在我的react应用程序的IE11中，我得到了错误"Promise is Undefined“。当我在代码中使用Worker时
const worker = new Worker('./worker.ts')
console.log('worker' , worker);
当我在Chrome和IE 11中检查日志时，Chrome返回worker onMessage作为函数，而IE 11返回null，我还看到消息"Permission denied“。我在IE 11中也得到了这个错误"Promise is Undefined“。
我已经在文
浏览 1提问于2018-12-16得票数 2
1回答
使用FrameWork ReactJS和NodeJS web应用程序发布Bot NodeJS IE
node.js、reactjs、internet-explorer、botframework
嗨，我有机器人框架实现使用Nodejs和reactjs在蔚蓝的web应用程序。代码在Edge，Chrome中运行得很好，但是在IE中，我得到了带有错误附件的空白页。下面是密码。事实上，即使我尝试微软在github上的一个示例，它也无法在IE中加载。是样本。
我做了一些研究，发现reactjs在IE上确实有一些渲染问题，我们应该在代码中使用polyfill包，这一点我还是没有发现。
import 'react-app-polyfill/ie11';
declare var require: any
var React = require('react');
var
浏览 2提问于2019-07-28得票数 0
回答已采纳
1回答
如何在webpack开发服务器配置中设置浏览器列表
webpack、babeljs、webpack-dev-server
我正试着在webpack的配置文件中设置browserslist，但我想不出该怎么做。 在webpack.config中尝试了以下操作： 'use strict';
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
include: paths.appSrc,
use: [
{
loader: 'babel-loader',
浏览 15提问于2019-02-25得票数 5
回答已采纳
1回答
即使在我的webpack中添加了babel-polyfill之后，仍然得到‘符号’也是没有定义的‘错误。
javascript、reactjs、ecmascript-6
我不理解文档页面中的以下几行：
浏览器标题中的用法
有人能帮我做些什么吗？
下面是我的代码片段：
我用故事书作为样板：
webpack.config.js file:
entry: [
'babel-polyfill',
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs
]
index.js file:
import 'babel-polyfill';
import React from 'react&#
浏览 0提问于2017-02-09得票数 1
3回答
在IE11中，使用IE11 polyfill导入的Starter create-react-app仍会中止
reactjs、internet-explorer-11
使用: react 16.8.6。在开发模式下工作。 1) Do: npm create-react-app my-app 2) cd my-app 3)新增:导入"react-app-polyfill/ie11"；作为index.js中新的第一行 4) do: npm start 5)在Windows10上的IE11中，它会在控制台中中止，并显示以下内容： SCRIPT1002:语法错误1.chunk.js (10735,34) SCRIPT1002:语法错误main.chunk.js (154,1) 我尝试过其他的polyfills： 导入react-app-polyfi
浏览 53提问于2019-06-04得票数 3
回答已采纳
1回答
如何使用babel / core-js检测功能并仅延迟加载所需的polyfills？
lazy-loading、babeljs、feature-detection、polyfills、core-js
像polyfill.io这样的Polyfill服务似乎只向浏览器提供了很小的特征检测，然后只延迟加载实际需要的Polyfill。 根据我对babel documentation on polyfilling的理解，babel总是包含所有可能需要的多填充:它将处理一个核心，然后包含来自browserslist -js的最弱浏览器所需的多填充。像webpack这样的绑定者可能会将所有这些多边形填充合并到应用程序中，但没有运行时功能检测。 我的应用程序使用现代的ES语言特性，但也面向广泛的浏览器，包括IE10和IE11。这需要大量的多面填充，并且可能会使捆绑包膨胀，特别是对于可能不需要大部分多面填
浏览 25提问于2019-10-07得票数 9
回答已采纳
5回答
Next JS与Puppeteer JS的区别
reactjs、puppeteer、server-side-rendering、next.js
我看过，他们建议对JS构建的应用程序(React、Vue等)使用动态渲染。实现这一点的工具之一是使用Puppeteer JS。我需要创建一个严重依赖搜索引擎优化的应用程序，所以服务器端渲染(SSR)是非常重要的。
我知道Next JS默认完成SSR，但是我能用Puppeteer + Create React App做同样的事情吗？Next JS和Puppeteer在SSR和动态渲染方面有什么不同，哪一个更适合SSR？
浏览 2提问于2018-07-09得票数 0
3回答
React应用程序将JS转换为ES5以实现目标IE 11
javascript、reactjs、babeljs、babel-polyfill
我目前有一个react应用程序，它不能在IE中运行/渲染，我想是因为ES5 / ES6的问题。
我得到的错误是:语法错误。
在下面突出显示的行上。
if(process.env.NODE_ENV == 'production') {
=> module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
在编译前的inde
浏览 5提问于2020-09-25得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
