mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Paul O’Shannessy
574 lines
30 KiB
HTML
574 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<!--[if IE]><![endif]-->
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<title>Top-Level API | React</title>
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta property="og:title" content="Top-Level API | React">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://facebook.github.io/react/docs/top-level-api-zh-CN.html">
|
||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||
<meta property="fb:app_id" content="623268441017527">
|
||
|
||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||
<link rel="stylesheet" href="/react/css/react.css">
|
||
|
||
<script src="//use.typekit.net/vqa1hcx.js"></script>
|
||
<script>try{Typekit.load();}catch(e){}</script>
|
||
|
||
<!--[if lte IE 8]>
|
||
<script src="/react/js/html5shiv.min.js"></script>
|
||
<script src="/react/js/es5-shim.min.js"></script>
|
||
<script src="/react/js/es5-sham.min.js"></script>
|
||
<![endif]-->
|
||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
||
<script src="/react/js/codemirror.js"></script>
|
||
<script src="/react/js/javascript.js"></script>
|
||
<script src="/react/js/react.js"></script>
|
||
<script src="/react/js/react-dom.js"></script>
|
||
<script src="/react/js/babel-browser.min.js"></script>
|
||
<script src="/react/js/live_editor.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
|
||
<div class="nav-main">
|
||
<div class="wrap">
|
||
<a class="nav-home" href="/react/index.html">
|
||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||
React
|
||
</a>
|
||
<ul class="nav-site nav-site-internal">
|
||
<li><a href="/react/docs/getting-started.html" class="active">Docs</a></li>
|
||
<li><a href="/react/support.html">Support</a></li>
|
||
<li><a href="/react/downloads.html">Download</a></li>
|
||
<li><a href="/react/blog/">Blog</a></li>
|
||
<li>
|
||
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="nav-site nav-site-external">
|
||
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
||
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<section class="content wrap documentationContent">
|
||
<div class="nav-docs">
|
||
<!-- Docs Nav -->
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Quick Start</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/getting-started.html">Getting Started</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/tutorial.html">Tutorial</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Community Resources</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/conferences.html">Conferences</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/videos.html">Videos</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" class="external">Complementary Tools</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://github.com/facebook/react/wiki/Examples" class="external">Examples</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Guides</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/why-react.html">Why React?</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/forms.html">Forms</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/more-about-refs.html">Refs to Components</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/addons.html">Add-Ons</a>
|
||
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/animation.html">Animation</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/clone-with-props.html">Cloning Elements</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/create-fragment.html">Keyed Fragments</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/update.html">Immutability Helpers</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/perf.html">Performance Tools</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/shallow-compare.html">Shallow Compare</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/context.html">Context</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Reference</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/component-api.html">Component API</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/events.html">Event System</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/webcomponents.html">Web Components</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Flux</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="https://facebook.github.io/flux/docs/overview.html" class="external">Flux Overview</a>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://facebook.github.io/flux/docs/todo-list.html" class="external">Flux TodoMVC Tutorial</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<!-- Tips Nav -->
|
||
|
||
<div class="nav-docs-section">
|
||
<h3>Tips</h3>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/react/tips/introduction.html">Introduction</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="inner-content">
|
||
<h1>
|
||
Top-Level API
|
||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/ref-01-top-level-api.zh-CN.md" target="_blank">Edit on GitHub</a>
|
||
</h1>
|
||
<div class="subHeader"></div>
|
||
|
||
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
|
||
<p><code>React</code> 是 React 库的入口点。如果你使用预编译包中的一个，则 <code>React</code> 为全局变量；如果你使用 CommonJS 模块，你可以 <code>require()</code> 它。</p>
|
||
<h3><a class="anchor" name="react.component"></a>React.Component <a class="hash-link" href="#react.component">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Component</span>
|
||
</code></pre></div>
|
||
<p>当使用ES6 类定义时，React.Component是 React 组件的基类。如何在React中使用 ES6 class 请参见 <a href="/react/docs/reusable-components-zh-CN.html#es6-classes">可重用组件</a>。基类实际提供了哪些方法 请参见 <a href="/react/docs/component-api-zh-CN.html">组件 API</a>.</p>
|
||
<h3><a class="anchor" name="react.createclass"></a>React.createClass <a class="hash-link" href="#react.createclass">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactClass</span> <span class="nx">createClass</span><span class="p">(</span><span class="nx">object</span> <span class="nx">specification</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>给定一份规格（specification），创建一个组件类。组件通常要实现一个 <code>render()</code> 方法，它返回 <strong>单个的</strong> 子级。该子级可能包含任意深度的子级结构。组件与标准原型类的不同之处在于，你不需要对它们调用 new。 它们是为你在后台构造实例（通过 new）的便利的包装器。</p>
|
||
|
||
<p>更多关于规格对象（specification object）的信息，请见 <a href="/react/docs/component-specs-zh-CN.html">组件规格和生命周期</a> 。</p>
|
||
<h3><a class="anchor" name="react.createelement"></a>React.createElement <a class="hash-link" href="#react.createelement">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactElement</span> <span class="nx">createElement</span><span class="p">(</span>
|
||
<span class="nx">string</span><span class="o">/</span><span class="nx">ReactClass</span> <span class="nx">type</span><span class="p">,</span>
|
||
<span class="p">[</span><span class="nx">object</span> <span class="nx">props</span><span class="p">],</span>
|
||
<span class="p">[</span><span class="nx">children</span> <span class="p">...]</span>
|
||
<span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>创建并返回一个新的给定类型的 <code>ReactElement</code>。type 参数既可以是一个 html 标签名字符串（例如. “div”，“span”，等等），也可以是一个 <code>ReactClass</code> （用 <code>React.createClass</code> 创建的）。</p>
|
||
<h3><a class="anchor" name="react.cloneelement"></a>React.cloneElement <a class="hash-link" href="#react.cloneelement">#</a></h3><div class="highlight"><pre><code class="language-text" data-lang="text">ReactElement cloneElement(
|
||
ReactElement element,
|
||
[object props],
|
||
[children ...]
|
||
)
|
||
</code></pre></div>
|
||
<p>使用 <code>element</code> 作为起点，克隆并返回一个新的 <code>ReactElement</code> 。生成的 element 将会拥有原始 element 的 props 与新的 props 的浅合并。新的子级将会替换现存的子级。 不同于 <code>React.addons.cloneWithProps</code>，来自原始 element 的 <code>key</code> 和 <code>ref</code> 将会保留。对于合并任何 props 没有特别的行为（不同于 <code>cloneWithProps</code>）。更多细节详见<a href="/react/blog/2015/03/03/react-v0.13-rc2.html">v0.13 RC2 blog post</a> 。</p>
|
||
<h3><a class="anchor" name="react.createfactory"></a>React.createFactory <a class="hash-link" href="#react.createfactory">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">factoryFunction</span> <span class="nx">createFactory</span><span class="p">(</span>
|
||
<span class="nx">string</span><span class="o">/</span><span class="nx">ReactClass</span> <span class="nx">type</span>
|
||
<span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>返回一个生成给定类型的 ReactElements 的函数。如同 <code>React.createElement</code>，type 参数既可以是一个 html 标签名字符串（例如. “div”，“span”，等等），也可以是一个 <code>ReactClass</code> 。</p>
|
||
<h3><a class="anchor" name="react.isvalidelement"></a>React.isValidElement <a class="hash-link" href="#react.isvalidelement">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isValidElement</span><span class="p">(</span><span class="o">*</span> <span class="nx">object</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>验证对象是否是一个 ReactElement。</p>
|
||
<h3><a class="anchor" name="react.dom"></a>React.DOM <a class="hash-link" href="#react.dom">#</a></h3>
|
||
<p><code>React.DOM</code> 用 <code>React.createElement</code> 为 DOM 组件提供了便利的包装器。该方式应该只在不使用 JSX 的时使用。例如，<code>React.DOM.div(null, 'Hello World!')</code>。</p>
|
||
<h3><a class="anchor" name="react.proptypes"></a>React.PropTypes <a class="hash-link" href="#react.proptypes">#</a></h3>
|
||
<p><code>React.PropTypes</code> 包含了能与 组件的<code>propTypes</code> 对象一起使用的类型，用以验证传入你的组件的 props。更多有关 <code>propTypes</code> 的信息，请见 <a href="/react/docs/reusable-components-zh-CN.html">可重用组件</a>。</p>
|
||
<h3><a class="anchor" name="react.children"></a>React.Children <a class="hash-link" href="#react.children">#</a></h3>
|
||
<p><code>React.Children</code> 为处理 <code>this.props.children</code> 这个不透明的数据结构提供了工具。</p>
|
||
<h4><a class="anchor" name="react.children.map"></a>React.Children.map <a class="hash-link" href="#react.children.map">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">thisArg</span><span class="p">])</span>
|
||
</code></pre></div>
|
||
<p>在每一个包含在 <code>children</code> 中的直接子级上调用 <code>fn</code> ，<code>fn</code>中的 <code>this</code> 设置为 <code>thisArg</code>。如果 <code>children</code> 是一个嵌套的对象或者数组，它将被遍历：不会传入容器对象到 <code>fn</code> 中。如果 children 是 <code>null</code> 或者 <code>undefined</code>，则返回 <code>null</code> 或者 <code>undefined</code> 而不是一个空数组。</p>
|
||
<h4><a class="anchor" name="react.children.foreach"></a>React.Children.forEach <a class="hash-link" href="#react.children.foreach">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">thisArg</span><span class="p">])</span>
|
||
</code></pre></div>
|
||
<p>类似 <code>React.Children.map()</code>，但是不返回数组。</p>
|
||
<h4><a class="anchor" name="react.children.count"></a>React.Children.count <a class="hash-link" href="#react.children.count">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">number</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">count</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>返回 <code>children</code> 中的组件总数，相等于传递给 <code>map</code> 或者 <code>forEach</code> 的回调函数应被调用次数。</p>
|
||
<h4><a class="anchor" name="react.children.only"></a>React.Children.only <a class="hash-link" href="#react.children.only">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">only</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>返回 <code>children</code> 中仅有的子级。否则抛出异常。</p>
|
||
<h4><a class="anchor" name="react.children.toarray"></a>React.Children.toArray <a class="hash-link" href="#react.children.toarray">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">toArray</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>以赋key给每个child的平坦的数组形式,返回不透明的 <code>children</code> 数据结构.如果你想操纵你的渲染方法的子级的合集这很有用,尤其如果你想在 <code>this.props.children</code> 传下之前渲染或者切割.</p>
|
||
<h2><a class="anchor" name="reactdom"></a>ReactDOM <a class="hash-link" href="#reactdom">#</a></h2>
|
||
<p><code>react-dom</code> 包提供了 具体的DOM方法,这些方法可以在你的app的顶层作为一个你需要时脱离React模式的安全舱口 被使用.你的大多数组件不需要使用这个模块.</p>
|
||
<h3><a class="anchor" name="reactdom.render"></a>ReactDOM.render <a class="hash-link" href="#reactdom.render">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">render</span><span class="p">(</span>
|
||
<span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">,</span>
|
||
<span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">,</span>
|
||
<span class="p">[</span><span class="kd">function</span> <span class="nx">callback</span><span class="p">]</span>
|
||
<span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>渲染一个 ReactElement 到 DOM 里提供的 <code>容器（container）</code>中，并返回一个对 组件(或者返回 <code>null</code> 对于 <a href="/react/docs/reusable-components.html#stateless-functions">无状态组件</a>) 的<a href="/react/docs/more-about-refs.html">引用</a> </p>
|
||
|
||
<p>如果 ReactElement 之前被渲染到了 <code>container</code> 中，这将对它执行一次更新，并仅变动需要变动的 DOM 来反映最新的 React 组件。</p>
|
||
|
||
<p>如果提供了可选的回调函数，则该函数将会在组件渲染或者更新之后被执行。</p>
|
||
|
||
<blockquote>
|
||
<p>注意:</p>
|
||
|
||
<p><code>ReactDOM.render()</code> 控制你传入的 container 节点的内容。
|
||
当初次调用时，任何现存于内的 DOM 元素将被替换。
|
||
其后的调用使用 React的 diffing 算法来有效率的更新。</p>
|
||
|
||
<p><code>ReactDOM.render()</code> 不会修改 container 节点（只修改 container 的子级）。
|
||
将来，也许能够直接插入一个组件到已经存在的 DOM 节点而不覆盖
|
||
现有的子级。</p>
|
||
</blockquote>
|
||
<h3><a class="anchor" name="reactdom.unmountcomponentatnode"></a>ReactDOM.unmountComponentAtNode <a class="hash-link" href="#reactdom.unmountcomponentatnode">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">unmountComponentAtNode</span><span class="p">(</span><span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>从 DOM 中移除已经挂载的 React 组件，并清除它的事件处理器和 state。如果在 container 中没有组件被挂载，调用此函数将什么都不做。如果组件被卸载返回 <code>true</code>，如果没有组件被卸载返回 <code>false</code>。</p>
|
||
<h3><a class="anchor" name="reactdom.finddomnode"></a>ReactDOM.findDOMNode <a class="hash-link" href="#reactdom.finddomnode">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">DOMElement</span> <span class="nx">findDOMNode</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">component</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>如果这个组件已经被挂载到了 DOM，它返回相应的浏览器原生的 DOM 元素。这个方法对于读取 DOM 的值很有用，比如表单域的值和执行 DOM 的测量。<strong>在大多数情况下,你可以连接一个ref到DOM节点上,并避免使用 <code>findDOMNode</code></strong> 如果 <code>render</code> 返回 <code>null</code> 或者 <code>false</code>， <code>findDOMNode</code> 返回 <code>null</code>.</p>
|
||
|
||
<blockquote>
|
||
<p>注意:</p>
|
||
|
||
<p><code>findDOMNode()</code> 是一个用来访问底层DOM节点的安全舱口.大多数情况下,使用这个安全舱口是不被鼓励的,因为它穿破了组件的抽象.</p>
|
||
|
||
<p><code>findDOMNode()</code> 只在已挂载的组件上工作(即是,已经被放置到DOM里的组件).如果你尝试在没有被挂载的组件上调用这个方法(比如在 一个没有被创建的组件的<code>render()</code>里 调用 <code>findDOMNode()</code> )会抛出一个异常. </p>
|
||
|
||
<p><code>findDOMNode()</code> 不能用在无状态组件.</p>
|
||
</blockquote>
|
||
<h2><a class="anchor" name="reactdomserver"></a>ReactDOMServer <a class="hash-link" href="#reactdomserver">#</a></h2>
|
||
<p><code>react-dom/server</code> 允许你在服务器上渲染你的组件.</p>
|
||
<h3><a class="anchor" name="reactdomserver.rendertostring"></a>ReactDOMServer.renderToString <a class="hash-link" href="#reactdomserver.rendertostring">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderToString</span><span class="p">(</span><span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>把 ReactElement 渲染为它原始的 HTML 。这应该仅在服务器端使用。React 将会返回一个 HTML 字符串。你可以用这种方法在服务器端生成 HTML，然后在初始请求下传这些标记，以获得更快的页面加载速度及允许搜索引擎抓取页面（便于 SEO）。</p>
|
||
|
||
<p>如果在一个在已经有了这种服务器预渲染标记的节点上面调用 <code>ReactDOM.render()</code>，React 将会维护该节点，仅绑定事件处理器，让你有一个非常高效的初次加载体验。</p>
|
||
<h3><a class="anchor" name="reactdomserver.rendertostaticmarkup"></a>ReactDOMServer.renderToStaticMarkup <a class="hash-link" href="#reactdomserver.rendertostaticmarkup">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderToStaticMarkup</span><span class="p">(</span><span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
<p>类似于 <code>renderToString</code> ，除了不创建额外的 DOM 属性，比如 <code>data-react-id</code>，这仅在 React 内部使用的属性。如果你想用 React 做一个简单的静态页面生成器，这是很有用的，因为去除额外的属性能够节省很多字节。</p>
|
||
|
||
|
||
<div class="docs-prevnext">
|
||
|
||
|
||
<a class="docs-next" href="/react/docs/component-api-zh-CN.html">Next →</a>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<footer class="wrap">
|
||
<div class="left">
|
||
A Facebook & Instagram collaboration.<br>
|
||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||
</div>
|
||
<div class="right">
|
||
© 2013–2016 Facebook Inc.<br>
|
||
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<div id="fb-root"></div>
|
||
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||
ga('send', 'pageview');
|
||
|
||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||
|
||
(function(d, s, id) {
|
||
var js, fjs = d.getElementsByTagName(s)[0];
|
||
if (d.getElementById(id)) return;
|
||
js = d.createElement(s); js.id = id;
|
||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||
fjs.parentNode.insertBefore(js, fjs);
|
||
}(document, 'script', 'facebook-jssdk'));
|
||
|
||
docsearch({
|
||
apiKey: '36221914cce388c46d0420343e0bb32e',
|
||
indexName: 'react',
|
||
inputSelector: '#algolia-doc-search'
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|