天道酬勤,学无止境

React 包装器:React 无法识别 DOM 元素上的 `staticContext` 属性(React wrapper: React does not recognize the `staticContext` prop on a DOM element)

问题

我正在尝试围绕 react-router-dom NavLink组件创建一个包装器组件。

我希望我的自定义组件接受所有 NavLinks 道具,并将它们代理到NavLink

但是,当我这样做时,我得到:

警告:React 无法识别 DOM 元素上的staticContext 。 如果您有意希望它作为自定义属性出现在 DOM 中,请将其拼写为小写的staticcontext 。 如果您不小心从父组件传递了它,请将其从 DOM 元素中删除。

可以在此处找到该问题的工作演示:

  • https://codesandbox.io/s/w0n49rw7kw
回答1

有一种克服方法是使用:

const { to, staticContext, ...rest } = this.props;

所以你的...rest永远不会包含staticContext

回答2

这是 React 文档中记录的简单解决方案的常见问题:

如果您尝试使用 React 未识别为合法 DOM 属性/属性的 prop 来渲染 DOM 元素,则会触发 unknown-prop 警告。 你应该确保你的 DOM 元素没有浮动的虚假道具。

展开运算符可用于将变量从 props 中拉出,并将剩余的 props 放入变量中。

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

您还可以将道具分配给新对象并从新对象中删除您正在使用的键。 确保不要从原始 this.props 对象中删除道具,因为该对象应该被认为是不可变的。

function MyDiv(props) {

  const divProps = Object.assign({}, props);
  delete divProps.layout;

  if (props.layout === 'horizontal') {
    return <div {...divProps} style={getHorizontalStyle()} />
  } else {
    return <div {...divProps} style={getVerticalStyle()} />
  }
}
回答3

React 文档给出的答案对于我的情况来说不够好,所以我发现/开发了一个并不完美的答案,但至少不是那么麻烦。

你可以在这里看到它出现的问答:What is Reacts function for checks if a property apply?

要点是,使用一个函数为你挑选出不好的道具。

const SPECIAL_PROPS = [
    "key",
    "children",
    "dangerouslySetInnerHTML",
];

const defaultTester = document.createElement("div")
function filterBadProps(props: any, tester: HTMLElement = defaultTester) {
    if(process.env.NODE_ENV !== 'development') { return props; }

    // filter out any keys which don't exist in reacts special props, or the tester.
    const out: any = {};
    Object.keys(props).filter((propName) => 
        (propName in tester) || (propName.toLowerCase() in tester) || SPECIAL_PROPS.includes(propName)
    ).forEach((key) => out[key] = props[key]);

    return out;
}

就我个人而言,我觉得一开始警告完全没有用,所以我添加了一行,在不处于开发模式时完全跳过检查(并且警告被抑制)。 如果您觉得这些警告有价值,只需删除该行:

if(process.env.NODE_ENV !== 'development') { return props; }

你可以这样使用它:

public render() {
    const tooManyProps = this.props;
    const justTheRightPropsForDiv = filterBadProps(tooManyProps);
    const justTheRightPropsForSpan = filterBadProps(tooManyProps, document.createElement("span"));

    return (<div {...justTheRightPropsForDiv}>
        <span {...justTheRightPropsForSpan} />
    </div>)
}
回答4

发生这种情况是因为您可能在组件中的某处使用了{...props}

来自 React 的示例:

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

我们单独抓取layout这样它就不会包含在{...rest}

回答5

如果有人对 react-admin 有此问题,请检查您是否没有作为 Admin 子项的链接。 像这样:

<Admin layout={props => <Layout/>}>
  <Link to="/something">something</Link> <-- causing issue
</Admin>

