ReactJS中文API-FreeNAS中文网

admin 管理员组

文章数量: 887021

2024年1月5日发(作者：shellshock live本地多人)

1.顶层API1.1ReactReact是React库的入口。如果使用的是预编译包，则React是全局的；如果使用CommonJS模块系统，则可以用require()函数引入React。ClassReactClasscreateClass(objectspecification)创建一个组件类，并作出定义。组件实现了render()方法，该方法返回一个子级。该子级可能包含很深的子级结构。组件与标准原型类的不同之处在于，你不需要使用new来实例化。组件是一种很方便的封装，可以（通过new）为你创建后台实例。更多关于定义组件对象的信息，参考组件定义和生命周期。ElementReactElementcreateElement(string/ReactClasstype,[objectprops],[])

创建并返回一个新的指定类型的ReactElement。type参数可以是一个html标签名字字符串（例如，“div”，“span”，等等），或者是ReactClass（通过Class创建的）。FactoryfactoryFunctioncreateFactory(string/ReactClasstype)返回一个生成指定类型ReactElements的函数。比如Element，type参数可以是一个html标签名字字符串（例如，“div”，“span”，等等），或者是ReactClass。ReactComponentrender(ReactElementelement,DOMElementcontainer,[functioncallback])渲染一个ReactElement到DOM中，放在container指定的DOM元素下，返回一个到该组件的引用。

如果ReactElement之前就被渲染到了container中，该函数将会更新此ReactElement，仅改变需要改变的DOM节点以展示最新的React组件。如果提供了可选的回调函数，则该函数将会在组件渲染或者更新之后调用。注意：()替换传入的容器节点内容。在将来，或许可能插入组件到已存在的DOM节点中，但不覆盖已有的子节点。tComponentAtNodebooleanunmountComponentAtNode(DOMElementcontainer)从DOM中移除已经挂载的React组件，清除相应的事件处理器和state。如果在container内没有组件挂载，这个函数将什么都不做。如果组件成功移除，则返回true；如果没有组件被移除，则返回false。ToStringstringrenderToString(ReactElementelement)把组件渲染成原始的HTML字符串。该方法应该仅在服务器端使用。React将会返回一个HTML字符串。你可以在服务器端用此方法生成HTML，然后将这些标记发送给客户端，这样可以获得更快的页面加载速度，并且有利于搜索引擎抓取页面，方便做SEO。

如果在一个节点上面调用()，并且该节点已经有了服务器渲染的标记，React将会维护该节点，并且仅绑定事件处理器，保证有一个高效的首屏加载体验。ToStaticMarkupstringrenderToStaticMarkup(ReactElementelement)和renderToString类似，除了不创建额外的DOM属性，例如data-react-id，因为这些属性仅在React内部使用。如果你想用React做一个简单的静态页面生成器，这是很有用的，因为丢掉额外的属性能够节省很多字节。dElementbooleanisValidElement(*object)判断对象是否是一个ReactElement。运用Element为DOM组件提供了方便的包装。该方式仅在未使用JSX的时候适用。例如，(null,'HelloWorld!')。pes

pes包含了能与组件propTypes对象共用的类型，用于验证传入组件的props。更多有关propTypes的信息，参考复用组件。lizeTouchEventsinitializeTouchEvents(booleanshouldUseTouch)配置React的事件系统，使React能处理移动设备的触摸（touch）事件。en为处理en这个封闭的数据结构提供了有用的工具。(objectchildren,functionfn[,objectcontext])在每一个直接子级（包含在children参数中的）上调用fn函数，此函数中的this指向上下文。如果children是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到fn中。如果children参数是null或者undefined，那么返回null或者undefined而不是一个空对象。h(objectchildren,functionfn[,objectcontext])类似于()，但是不返回对象。(objectchildren)

返回children当中的组件总数，和传递给map或者forEach的回调函数的调用次数一致。(objectchildren)返回children中仅有的子级。否则抛出异常。2.组件API2.1ReactComponentReact组件实例在渲染的时候创建。这些实例在接下来的渲染中被重复使用，可以在组件方法中通过this访问。唯一一种在React之外获取React组件实例句柄的方式就是保存的返回值。在其它组件内，可以使用refs得到相同的结果。2.1.1setStatesetState(objectnextState[,functioncallback])合并nextState和当前state。这是在事件处理函数中和请求回调函数中触发UI更新的主要方法。另外，也支持可选的回调函数，该函数在setState执行完毕并且组件重新渲染完成之后调用。注意：

