1 / 38
文档名称:

ReactJS中文API.pdf

格式:pdf   大小:2,213KB   页数:38页
下载后只包含 1 个 PDF 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

ReactJS中文API.pdf

上传人:小辰GG 2022/11/23 文件大小:2.16 MB

下载得到文件列表

ReactJS中文API.pdf

文档介绍

文档介绍:该【ReactJS中文API 】是由【小辰GG】上传分享,文档一共【38】页,该文档可以免费在线阅读,需要了解更多关于【ReactJS中文API 】的内容,可以使用淘豆网的站内搜索功能,选择自己适合的文档,以下文字是截取该文章内的部分文字,如需要获得完整电子版,请下载此文档到您的设备,方便您编辑和打印。:.


React是React库的入口。如果使用的是预编译包,则React是全局的;
如果使用CommonJS模块系统,则可以用require()函数引入
React。

ReactClasscreateClass(objectspecification)
创建一个组件类,并作出定义。组件实现了render()方法,该方法返回
一个子级。该子级可能包含很深的子级结构。组件与标准原型类的不同
之处在于,你不需要使用new来实例化。组件是一种很方便的封装,
可以(通过new)为你创建后台实例。
更多关于定义组件对象的信息,参考组件定义和生命周期。

ReactElementcreateElement(
string/ReactClasstype,
[objectprops],
[children...]
):.
创建并返回一个新的指定类型的ReactElement。type参数可以是一个
html标签名字字符串(例如,“div”,“span”,等等),或者
是ReactClass()。

factoryFunctioncreateFactory(
string/ReactClasstype
)
返回一个生成指定类型ReactElements的函数。比
,type参数可以是一个html标签名字字符串
(例如,“div”,“span”,等等),或者是ReactClass。

ReactComponentrender(
ReactElementelement,
DOMElementcontainer,
[functioncallback]
)
渲染一个ReactElement到DOM中,放在container指定的DOM
元素下,返回一个到该组件的引用。:.
如果ReactElement之前就被渲染到了container中,该函数将会更新
此ReactElement,仅改变需要改变的DOM节点以展示最新的
React组件。
如果提供了可选的回调函数,则该函数将会在组件渲染或者更新之后调
用。
注意:
()替换传入的容器节点内容。在将来,或许可能插入组件到
已存在的DOM节点中,但不覆盖已有的子节点。

booleanunmountComponentAtNode(DOMElementcontainer)
从DOM中移除已经挂载的React组件,清除相应的事件处理器和
state。如果在container内没有组件挂载,这个函数将什么都不做。
如果组件成功移除,则返回true;如果没有组件被移除,则返回false。

stringrenderToString(ReactElementelement)
把组件渲染成原始的HTML字符串。该方法应该仅在服务器端使用。
React将会返回一个HTML字符串。你可以在服务器端用此方法生成
HTML,然后将这些标记发送给客户端,这样可以获得更快的页面加载
速度,并且有利于搜索引擎抓取页面,方便做SEO。:.
(),并且该节点已经有了服务器渲
染的标记,React将会维护该节点,并且仅绑定事件处理器,保证有一
个高效的首屏加载体验。

stringrenderToStaticMarkup(ReactElementelement)
和renderToString类似,除了不创建额外的DOM属性,例
如data-react-id,因为这些属性仅在React内部使用。如果你想用
React做一个简单的静态页面生成器,这是很有用的,因为丢掉额外的
属性能够节省很多字节。

booleanisValidElement(*object)
判断对象是否是一个ReactElement。


装。该方式仅在未使用JSX的时候适用。例如,(null,
'HelloWorld!')。
:.
,用于验
证传入组件的props。更多有关propTypes的信息,参考复用组件。

initializeTouchEvents(booleanshouldUseTouch)
配置React的事件系统,使React能处理移动设备的触摸(touch)
事件。


有用的工具。

(objectchildren,functionfn[,objectcontext])
在每一个直接子级(包含在children参数中的)上调用fn函数,此函
数中的this指向上下文。如果children是一个内嵌的对象或者数组,它
将被遍历:不会传入容器对象到fn中。如果children参数是null或
者undefined,那么返回null或者undefined而不是一个空对象。

(objectchildren,functionfn[,objectcontext])
(),但是不返回对象。

(objectchildren):.
返回children当中的组件总数,和传递给map或者forEach的回调函
数的调用次数一致。

(objectchildren)
返回children中仅有的子级。否则抛出异常。


React组件实例在渲染的时候创建。这些实例在接下来的渲染中被重复
使用,可以在组件方法中通过this访问。唯一一种在React之外获取
。在其它组
件内,可以使用refs得到相同的结果。