只需将其移动到另一个组件。 例如,在布局内部。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 是否可以在 React 中使用 Polymer?(Is it possible to use Polymer inside of React?)
    问题 我一直在使用 React 并希望在 React 中使用 Polymer 标签。 React 不识别 Polymer 标签,因为 React 只处理基本的 DOM 标签。 有没有办法将 Polymer 标签添加到 React DOM 库? 回答1 是的,有可能。 创建聚合物元素。 <link rel="import" href="../../bower_components/polymer/polymer.html"> Polymer({ is: 'calender-element', ready: function(){ this.textContent = "I am a calender"; } }); 通过在 html 页面中导入聚合物组件,使其成为 html 标签。 例如,将它导入到您的 React 应用程序的 index.html 中。 <link rel="import" href="./src/polymer-components/calender-element.html"> 在 jsx 文件中使用该元素。 'use strict'; import React from 'react'; class MyComponent extends React.Component{ render(){ return ( <calender-element><
  • react-router v4 源码分析
    在最近接的一些新项目中都有用到 react-router,每次都是照着老工程抄过来,碰到问题也都是试来试去浪费过多的时间,因此有必要了解一下其工作原理来提高工作效率。1 阅读前注意React16.3 对 Context 已经正式支持,并提供了全新的API(https://reactjs.org/docs/context.html),react-router 从 18 年 1 月 29 日开始了 Context 相关代码的逐步升级(https://github.com/ReactTraining/react-router/pull/5908),安装时可通过 npm install react-router@next 获取到最新非正式版。本文中所引用的代码来自 react-router@4.3.1 目前最新的正式版本,使用的还是老的实验版 Context API,与 next 版可能存在些许不同,请注意。2 什么是 react-routerreact-router v4 是一个使用纯 react 实现的路由解决方案,可以理解为是对 history 库的 react 封装,v4 与其之前的版本在设计方式和理念上有较大的差别,为重写库。react-router 包含有两个具体实现,react-router-dom 和 react-router-native
  • iOS面试的一些小问题!
    React vs Vue前言:技术选型没有绝对的对与错技术选型要考虑的因素非常多表达自己的观点,并说明理由两者的本质区别:vue - 本质是MVVM框架,由mvc发展而来React - 本质是前端组件化框架,由后端组件化发展而来但两者都能实现相同的功能模板的区别:vue - 使用模板(template)由angular提出React - 使用JSX,一种编程语法,类似于html模板语法上更倾向于JSX:vue中的指令v-需要现学,并且它们的值是放在引号中,比较困惑;而JSX中,只需要知道大括号中可以写JS表达式,就OK模板分离上更倾向于vue组件化的区别:React本身就是组件化,没有组件化就不是Reactvue也支持组件化,不过是在MVVM上的扩张对于组件化,更倾向于React,做的更彻底两者共同点:支持组件化数据驱动视图总结:1.国内,首推vue,文档易读、易学、社区足够大2.团队水平高,推荐使用React,组件化和jsx作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要,这是一个我的iOS开发交流群:130595548,不管你是大牛还是小白都欢迎入驻 ,让我们一起进步,共同发展!(群内会免费提供一些群主收藏的免费学习书籍资料以及整理好的几百道面试题和答案文档!)React对组件化的理解与面向对象类似,分为: 封装、继承、多态组件的封装视图数据变化逻辑(数据驱动视图变化
  • react-router:如何禁用一个 ,是否活跃?(react-router: How to disable a <Link>, if its active?)
    问题 如果<Link> URL <Link>的URL已处于活动状态,如何在<Link>中禁用它? 例如,如果单击<Link>时我的URL不会改变,我想完全避免单击或渲染<span>而不是<Link> 。 我想到的唯一解决方案是使用activeClassName (或activeStyle )并设置pointer-events: none; ,但我想使用在IE9和IE10中都可以使用的解决方案。 回答1 我不会问您为什么要这种行为,但是我想您可以将<Link />包装在您自己的自定义链接组件中。 <MyLink to="/foo/bar" linktext="Maybe a link maybe a span" route={this.props.route} /> class MyLink extends Component { render () { if(this.props.route === this.props.to){ return <span>{this.props.linktext}</span> } return <Link to={this.props.to}>{this.props.linktext}</Link> } } (ES6,但您可能已经了解了总体思路...) 回答2 您可以使用CSS的pointer-events属性。 这将适用于大多数浏览器。 例如
  • 在Bootstrap弹出窗口中渲染React组件(Rendering a React component inside a Bootstrap popover)
    问题 我有一组在内容属性/参数中使用bootstrap popover ui组件具有弹出窗口的图像,我想添加ReactJS MusicList组件,但是我无法弄清楚语法或是否可行。 var MusicList = React.createClass({ render : function(){ return(<ul><li>Here</li></ul>); } }); var PopoverImage = React.createClass({ componentDidMount:function(){ $("#"+this.getDOMNode().id).attr('data-component','<span>here</span>'); $("#"+this.getDOMNode().id).popover({ html:true, content: }); }, render:function(){ return( <img href="#" id={this.props.friend.uid+'_popover'} data-html={true} className="smallImage" src={this.props.friend.pic_small} rel="popover" data-original-title={this.props.friend
  • React wrapper: React does not recognize the `staticContext` prop on a DOM element
    I'm trying to create a wrapper component around the react-router-dom NavLink component. I would like my custom component to accept all of NavLinks props, and proxy them down to NavLink. However when I do this, I'm getting: Warning: React does not recognize the staticContext prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase staticcontext instead. If you accidentally passed it from a parent component, remove it from the DOM element. A working demo of the issue can be found here: https://codesandbox.io/s/w0n49rw7kw
  • React-从DOM元素获取组件进行调试(React - getting a component from a DOM element for debugging)
    问题 为了在控制台中进行调试,React中是否有任何机制可以使用DOM元素实例来获取支持的React组件? 先前已经在生产代码中使用此问题时询问过此问题。 但是,我的重点是用于调试目的的开发版本。 我熟悉React的Chrome调试扩展,但是并非在所有浏览器中都可用。 将DOM资源管理器和控制台结合使用,很容易使用“ $ 0”快捷方式来访问有关突出显示的DOM元素的信息。 我想在调试控制台中编写如下代码:getComponentFromElement($ 0).props 即使在React开发构建中,也没有机制可以使用元素的ReactId来获取组件吗? 回答1 我刚刚阅读了文档,并且afaik都没有一个外部公开的API可以让您直接进入并通过ID查找React组件。 但是,您可以更新初始的React.render()调用,并将返回值保留在某个位置,例如: window.searchRoot = React.render(React.createElement...... 然后,您可以引用searchRoot,并直接浏览它,或使用React.addons.TestUtils遍历它。 例如,这将为您提供所有组件: var componentsArray = React.addons.TestUtils.findAllInRenderedTree(window.searchRoot
  • 检测React组件外部的点击(Detect click outside React component)
    问题 我正在寻找一种检测点击事件是否在组件外部发生的方法,如本文所述。 jQuery最接近的()用于查看click事件中的目标是否具有dom元素作为其父元素之一。 如果存在匹配项,则click事件属于子项之一,因此不被视为在组件之外。 因此,在我的组件中,我想将单击处理程序附加到窗口。 当处理程序触发时,我需要将目标与组件的dom子对象进行比较。 click事件包含“ path”之类的属性,该属性似乎包含事件经过的dom路径。 我不确定要比较什么或如何最好地遍历它,并且我认为有人必须已经将其放在聪明的实用程序函数中了……不? 回答1 React 16.3+中的引用用法已更改。 以下解决方案使用ES6,并遵循最佳实践进行绑定以及通过一种方法设置ref。 要查看实际效果: 类实施挂钩实现 类的实现: import React, { Component } from 'react'; import PropTypes from 'prop-types'; /** * Component that alerts if you click outside of it */ export default class OutsideAlerter extends Component { constructor(props) { super(props); this.wrapperRef =
  • 什么是事件池反应?(What is event pooling in react?)
    问题 SyntheticEvent已合并。 这意味着在调用事件回调后,将重新使用SyntheticEvent对象,并且所有属性都将无效。 这是出于性能原因。 因此,您不能以异步方式访问事件。 参考:React中的事件系统 回答1 这意味着事件的属性仅在回调处于活动状态时存在。 将异步添加到混音中或将事件存储以供将来使用将失败。 如果在事件处理程序中尝试console.log(event)则很容易观察到。 在您检查对象时,事件对象上的大多数属性将为null 。 如果您停止使用debugger;执行脚本debugger; 记录该值后,您可以立即检查这些值。 class MyComponent extends React.Component { handleClick (e){ console.log('The event currentTarget is', e.currentTarget); // DOM element setTimeout(() => { console.log('event.currentTarget was', e.currentTarget); // null }, 1000) } render () { return <button onClick={this.handleClick}>Fire event!</button> } } 当您单击按钮时
  • 如何避免多余的包裹在React中?(How to avoid extra wrapping <div> in React?)
    问题 今天,我开始学习ReactJS,一个小时后面对了这个问题。我想在页面上的div内插入一个具有两行的组件。下面是我正在做的简化示例。 我有一个html: <html> .. <div id="component-placeholder"></div> .. </html> 渲染功能如下: ... render: function() { return( <div className="DeadSimpleComponent"> <div className="DeadSimpleComponent__time">10:23:12</div > <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div> </div> ) } .... 在下面,我称渲染为: ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder')); 生成的HTML如下所示: <html> .. <div id="component-placeholder"> <div class="DeadSimpleComponent"> <div class="DeadSimpleComponent__time">10:23
  • 面试官,别再问我React-Router了!每一行源码我都看过了!React-Router 源码 阅读 react router
    前言 此处介绍一下React-Router的核心原理。特别细致的标点符号的不予讨论。 学前小知识 React-Router其实最核心的东西是Route组件和由统一作者开发的History库来建立的。接下来跟着镜头一起走进神秘的ßReact-Router世界吧。 已经知道怎么使用的直接跳过,到下面的源码分析去┗|`O′|┛ 嗷~~ 简单示例 一起建一个简单的示例吧。先用react官网的create-react-app脚手架弄个react出来。 npx create-react-app my-app cd my-app npm start 安装react-router-dom npm install react-router-dom 在大家安装之余,我简答的介绍一下react-router和react-router-dom的区别。 react-router和react-router-dom的区别。 先看提供的API import { Switch, Route, Router } from 'react-router'; import { Swtich, Route, BrowserRouter, HashHistory, Link } from 'react-router-dom'; React-router 提供了路由的核心api。如Router、Route、Switch等
  • 如何使用 RouteComponentProps 测试 React 组件?(How to test a React component with RouteComponentProps?)
    问题 我有一个组件,它具有扩展RouteComponentProps ,如下所示: export interface RouteComponentProps<P> { match: match<P>; location: H.Location; history: H.History; staticContext?: any; } 现在,当我在应用程序中使用我的组件时,我将这些道具传递给它: <MyComponent match={this.props.match} location={this.props.location} history={this.props.history} /> 道具已经可用,因为它在反应路由器内运行。 现在,我如何在没有match 、 location 、 history可用的情况下测试这个组件? 我需要模拟它们还是应该以某种方式使用一些辅助函数自动加载它们? 回答1 要回答您的最后一个问题,推荐的方法是在您的测试中使用<MemoryRouter>< *your component here* ></MemoryRouter> 。 Typescript 没有发现该组件会将所需的道具传递给您的组件,因此我认为它不是一种类型安全的方法。 这适用于 React Router v4,不适用于以前的版本。 对于测试用 HOC
  • 如何在React中响应自动调整大小的DOM元素的宽度?(How can I respond to the width of an auto-sized DOM element in React?)
    问题 我有一个使用React组件的复杂网页,并且正在尝试将该页面从静态布局转换为响应更快,可调整大小的布局。 但是,我一直遇到React的限制,并且想知道是否存在用于处理这些问题的标准模式。 在我的特定情况下,我有一个使用display:table-cell和width:auto呈现为div的组件。 不幸的是,我无法查询组件的宽度,因为除非将元素实际放置在DOM(具有推论实际渲染宽度的完整上下文)中,否则您无法计算该元素的大小。 除了将其用于诸如相对鼠标定位之类的事情之外,我还需要它来在组件内的SVG元素上正确设置宽度属性。 此外,当窗口调整大小时,如何在设置过程中将尺寸变化从一个组件传递到另一个组件? 我们正在shouldComponentUpdate中完成所有第三方SVG渲染,但是您无法在该方法中的自己或其他子组件上设置状态或属性。 是否有使用React处理此问题的标准方法? 回答1 最实用的解决方案是使用一个库来执行类似React-Measure的操作。 更新:现在有一个自定义钩子,用于大小调整检测(我还没有亲自尝试过):react-resize-aware。 作为自定义钩子,它比react-measure看起来更方便使用。 import * as React from 'react' import Measure from 'react-measure' const
  • 如何在React中的另一个return语句中返回多行JSX?(How to return multiple lines JSX in another return statement in React?)
    问题 单行工作正常 render: function () { return ( {[1,2,3].map(function (n) { return <p>{n}</p> }} ); } 不适用于多行 render: function () { return ( {[1,2,3].map(function (n) { return ( <h3>Item {n}</h3> <p>Description {n}</p> ) }} ); } 谢谢。 回答1 尝试将标签视为函数调用(请参阅文档)。 然后第一个变为: {[1,2,3].map(function (n) { return React.DOM.p(...); })} 第二个: {[1,2,3].map(function (n) { return ( React.DOM.h3(...) React.DOM.p(...) ) })} 现在应该清楚,第二个片段实际上没有任何意义(在JS中不能返回多个值)。 您必须将其包装在另一个元素中(很可能是您想要的,这样您还可以提供有效的key属性),或者可以使用类似以下内容的方法: {[1,2,3].map(function (n) { return ([ React.DOM.h3(...), React.DOM.p(...) ]); })} 使用JSX糖: {[1,2,3].map
  • 更改 reactjs 中的 scrollTop(change scrollTop in reactjs)
    问题 我刚学react,想实现一个功能: A,B都是组件,如果A滚动,那么B滚动 以下是我的代码 <A onScroll="handleScroll"></A> //what i write now handleScroll: function(event){ var target = event.nativeEvent.target; //do something to change scrollTop value target.scrollTop += 1; // it looks the same as not use react document.getElementById(B).scrollTop = target.scrollTop; } 但实际上我想要这样的代码 //what i want <A scrollTop={this.props.scrollSeed}></A> <B scrollTop={this.props.scrollSeed}></B> //... handleScroll(){ this.setState({scrollSeed: ++this.state.scrollSeed}) } 它类似于input <input value="this.props.value"/> <input value="this.props.value"/>
  • 在组件上反应onClick事件(React onClick event on component)
    问题 我有一个名为<SensorList />的React组件,它有许多子<SensorItem /> s(另一个React组件)。 我希望能够申报onClick每个事件的<SensorItem />从内<SensorList /> 我尝试执行以下操作: sensorSelected: function(sensor) { console.log('Clicked!'); }, render: function() { var nodes = this.state.sensors.map(function(sensor) { return ( <SensorItem onClick={ this.sensorSelected } /> ); }.bind(this)); return ( <div className="sensor-list"> { nodes } </div> ); } 不用说,我没有得到任何“点击!” 出现在我的控制台中。 Chrome中的React检查器指示已注册一个onClick事件,并应具有上面的功能主体。 因此,我得出结论,我无法在实际的<SensorItem />标记上注册onClick事件(但是,我不确定为什么会这样)。 否则我该如何实现呢? 回答1 这取决于您的SensorItem组件的定义。 因为SensorItem不是本机DOM元素
  • React高频面试题,值得珍藏!
    说明+感悟:以下所有面试题在本人面试时基本都有出现,当初我在面试时和很多朋友一样,网上搜寻了大量的面试题,疯狂的背诵。说实话,很多面试题确实会被问道,你回答的可能也很标准,但不一定是面试官想要的答案。回答出面试官想要的答案尤为重要。本篇内容,我希望给大家带来的是知识而不是枯燥的背文 前言:React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用。 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。 问:React 的工作原理 React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时,React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变,第二步是调节(reconciliation),会用 diff 的结果来更新 DOM。 (如果有问到什么是react的工作原理,千万不能只回答这一句话
  • React 基础面试题(二) 贼细+答案
    这些是我平时翻阅+面试遇到的面试题,可能会不全,但还会继续补充!!!!!! 1、 什么是React? React 是 Facebook 在 2011 年开发的前端 JavaScript 库。它遵循基于组件的方法,有助于构建可重用的UI组件。它用于开发复杂和交互式的 Web 和移动 UI。尽管它仅在 2015 年开源,但有一个很大的支持社区。 2、 React有什么特点? 1、生命式设计:react采用声明范式。 2、高效:react通过对DOM的模拟,最大限度减少DOM交互。 3、灵活:react可与已知的库和框架很好的配合。 4、JSX:JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 5、组件:通过react构建组件,使得代码更加容易得到复用,能够很好应用在大项目开发中。 6、单向页面的数据流:react实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。 3、 列出React的一些主要优点。 它提高了应用的性能可以方便地在客户端和服务器端使用由于 JSX,代码的可读性很好React 很容易与 Meteor,Angular 等其他框架集成使用React,编写UI测试用例变得非常容易 4、 React有哪些限制? React的限制如下: React 只是一个库,而不是一个完整的框架它的库非常庞大
  • 2020前端高频面试题总结(附答案)
    [ js基础题 ] 1. new的实现原理是什么? 1. 创建一个空对象,构造函数中的this指向这个空对象 2. 这个新对象被执行 [[原型]] 连接 3. 执行构造函数方法,属性和方法被添加到this引用的对象中 4. 如果构造函数中没有返回其它对象,那么返回this,即创建的这个的新对象,否则,返回构造函数中返回的对象。 2. 深拷贝和浅拷贝的区别是什么 1.深拷贝复制变量值,对于非基本类型的变量,则递归至基本类型变量后,再复制。 2.深拷贝后的对象与原来的对象是完全隔离的,互不影响,对一个对象的修改并不会影响另一个对象。 3. bind、call、apply的区别? bind,call,apply语法概念 1.bind语法: 2.func.bind(thisArg[, arg1[, arg2[, ...]]]) 3.thisArg 当绑定函数被调用时,该参数会作为原函数运行时的this指向。当使用new 操作符调用绑定函数时, 4.该参数无效。 5.arg1, arg2, ... 当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。 call语法: 1.fun.call(thisArg, arg1, arg2, ...) 2.thisArg::在fun函数运行时指定的this值。需要注意的是, 3.指定的this值并不一定是该函数执行时真正的this值
  • 30道常见React基础面试题
    【前端面试题】30道常见React基础面试题(附答案) 当今最流行的框架非 React莫属。 React以其岀色的性能,颠覆了互联网的理念,简单的开发方式受到许多开发者的青睐。 因此,在 React中,虚拟DOM、组件的生命周期、组件的通信、组件的约束性,配合 Reflux、 Redux等框架的使用,基于 EMAScript6语法开发,以及 Webpack编译等都是读者要掌握的内容。 当然, React的三大特色(虚拟DOM、组件开发、多端适配)的具体实现,开发者也要有所了解。 1、当调用 setState的时候,发生了什么操作? 当调用 setState时, React做的第一件事是将传递给setState的对象合并到组件的当前状态,这将启动一个称为和解( reconciliation)的过程。 和解的最终目标是,根据这个新的状态以最有效的方式更新DOM。 为此, React将构建一个新的 React虚拟DOM树(可以将其视为页面DOM元素的对象表示方式)。 一旦有了这个DOM树,为了弄清DOM是如何响应新的状态而改变的, React会将这个新树与上一个虚拟DOM树比较。 这样做, React会知道发生的确切变化,并且通过了解发生的变化后,在绝对必要的情况下进行更新DOM,即可将因操作DOM而占用的空间最小化。 2、在 React中元素( element)和组件(