绝对不要直接改变，因为在之后调用setState()可能会替换掉你做的更改。把当做不可变的。setState()不会立刻改变，而是创建一个即将处理的state转变。在调用该方法之后获取的值可能会得到现有的值，而不是最新设置的值。不保证setState()调用的同步性，为了提升性能，可能会批量执行state转变和DOM渲染。setState()将总是触发一次重绘，除非在shouldComponentUpdate()中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在shouldComponentUpdate()中实现这种逻辑，仅在新state和之前的state存在差异的时候调用setState()可以避免不必要的重新渲染。2.1.2replaceStatereplaceState(objectnextState[,functioncallback])类似于setState()，但是删除之前所有已存在的state键，这些键都不在nextState中。2.1.3forceUpdate()forceUpdate([functioncallback])如果render()方法从或者之外的地方读取数据，你需要通过调用forceUpdate()告诉React什么时候需要再次运行render()。如果直接改变了，也需要调用forceUpdate()。

调用forceUpdate()将会导致render()方法在相应的组件上被调用，并且子级组件也会调用自己的render()，但是如果标记改变了，那么React仅会更新DOM。通常情况下，应该尽量避免所有使用forceUpdate()的情况，在render()中仅从和中读取数据。这会使应用大大简化，并且更加高效。2.1.4getDOMNodeDOMElementgetDOMNode()如果组件已经挂载到了DOM上，该方法返回相应的本地浏览器DOM元素。从DOM中读取值的时候，该方法很有用，比如获取表单字段的值和做一些DOM操作。当render返回null或者false的时候，Node()返回null。2.1.5isMounted()boolisMounted()如果组件渲染到了DOM中，isMounted()返回true。可以使用该方法保证setState()和forceUpdate()在异步场景下的调用不会出错。2.1.6setPropssetProps(objectnextProps[,functioncallback])当和一个外部的JavaScript应用集成的时候，你可能想给一个用()渲染的组件打上改变的标记。尽管在同一个节点上再次调用()来更新根组件是首选的方式，也可以调用setProps()来改变组件的属性，触发一次重新渲染。另

