freeCodeCamp/render-react-on-the-server-with-rendertostring.md at 41d40608a1b807d2597c348914b2a03dd3acad1e

Files

Oliver Eyton-Williams 41b7a33100 fix: replace .chinese.md extension with .md

2020-09-29 22:09:05 +02:00

2.7 KiB

Raw Blame History

id, title, challengeType, forumTopicId, localeTitle

id	title	challengeType	forumTopicId	localeTitle
5a24c314108439a4d403618d	Render React on the Server with renderToString	6	301407	用 renderToString 在服务器上渲染 React

Description

到目前为止，你已经能够在客户端上渲染 React 组件，一般来说我们都是这么做的。然而，在一些用例中，在服务器上渲染一个 React 组件是有意义的。由于 React 是一个 JavaScript 视图库，所以使用 Node 让 JavaScript 运行在服务器上是可行的。事实上，React 提供了一个可用于此目的的renderToString()方法。有两个关键原因可以解释为什么服务器上的渲染可能会在真实世界的应用程序中使用。首先，如果不这样做，你的 React 应用程序将包含一个代码量很少的 HTML 文件和一大堆 JavaScript，当它最初加载到浏览器时。这对于搜索引擎来说可能不太理想，因为它们试图为你的网页内容生成索引，以便人们可以找到你。如果在服务器上渲染初始 HTML 标记并将其发送到客户端，则初始页面加载的内容包含搜索引擎可以抓取的所有页面标记。其次，这创造了更快的初始页面加载体验，因为渲染的 HTML 代码量要比整个应用程序的 JavaScript 代码小。React 仍然能够识别你的应用并在初始加载后进行管理。

Instructions

renderToString()方法由ReactDOMServer提供，在这里已为你定义成全局变量。这个方法接受一个 React 元素作为参数。用它来把App渲染成字符串。

Tests

tests:
  - text: <code>App</code>组件应该使用<code>ReactDOMServer.renderToString</code>渲染一个字符串。
    testString: getUserInput => assert(getUserInput('index').replace(/ /g,'').includes('ReactDOMServer.renderToString(<App/>)') && Enzyme.mount(React.createElement(App)).children().name() === 'div');

Challenge Seed


class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div/>
  }
};

// change code below this line

Before Test

var ReactDOMServer = { renderToString(x) { return null; } };

After Test

ReactDOM.render(<App />, document.getElementById('root'))

Solution

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div/>
  }
};

// change code below this line
ReactDOMServer.renderToString(<App/>);

2.7 KiB Raw Blame History Unescape Escape