setState(objectnextState[,functioncallback])
合并nextState和当前state。这是在事件处理函数中和请求回调函
数中触发UI更新的主要方法。另外,也支持可选的回调函数,该函数
在setState执行完毕并且组件重新渲染完成之后调用。
注意::.
,因为在之后调用setState()可能会替换掉
你做的更改。。
setState(),而是创建一个即将处理的state转
变。,而不
是最新设置的值。
不保证setState()调用的同步性,为了提升性能,可能会批量执行state
转变和DOM渲染。
setState()将总是触发一次重绘,除非在shouldComponentUpdate()中
实现了条件渲染逻辑。如果使用可变的对象,但是又不能
在shouldComponentUpdate()中实现这种逻辑,仅在新state和之前
的state存在差异的时候调用setState()可以避免不必要的重新渲染。

replaceState(objectnextState[,functioncallback])
类似于setState(),但是删除之前所有已存在的state键,这些键都不
在nextState中。
()
forceUpdate([functioncallback])
如果render(),你
需要通过调用forceUpdate()告诉React什么时候需要再次运
行render()。,也需要调用forceUpdate()。:.
调用forceUpdate()将会导致render()方法在相应的组件上被调用,并
且子级组件也会调用自己的render(),但是如果标记改变了,那么
React仅会更新DOM。
通常情况下,应该尽量避免所有使用forceUpdate()的情况,
在render()。这会使应用大大
简化,并且更加高效。

DOMElementgetDOMNode()
如果组件已经挂载到了DOM上,该方法返回相应的本地浏览器
DOM元素。从DOM中读取值的时候,该方法很有用,比如获取表
单字段的值和做一些DOM操作。当render返回null或者false的时
候,()返回null。
()
boolisMounted()
如果组件渲染到了DOM中,isMounted()返回true。可以使用该方
法保证setState()和forceUpdate()在异步场景下的调用不会出错。

setProps(objectnextProps[,functioncallback])
当和一个外部的JavaScript应用集成的时候,你可能想给一个
()渲染的组件打上改变的标记。
()来更新根组件是首选的方
式,也可以调用setProps()来改变组件的属性,触发一次重新渲染。另:.
外,可以传递一个可选的回调函数,该函数将会在setProps完成并且
组件重新渲染完成之后调用。
注意:
Whenpossible,thedeclarativeapproachof
()againispreferred;ittendstomakeupdates
easiertoreasonabout.(There'snosignificantperformance
differencebetweenthetwoapproaches.)
刚方法仅在根组件上面调用。也就是说,仅在直接传
()的组件上可用,在它的子级组件上不可用。如果你倾
向于在子组件上使用setProps(),不要利用响应式更新,而是当子组件
在render()中创建的时候传入新的prop到子组件中。

replaceProps(objectnextProps[,functioncallback])
类似于setProps(),但是删除所有已存在的props,而不是合并新旧两
个props对象。

(ComponentSpecsand
Lifecycle):.
(Component
Specifications)
()来创建组件的时候,你应该提供一个包
含render方法的对象,并且也可以包含其它的在这里描述的生命周期
方法。

ReactComponentrender()
render()方法是必须的。
当调用的时候,,返回一个单子级组件。
该子级组件可以是虚拟的本地DOM组件(比如<div/>或
()),也可以是自定义的复合组件。
你也可以返回null或者false来表明不需要渲染任何东西。实际上,
React渲染一个<noscript>标签来处理当前的差异检查逻辑。当返
回null或者false的时候,()将返回null。
render()函数应该是纯粹的,也就是说该函数不修改组件state,每次
调用都返回相同的结果,不读写DOM信息,也不和浏览器交互(例
如通过使用setTimeout)。如果需要和浏览器交互,
在componentDidMount()中或者其它生命周期方法中做这件事。保持
render()纯粹,可以使服务器端渲染更加切实可行,也使组件更容易被
理解。
:.
objectgetInitialState()
在组件挂载之前调用一次。。

objectgetDefaultProps()
在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没
有指定props中的某个键,则此处返回的对象中的相应属性将会合并
(使用in检测属性)。
该方法在任何实例创建之前调用,。另外,
getDefaultProps()返回的任何复杂对象将会在实例间共享,而不是每个
实例拥有一份拷贝。

objectpropTypes
propTypes对象允许验证传入到组件的props。更多关
于propTypes的信息,参考可重用的组件。

arraymixins
mixin数组允许使用混合来在多个组件之间共享行为。更多关于混合的
信息,参考可重用的组件。

objectstatics
statics对象允许你定义静态的方法,这些静态的方法可以在组件类上调
用。例如::.
varMyComponent=({
statics:{
customMethod:function(foo){
returnfoo==='bar';
}
},
render:function(){
}
});
('bar');//true
在这个块儿里面定义的方法都是静态的,意味着你可以在任何组件实例
创建之前调用它们,这些方法不能获取组件的props和state。如果
你想在静态方法中检查props的值,在调用处把props作为参数传
入到静态方法。

stringdisplayName
displayName字符串用于输出调试信息。JSX自动设置该值;参考JSX
深入。