外，可以传递一个可选的回调函数，该函数将会在setProps完成并且组件重新渲染完成之后调用。注意：Whenpossible,()againispreferred;ittendstomakeupdateseasiertoreasonabout.(There'snosignificantperformancedifferencebetweenthetwoapproaches.)刚方法仅在根组件上面调用。也就是说，仅在直接传给()的组件上可用，在它的子级组件上不可用。如果你倾向于在子组件上使用setProps()，不要利用响应式更新，而是当子组件在render()中创建的时候传入新的prop到子组件中。2.1.7replacePropsreplaceProps(objectnextProps[,functioncallback])类似于setProps()，但是删除所有已存在的props，而不是合并新旧两个props对象。3.组件的详细说明和生命周期（ComponentSpecsandLifecycle）

3.1组件的详细说明（ComponentSpecifications）当通过调用Class()来创建组件的时候，你应该提供一个包含render方法的对象，并且也可以包含其它的在这里描述的生命周期方法。3.1.1renderReactComponentrender()render()方法是必须的。当调用的时候，会检测和，返回一个单子级组件。该子级组件可以是虚拟的本地DOM组件（比如

或者()），也可以是自定义的复合组件。你也可以返回null或者false来表明不需要渲染任何东西。实际上，React渲染一个

objectgetInitialState()在组件挂载之前调用一次。返回值将会作为的初始值。3.1.3getDefaultPropsobjectgetDefaultProps()在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定props中的某个键，则此处返回的对象中的相应属性将会合并到（使用in检测属性）。该方法在任何实例创建之前调用，因此不能依赖于。另外，getDefaultProps()返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。3.1.4propTypesobjectpropTypespropTypes对象允许验证传入到组件的props。更多关于propTypes的信息，参考可重用的组件。3.1.5mixinsarraymixinsmixin数组允许使用混合来在多个组件之间共享行为。更多关于混合的信息，参考可重用的组件。3.1.6staticsobjectstaticsstatics对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。例如：varMyComponent=Class({statics:{customMethod:function(foo){returnfoo==='bar';}},render:function(){}});Method('bar');//true在这个块儿里面定义的方法都是静态的，意味着你可以在任何组件实例创建之前调用它们，这些方法不能获取组件的props和state。如果你想在静态方法中检查props的值，在调用处把props作为参数传入到静态方法。3.1.7displayNamestringdisplayNamedisplayName字符串用于输出调试信息。JSX自动设置该值；参考JSX深入。3.2生命周期方法许多方法在组件生命周期中某个确定的时间点执行。3.2.1挂载：componentWillMountcomponentWillMount()服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用setState，render()将会感知到更新后的state，将会执行仅一次，尽管state改变了。3.2.2挂载：componentDidMountcomponentDidMount()在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个DOM展现，你可以通过Node()来获取相应DOM节点。如果想和其它JavaScript框架集成，使用setTimeout或者setInterval来设置定时器，或者发送AJAX请求，可以在该方法中执行这些操作。注意：为了兼容v0.9，DOM节点作为最后一个参数传入。你依然可以通过Node()获取DOM节点。3.2.3更新：componentWillReceivePropscomponentWillReceiveProps(objectnextProps)在组件接收到新的props的时候调用。在初始化渲染的时候，该方法不会调用。用此函数可以作为react在prop传入之后，render()渲染之前更新state的机会。老的props可以通过获取到。在该函数中调用te()将不会引起第二次渲染。componentWillReceiveProps:function(nextProps){te({likesIncreasing:unt>unt});}注意：对于state，没有相似的方法：componentWillReceiveState。将要传进来的prop可能会引起state改变，反之则不然。如果需要在state改变的时候执行一些操作，请使用componentWillUpdate。3.2.4更新：shouldComponentUpdatebooleanshouldComponentUpdate(objectnextProps,objectnextState)在接收到新的props或者state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用forceUpdate方法的时候也不会。如果确定新的props和state不会导致组件更新，则此处应该返回false。shouldComponentUpdate:function(nextProps,nextState){!==;}如果shouldComponentUpdate返回false，则render()将不会执行，直到下一次state改变。（另外，componentWillUpdate和componentDidUpdate也不会被调用。）默认情况下，shouldComponentUpdate总会返回true，在state改变的时候避免细微的bug，但是如果总是小心地把state当做不可变的，在render()中只从props和state读取值，此时你可以覆盖shouldComponentUpdate方法，实现新老props和state的比对逻辑。如果性能是个瓶颈，尤其是有几十个甚至上百个组件的时候，使用shouldComponentUpdate可以提升应用的性能。3.2.5更新：componentWillUpdatecomponentWillUpdate(objectnextProps,objectnextState)在接收到新的props或者state之前立刻调用。在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。注意：你不能在刚方法中使用te()。如果需要更新state来响应某个prop的改变，请使用componentWillReceiveProps。3.2.6更新：componentDidUpdatecomponentDidUpdate(objectprevProps,objectprevState)在组件的更新已经同步到DOM中之后立刻被调用。该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作DOM元素。注意：为了兼容v0.9，DOM节点会作为最后一个参数传入。如果使用这个方法，你仍然可以使用Node()来访问DOM节点。3.2.7移除：componentWillUnmountcomponentWillUnmount()在组件从DOM中移除的时候立刻被调用。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在componentDidMount中创建的DOM元素。4.标签和属性支持4.1支持的标签React尝试支持所用常用的元素。如果你需要的元素没有在下面列出来，请提交一个问题（issue）。4.1.1HTML元素下列的HTML元素是被支持的：aabbraddressareaarticleasideaudiobbasebdibdobigblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1h2h3h4h5h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmenumenuitemmetameternavnoscriptobjectoloptgroupoptionoutputpparampicturepreprogressqrprtrubyssampscriptsectionselectsmallsourcespanstrongstylesubsummarysuptabletbodytdtextareatfootththeadtimetitletrtrackuulvarvideowbr4.1.2SVG元素下列的SVG元素是被支持的：circledefsellipseglinelinearGradientmaskpathpatternpolygonpolylineradialGradientrectstopsvgtexttspan你或许对react-art也感兴趣，它是一个为React写的渲染到Canvas、SVG或者VML（IE8）的绘图库。4.2支持的属性React支持所有data-*和aria-*属性，也支持下面列出的属性。注意：所有的属性都是驼峰命名的，class属性和for属性分别改为className和htmlFor，来符合DOMAPI规范。对于支持的事件列表，参考支持的事件。4.2.1HTML属性这些标准的属性是被支持的：acceptacceptCharsetaccessKeyactionallowFullScreenallowTransparencyaltasyncautoCompleteautoPlaycellPaddingcellSpacingcharSetcheckedclassIDclassNamecolscolSpancontentcontentEditablecontextMenucontrolscoordscrossOrigindatadateTimedeferdirdisableddownloaddraggableencTypeformformActionformEncTypeformMethodformNoValidateformTargetframeBorderheighthiddenhrefhrefLanghtmlForhttpEquiviconidlabellanglistloopmanifestmarginHeightmarginWidthmaxmaxLengthmediamediaGroupmethodminmultiplemutednamenoValidateopenpatternplaceholderposterpreloadradioGroupreadOnlyrelrequiredrolerowsrowSpansandboxscopescrollingseamlessselectedshapesizesizesspanspellChecksrcsrcDocsrcSetstartstepstyletabIndextargettitletypeuseMapvaluewidthwmode另外，下面非标准的属性也是被支持的：autoCapitalizeautoCorrect用于移动端的Safari。property用于OpenGraph原标签。itemPropitemScopeitemType用于HTML5microdata。也有React特有的属性dangerouslySetInnerHTML（更多信息），用于直接插入HTML字符串到组件中。4.2.2SVG属性cxcyddxdyfillfillOpacityfontFamilyfontSizefxfygradientTransformgradientUnitsmarkerEndmarkerMidmarkerStartoffsetopacitypatternContentUnitspatternUnitspointspreserveAspectRatiorrxryspreadMethodstopColorstopOpacitystrokestrokeDasharraystrokeLinecapstrokeOpacitystrokeWidthtextAnchortransformversionviewBoxx1x2xy1y2y5.事件系统5.1虚拟事件对象事件处理器将会传入虚拟事件对象的实例，一个对浏览器本地事件的跨浏览器封装。它有和浏览器本地事件相同的属性和方法，包括stopPropagation()和preventDefault()，但是没有浏览器兼容问题。如果因为一些因素，需要底层的浏览器事件对象，只要使用nativeEvent属性就可以获取到它了。每一个虚拟事件对象都有下列的属性：booleanbubblesbooleancancelableDOMEventTargetcurrentTargetbooleandefaultPreventednumbereventPhasebooleanisTrustedDOMEventnativeEventvoidpreventDefault()voidstopPropagation()DOMEventTargettargetnumbertimeStampstringtype注意：对于v0.12，在事件处理函数中返回false将不会阻止事件冒泡。取而代之的是在合适的应用场景下，手动调用opagation()或者tDefault()。5.2支持的事件React标准化了事件对象，因此在不同的浏览器中都会有相同的属性。如下的事件处理器在事件冒泡阶段触发。要在捕获阶段触发某个事件处理器，在事件名字后面追加Capture字符串；例如，使用onClickCapture而不是onClick来在捕获阶段处理点击事件。5.2.1剪贴板事件事件名：onCopyonCutonPaste属性：DOMDataTransferclipboardData5.2.2键盘事件：事件名：onKeyDownonKeyPressonKeyUp属性：booleanaltKeyNumbercharCodebooleanctrlKeyfunctiongetModifierState(key)StringkeyNumberkeyCodeStringlocaleNumberlocationbooleanmetaKeybooleanrepeatbooleanshiftKeyNumberwhich5.2.3焦点事件事件名：onFocusonBlur属性：DOMEventTargetrelatedTarget5.2.4表单事件事件名：onChangeonInputonSubmit更多关于onChange事件的信息，参考表单。5.2.5鼠标事件事件名：onClickonDoubleClickonDragonDragEndonDragEnteronDragExitonDragLeaveonDragOveronDragStartonDroponMouseDownonMouseEnteronMouseLeaveonMouseMoveonMouseOutonMouseOveronMouseUp属性：booleanaltKeyNumberbuttonNumberbuttonsNumberclientXNumberclientYbooleanctrlKeyfunctiongetModifierState(key)booleanmetaKeyNumberpageXNumberpageYDOMEventTargetrelatedTargetNumberscreenXNumberscreenYbooleanshiftKey5.2.6触摸事件为了使触摸事件生效，在渲染所有组件之前调用lizeTouchEvents(true)。事件名：onTouchCancelonTouchEndonTouchMoveonTouchStart属性：booleanaltKeyDOMTouchListchangedTouchesbooleanctrlKeyfunctiongetModifierState(key)booleanmetaKeybooleanshiftKeyDOMTouchListtargetTouchesDOMTouchListtouches5.2.7UI事件事件名：onScroll属性：NumberdetailDOMAbstractViewview5.2.8鼠标滚轮滚动事件事件名：onWheel属性：NumberdeltaModeNumberdeltaXNumberdeltaYNumberdeltaZ6.与DOM的差异React为了性能和跨浏览器的原因，实现了一个独立于浏览器的事件和DOM系统。利用此功能，可以屏蔽掉一些浏览器的DOM的粗糙实现。所有DOM的properties和attributes（包括事件处理器）应该都是驼峰命名的，以便和标准的JavaScript风格保持一致。我们故意和规范不同，因为规范本身就不一致。然而，data-*和aria-*属性符合规范，应该仅是小写的。style属性接收一个带有驼峰命名风格的JavaScript对象，而不是一个CSS字符串。这与DOM中的style的JavaScript属性保持一致，更加有效，并且弥补了XSS安全漏洞。所有的事件对象和W3C规范保持一致，并且所有的事件（包括提交事件）冒泡都正确地遵循W3C规范。参考事件系统获取更多详细信息。onChange事件表现得和你想要的一样：当表单字段改变了，该事件就被触发，而不是等到失去焦点的时候。我们故意和现有的浏览器表现得不一致，是因为onChange是它的行为的一个错误称呼，并且React依赖于此事件来实时地响应用户输入。参考表单获取更多详细信息。表单输入属性，例如value和checked，以及textarea。这里有更多相关信息。7.特殊的非DOM属性除了与DOM的差异之外，React也提供了一些DOM里面不存在的属性。key：可选的唯一的标识器。当组件在渲染过程中被各种打乱的时候，由于差异检测逻辑，可能会被销毁后重新创建。给组件绑定一个key，可以持续确保组件还存在DOM中。更多内容请参考这里。ref：参考这里。dangerouslySetInnerHTML：提供插入纯HTML字符串的功能，主要为了能和生成DOM字符串的库整合。更多内容请参考这里。iliationReact的关键设计目标是使API看起来就像每一次有数据更新的时候，整个应用重新渲染了一样。这就极大地简化了应用的编写，但是同时使React易于驾驭，也是一个很大的挑战。这篇文章解释了我们如何使用强大的试探法来将O(n3)复杂度的问题转换成O(n)复杂度的问题。8.1动机（Motivation）生成最少的将一颗树形结构转换成另一颗树形结构的操作，是一个复杂的，并且值得研究的问题。最优算法的复杂度是O(n3)，n是树中节点的总数。这意味着要展示1000个节点，就要依次执行上十亿次的比较。这对我们的使用场景来说太昂贵了。准确地感受下这个数字：现今的CPU每秒钟能执行大约三十亿条指令。因此即便是最高效的实现，也不可能在一秒内计算出差异情况。既然最优的算法都不好处理这个问题，我们实现一个非最优的O(n)算法，使用试探法，基于如下两个假设：1、拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。2、可以为元素提供一个唯一的标志，该元素在不同的渲染过程中保持不变。实际上，这些假设会使在几乎所有的应用场景下，应用变得出奇地快。8.2两个节点的差异检查（Pair-wisediff）为了进行一次树结构的差异检查，首先需要能够检查两个节点的差异。此处有三种不同的情况需要处理：8.2.1不同的节点类型如果节点的类型不同，React将会把它们当做两个不同的子树，移除之前的那棵子树，然后创建并插入第二棵子树。renderA:renderB:=>[removeNode

],[insertNode]

