javascript reactjs中的render和return有什么区别？

What is the difference between render and return in reactjs?

提问by vinod kumar

I am new to Java script. I see lot of places return and render being used just want to know whats the difference between them.

我是 Java 脚本的新手。我看到很多地方返回并使用渲染只是想知道它们之间有什么区别。

回答by Shubham Khatri

rendermethod is required when you are writing a React component using as a class method

render使用类方法编写 React 组件时需要方法

According to the docs:

根据文档：

The render()method is required.

When called, it should examine this.propsand this.stateand return one of the following types:

React elements.Typically created via JSX. An element can either be a representation of a native DOM component (<div />), or a user-defined composite component (<MyComponent />).

String and numbers.These are rendered as text nodes in the DOM.

Portals.Created with ReactDOM.createPortal. null. Renders nothing.

Booleans.Render nothing. (Mostly exists to support return test && pattern, where test is boolean.)

该render()方法是必需的。

调用时，它应该检查this.props并this.state返回以下类型之一：

反应元素。通常通过 JSX 创建。元素可以是原生 DOM 组件的表示，也可以是(<div />)用户定义的复合组件(<MyComponent />)。

字符串和数字。这些在 DOM 中呈现为文本节点。

门户。用ReactDOM.createPortal. 空值。什么都不渲染。

布尔值。什么都不渲染。（主要存在以支持返回测试 && 模式，其中 test 是布尔值。）

Essentially render is kind of a lifecycle method which is invoked whenever the component needs to update.

本质上，render 是一种生命周期方法，每当组件需要更新时都会调用它。

As for the returnstatement, its used to return the data/response/JSX elementsdepending on where it is used. If used in render method you need to return one of the above specified types(React elements, Strings and numbers, Portals or Booleans).

至于return语句，它用于返回data/response/JSX elements取决于它的使用位置。如果在渲染方法中使用，您需要返回上述指定类型之一（反应元素、字符串和数字、门户或布尔值）。

returnfrom other function can either return the value evaluated from the function or returnthe React elements to be rendered in the rendermethod

returnfrom other function 可以返回从函数计算的值或return要在render方法中呈现的 React 元素

Functional componentsdon't define a rendermethod, instead they return the React elements using an explicit return statementor an implicit return

Functional components不要定义render方法，而是使用 anexplicit return statement或 an返回 React 元素implicit return

Eg: explicit return

例如：显式返回

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

Eg: Implicit return

例如：隐式返回

const Welcome = (props) => (
     <h1>Hello, {props.name}</h1>;
)

回答by Croc

In React prior to the newest version (v16), most React Components were class based. In a class based component, you call the render()method and then returnthe required JSX (html like javascript mix). With the update of React 16+, there is an increased use of functional components which do not have a render()method, instead returning the JSX directly. For example the syntax of a functional component may be like this:

在最新版本 (v16) 之前的 React 中，大多数 React 组件都是基于类的。在基于类的组件中，您调用该render()方法，然后调用return所需的 JSX（类似于 javascript 混合的 html）。随着 React 16+ 的更新，越来越多的函数式组件没有render()方法，而是直接返回 JSX。例如，功能组件的语法可能是这样的：

const NewComponent = (props) => {
   return (
           <div>
               <h1>Title</h1>
           </div>
    )
}

alternatively, you can implicitly return JSX in a functional component without the return statement like this:

或者，您可以在没有 return 语句的功能组件中隐式返回 JSX，如下所示：

const NewComponent = (props) => (
   <div>
       <h1>Title</h1>
   </div>
)

Both of these will show the same as a class based component like this:

这两个将显示与基于类的组件相同，如下所示：

class NewComponent extends React.Component {
    render() {
        return (
            <div>
               <h1>Title</h1>
            </div>
        )
    }
}

You can read more at https://reactjs.org/docs/components-and-props.html

您可以在https://reactjs.org/docs/components-and-props.html阅读更多信息

回答by Tyler Daniel

Render is what is actually being called in the component, return is what is "rendered". You can log, set variables, conditional rendering etc in the render, but return is what is actually output

Render 是组件中实际调用的内容，return 是“渲染”的内容。您可以在渲染中记录、设置变量、条件渲染等，但返回的是实际输出的内容

render() {
console.log("Test")
const test = "test"
  return(
    <h1>Hi</h1>
  )
}

回答by Rajilesh Panoli

return and render are different. render is a method of react. return is just pure javascript for returning output. nothing complicated.

返回和渲染是不同的。render 是一种反应方法。return 只是用于返回输出的纯 javascript。没什么复杂的。

回答by Marvin

In react, render is a method that tell react what to display. return in a method or function is the output of the method or function.

在 react 中，render 是一种告诉 react 显示什么的方法。方法或函数中的 return 是方法或函数的输出。

回答by Dev.R

"The rendermethod returnsa description of what the DOM should look like, and then React efficiently updates the real DOM to match."

“ render方法返回DOM 应该是什么样子的描述，然后 React 有效地更新真实的 DOM 以匹配。”

For the best example to know the difference, do check out this link: https://quickleft.com/blog/understanding-the-difference-between-react-elements-and-components/

有关了解差异的最佳示例，请查看此链接：https: //quickleft.com/blog/understanding-the-difference-between-react-elements-and-components/

回答by moody_drew

render() is like the warm-up and planning phrase before the ball game starts. Everyone knows what's gonna happen and then return is the player on the field that actually does what the render () says should happen.

render() 就像球赛开始前的热身和计划短语。每个人都知道会发生什么，然后返回的是场上实际执行渲染（）所说应该发生的事情的球员。

回答by RebelCoder

Render is a method that tell react what to display.

Render 是一种告诉 react 显示什么的方法。

Return is a method / give output of function

返回是一种方法/给出函数的输出

回答by Naga Sai

Renderis that what exactly you want to trigger multiple times.

渲染正是您想要多次触发的内容。

Returnis that which u want to Display.

Return是您想要显示的内容。

For example.

例如。

render(){

渲染（）{

let cardDisplay=some random text which u want to trigger multiple times. (Example, Displaying the names of employees in a company)}

让 cardDisplay=一些你想多次触发的随机文本。（例如，显示公司员工的姓名）}

return

返回

( {cardDisplay} )

( {cardDisplay} )

Explanation: You want to Display the list of employees in a company.so return the variable which you want to trigger(repeat)multiple times. Inside Render write what your logic for what to repeat.

说明：您要显示公司中的员工列表。因此返回要多次触发（重复）的变量。在 Render 里面写下你要重复什么的逻辑。