许多方法在组件生命周期中某个确定的时间点执行。:.
:componentWillMount
componentWillMount()
服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如
果在这个方法内调用setState,render()将会感知到更新后的state,将
会执行仅一次,尽管state改变了。
:componentDidMount
componentDidMount()
在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调
用)。在生命周期中的这个时间点,组件拥有一个DOM展现,你可
()来获取相应DOM节点。
如果想和其它JavaScript框架集成,使用setTimeout或
者setInterval来设置定时器,或者发送AJAX请求,可以在该方法中
执行这些操作。
注意:
,DOM节点作为最后一个参数传入。你依然可以通过
()获取DOM节点。
:componentWillReceiveProps
componentWillReceiveProps(objectnextProps)
在组件接收到新的props的时候调用。在初始化渲染的时候,该方法
不会调用。:.
用此函数可以作为react在prop传入之后,render()渲染之前更新
state的机会。。在该函数中
()将不会引起第二次渲染。
componentWillReceiveProps:function(nextProps){
({
likesIncreasing:>
});
}
注意:
对于state,没有相似的方法:componentWillReceiveState。将要传进
来的prop可能会引起state改变,反之则不然。如果需要在state
改变的时候执行一些操作,请使用componentWillUpdate。
:shouldComponentUpdate
booleanshouldComponentUpdate(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可以提升应用的性能。
:componentWillUpdate
componentWillUpdate(objectnextProps,objectnextState)
在接收到新的props或者state之前立刻调用。在初始化渲染的时候
该方法不会被调用。
使用该方法做一些更新之前的准备工作。
注意:
()。如果需要更新state来响应某
个prop的改变,请使用componentWillReceiveProps。
:componentDidUpdate
componentDidUpdate(objectprevProps,objectprevState):.
在组件的更新已经同步到DOM中之后立刻被调用。该方法不会在初
始化渲染的时候调用。
使用该方法可以在组件更新之后操作DOM元素。
注意:
,DOM节点会作为最后一个参数传入。如果使用这个
方法,()来访问DOM节点。
:componentWillUnmount
componentWillUnmount()
在组件从DOM中移除的时候立刻被调用。
在该方法中执行任何必要的清理,比如无效的定时器,或者清除
在componentDidMount中创建的DOM元素。


React尝试支持所用常用的元素。如果你需要的元素没有在下面列出
来,请提交一个问题(issue)。

下列的HTML元素是被支持的:
aabbraddressareaarticleasideaudiobbasebdibdobigblockquotebodybr:.
buttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfn
dialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1h2h3h4h5
h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilink
mainmapmarkmenumenuitemmetameternavnoscriptobjectoloptgroupoption
outputpparampicturepreprogressqrprtrubyssampscriptsectionselect
smallsourcespanstrongstylesubsummarysuptabletbodytdtextareatfootth
theadtimetitletrtrackuulvarvideowbr

下列的SVG元素是被支持的:
circledefsellipseglinelinearGradientmaskpathpatternpolygonpolyline
radialGradientrectstopsvgtexttspan
你或许对react-art也感兴趣,它是一个为React写的渲染到
Canvas、SVG或者VML(IE8)的绘图库。

React支持所有data-*和aria-*属性,也支持下面列出的属性。
注意:
所有的属性都是驼峰命名的,class属性和for属性分别改
为className和htmlFor,来符合DOMAPI规范。
对于支持的事件列表,参考支持的事件。

这些标准的属性是被支持的::.
acceptacceptCharsetaccessKeyactionallowFullScreenallowTransparencyalt
asyncautoCompleteautoPlaycellPaddingcellSpacingcharSetcheckedclassID
classNamecolscolSpancontentcontentEditablecontextMenucontrolscoords
crossOrigindatadateTimedeferdirdisableddownloaddraggableencTypeform
formActionformEncTypeformMethodformNoValidateformTargetframeBorderheight
hiddenhrefhrefLanghtmlForhttpEquiviconidlabellanglistloopmanifest
marginHeightmarginWidthmaxmaxLengthmediamediaGroupmethodminmultiple
mutednamenoValidateopenpatternplaceholderposterpreloadradioGroup
readOnlyrelrequiredrolerowsrowSpansandboxscopescrollingseamless
selectedshapesizesizesspanspellChecksrcsrcDocsrcSetstartstepstyle
tabIndextargettitletypeuseMapvaluewidthwmode
另外,下面非标准的属性也是被支持的:
autoCapitalizeautoCorrect用于移动端的Safari。
property用于OpenGraph原标签。
itemPropitemScopeitemType用于HTML5microdata。
也有React特有的属性dangerouslySetInnerHTML(更多信息),用
于直接插入HTML字符串到组件中。

cxcyddxdyfillfillOpacityfontFamilyfontSizefxfygradientTransform
gradientUnitsmarkerEndmarkerMidmarkerStartoffsetopacity
patternContentUnitspatternUnitspointspreserveAspectRat