该方法也同样应用于传统的组件。如果它们不是相同的类型，React甚至将不会尝试计算出该渲染什么，仅会从DOM中移除之前的节点，然后插入新的节点。renderA:

renderB:=>[removeNode

],[insertNode]具备这种高级的知识点对于理解为什么React的差异检测逻辑既快又精确是很重要的。它对于避开树形结构大部分的检测，然后聚焦于似乎相同的部分，提供了启发。一个

元素与一个元素生成的DOM结构不太可能一样。React将重新创建树形结构，而不是耗费时间去尝试匹配这两个树形结构。如果在两个连续的渲染过程中的相同位置都有一个

元素，将会希望生成一个非常相似的DOM结构，因此值得去做一做匹配。8.2.2DOM节点当比较两个DOM节点的时候，我们查看两者的属性，然后能够找出哪一个属性随着时间产生了变化。renderA:renderB:=>[replaceAttributeid"after"]

React不会把style当做难以操作的字符串，而是使用键值对对象。这就很容易地仅更新改变了的样式属性。renderA:renderB:=>[removeStylecolor],[addStylefont-weight'bold']在属性更新完毕之后，递归检测所有的子级的属性。8.2.3自定义组件我们决定两个自定义组件是相同的。因为组件是状态化的，不可能每次状态改变都要创建一个新的组件实例。React利用新组件上的所有属性，然后在之前的组件实例上调用component[Will/Did]ReceiveProps()。现在，之前的组件就是可操作了的。它的render()方法被调用，然后差异算法重新比较新的状态和上一次的状态。8.3子级优化差异算法（List-wisediff）8.3.1问题点（ProblematicCase）为了完成子级更新，React选用了一种很原始的方法。React同时遍历两个子级列表，当发现差异的时候，就产生一次DOM修改。例如在末尾添加一个元素：renderA:

