渲染() 方法以JSX格式返回组件的布局。它定义了组件需要看起来像什么。该方法还负责在内部组件数据发生变化时更新DOM。

React Js中的虚拟DOM、渲染和再渲染

React维护自己的DOM形象，称为虚拟DOM。调用 渲染() 方法更新该图像。

渲染() 每当React注意到组件（或其父级）的状态或道具发生变化时，都会调用该方法。它给React提供最新的信息来更新虚拟DOM。换句话说，更新它对组件需要的形象。

有时，一个组件的状态的微小变化会触发它在组件树中的所有子组件的重新渲染。这可能看起来效率不高，但React元素由 渲染() 函数返回的只是普通的JavaScript对象。创建和更新它们只需要很少的资源。

React重新渲染整个组件树，以确保虚拟DOM与应用程序的最新变化保持同步。

重申一下。 渲染() 更新虚拟DOM，它并不直接更新HTML。React将虚拟DOM与实际HTML进行比较，并更新实际DOM。

什么是React js中的render

在React中，rendering是更新虚拟DOM的另一个词。当用户第一次看到一个应用程序时，以及每次状态和道具发生变化时，都会调用该函数。

由于反应性是React的主要特征之一。 渲染() 是该库的主要功能之一。

渲染在类组件中

每个React类组件都必须有一个 ***渲染()***方法来返回JSX代码。

函数主体必须包含一个返回语句和一个JsX模板。

当涉及到返回语句时，React有一个规则：每个组件必须返回一个元素，或者一个包裹着一组元素的容器。

让我们来看看React中类组件的一个基本例子：

class HelloWorld extends Component {
  render() {
    return (
      <div>
       <p>Hello, World</p>
       <p>Lorem ipsum</p>
      </div>
    )
  }
}

功能组件中的渲染

功能性组件没有一个明确的 render() 方法。

它们的结构非常类似于 render() 方法本身。例如，它们必须有一个返回语句：

function HelloWorld() {
  return (
    <div>Hello, World!</div>
  )
}

功能组件返回JSX，就像 render() 类组件中的方法。其他规则也是如此。例如，一组元素必须用一个容器元素来包装。

React js中render方法的目的

React库使用render方法来使应用程序具有反应性。它定义了组件应该是什么样子，它将如何运作，以及它的动态特性。

这是一个常见的误解，认为 render() 函数直接更新DOM。事实并非如此。它的目的是以JSX格式返回组件布局，并更新虚拟DOM。然后React将JsX转译为实际的HTML，并解决虚拟和实际DOM之间的差异。

类组件结构中的render()方法

类组件被要求有一个 ***render()***方法。它的语法比前面的例子要简单一些。

在类组件中。 ***render()***并不接受任何参数。它只是返回JSX代码，以指定渲染哪些React元素：

class HelloWorld extends Component {
  render() {
    return (
      <div><p>Hello, World</p></div>
    )
  }
}

至于应该在哪里渲染，这取决于该组件在其父组件中被调用的位置：

export default class App extends Component {
  render() {
    return (
      <div>
        <Header></Header>
        {/*  Component will come after Header and before Footer */}

        <Footer></Footer>
      </div>
    )
  }
}

条件性渲染

JSX也支持条件性渲染。你所要做的就是使用大括号语法来评估一个JavaScript表达式，并根据其结果渲染一个组件。让我们看一个例子：

export default class App extends Component {
  render() {
    return (
      <div>
        <Header></Header>
        { 5 < 10 ? <HelloWorld></HelloWorld> : null}
        <Footer></Footer>
      </div>
    )
  }
}

在这个例子中，我们有一个简单的三元运算符，检查JavaScript表达式'5 < 10'是否为'真'。如果是，JSX将渲染''组件。如果不是，它将返回'null'。
由于它是React中最重要的功能之一，条件渲染将在一个单独的教程中深入介绍。

了解render()方法和React中的渲染功能（附代码示例）