first

renderB:

firstsecond

=>[insertNodesecond]

在开始处插入元素比较麻烦。React发现两个节点都是span，因此直接修改已有span的文本内容，然后在后面插入一个新的span节点。renderA:

first

renderB:

secondfirst

=>[replaceAttributetextContent'second'],[insertNodefirst]有很多的算法尝试找出变换一组元素的最小操作集合。Levenshteindistance算法能够找出这个最小的操作集合，使用单一元素插入、删除和替换，复杂度为O(n2)。即使使用Levenshtein算法，不会检测出一个节点已经移到了另外一个位置去了，要实现这个检测算法，会引入更加糟糕的复杂度。8.3.2键（Keys）为了解决这个看起来很棘手的问题，引入了一个可选的属性。可以给每个子级一个键值，用于将来的匹配比较。如果指定了一个键值，React就能够检测出节点插入、移除和替换，并且借助哈希表使节点移动复杂度为O(n)。renderA:

first

renderB:

secondfirst

=>[insertNodesecond]在实际开发中，生成一个键值不是很困难。大多数时候，要展示的元素已经有一个唯一的标识了。当没有唯一标识的时候，可以给组件模型添

加一个新的ID属性，或者计算部分内容的哈希值来生成一个键值。记住，键值仅需要在兄弟节点中唯一，而不是全局唯一。8.4权衡（Trade-offs）同步更新算法只是一种实现细节，记住这点很重要。React能在每次操作中重新渲染整个应用，最终的结果将会是一样的。我们定期优化这个启发式算法来使常规的应用场景更加快速。在当前的实现中，能够检测到某个子级树已经从它的兄弟节点中移除，但是不能指出它是否已经移到了其它某个地方。当前算法将会重新渲染整个子树。由于依赖于两个预判条件，如果这两个条件都没有满足，性能将会大打折扣。1、算法将不会尝试匹配不同组件类的子树。如果发现正在使用的两个组件类输出的DOM结构非常相似，你或许想把这两个组件类改成一个组件类。实际上，这不是个问题。2、如果没有提供稳定的键值（例如通过()生成），所有子树将会在每次数据更新中重新渲染。通过给开发者设置键值的机会，能够给特定场景写出更优化的代码。

（虚拟）DOM术语EditonGitHub在React的术语中，有五个核心类型，区分它们是很重要的：ReactElement/ReactElement工厂ReactNodeReactComponent/ReactComponent类9.1React元素React中最主要的类型就是ReactElement。它有四个属性：type，props，key和ref。它没有方法，并且原型上什么都没有。可以通过Element创建该类型的一个实例。varroot=Element('div');为了渲染一个新的树形结构到DOM中，你创建若干个ReactElement，然后传给作为第一个参数，同时将第二个参数设为一个正规的DOM元素（HTMLElement或者SVGElement）。不要混淆ReactElement实例和DOM元素实例。一个ReactElement实例是一个轻量的，无状态的，不可变的，虚拟的DOM元素的表示。是一个虚拟DOM。(root,);要添加属性到DOM元素，把属性对象作为第二个参数传入，把子级作为第三个参数传给。

varchild=Element('li',null,'TextContent');varroot=Element('ul',{className:'my-list'},child);(root,);如果使用ReactJSX语法，这些ReactElement实例自动创建。所以，如下代码是等价的：varroot=

TextContent

;(root,);工厂一个ReactElement工厂就是一个简单的函数，该函数生成一个带有特殊type属性的ReactElement。React有一个内置的辅助方法用于创建工厂函数。事实上该方法就是这样的：functioncreateFactory(type){(null,type);}该函数能创建一个方便的短函数，而不是总调用Element('div')。vardiv=Factory('div');varroot=div({className:'my-div'});(root,);React已经内置了常用HTML标签的工厂函数：

varroot=({className:'my-list'},(null,'TextContent'));如果使用JSX语法，就不需要工厂函数了。JSX已经提供了一种方便的短函数来创建ReactElement实例。9.2React节点一个ReactNode可以是：ReactElementstring（又名ReactText）number（又名ReactText）ReactNode实例数组（又名ReactFragment）这些被用作其它ReactElement实例的属性，用于表示子级。实际上它们创建了一个ReactElement实例树。（ivelytheycreateatreeofReactElements.）9.3React组件在使用React开发中，可以仅使用ReactElement实例，但是，要充分利用React，就要使用ReactComponent来封装状态化的组件。一个ReactComponent类就是一个简单的JavaScript类（或者说是“构造函数”）。varMyComponent=Class({

render:function(){...}});当该构造函数调用的时候，应该会返回一个对象，该对象至少带有一个render方法。该对象指向一个ReactComponent实例。varcomponent=newMyComponent(props);//neverdothis除非为了测试，正常情况下不要自己调用该构造函数。React帮你调用这个函数。相反，把ReactComponent类传给createElement，就会得到一个ReactElement实例。varelement=Element(MyComponent);或者使用JSX：varelement=;当该实例传给的时候，React将会调用构造函数，然后创建并返回一个ReactComponent。varcomponent=(element,);如果一直用相同的ReactElement类型和相同的DOM元素容器调用，将会总是返回相同的实例。该实例是状态化的。varcomponentA=(,);varcomponentB=(,);

componentA===componentB;//true这就是为什么不应该创建你自己的实例。相反，在创建之前，ReactElement是一个虚拟的ReactComponent。新旧ReactElement可以比对，从而决定是创建一个新的ReactComponent实例还是重用已有的实例。ReactComponent的render方法应该返回另一个ReactElement，这就允许组件被组装。（TherentelytherenderresolvesintoReactElementwithastringtagwhichinstantiatesaDOMElementinstanceandinsertsitintothedocument.）9.4正式的类型定义入口点（EntryPoint）=(ReactElement,HTMLElement|SVGElement)=>ReactComponent;节点和元素（NodesandElements）typeReactNode=ReactElement|ReactFragment|ReactText;typeReactElement=ReactComponentElement|ReactDOMElement;typeReactDOMElement={type:string,props:{

children:ReactNodeList,className:string,etc.},key:string|boolean|number|null,ref:string|null};typeReactComponentElement={type:ReactClass,props:TProps,key:string|boolean|number|null,ref:string|null};typeReactFragment=Array;typeReactNodeList=ReactNode|ReactEmpty;typeReactText=string|number;typeReactEmpty=null|undefined|boolean;

类和组件（ClassesandComponents）typeReactClass=(TProps)=>ReactComponent;typeReactComponent={props:TProps,render:()=>ReactElement};

本文标签：组件事件调用方法使用

版权声明：本文标题：ReactJS中文API 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.freenas.com.cn/free/1704454024h460449.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

发表评论

全部评论 0

暂无评论

技术交流 – FreeNAS中文网

ReactJS中文API