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

Question

我是 JavaScript 新手。我看到很多地方 return 和 render 被使用只是想知道它们之间有什么区别。

Answer 1

render 方法是在您使用作为类方法编写 React 组件时需要的

根据文档：

render() 方法是必需的。

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

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

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

门户网站。 使用 ReactDOM.createPortal 创建。空值。什么都不渲染。

布尔值。 不渲染。 （大部分存在是为了支持返回测试 && 模式，其中 test 是布尔值。）

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

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

来自其他函数的return 可以返回从函数评估的值或return 要在render 方法中呈现的React 元素

Functional components 没有定义 render 方法，而是使用 explicit return statement 或 implicit return 返回 React 元素

例如：显式返回

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

例如：隐式返回

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

Answer 2

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

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

或者，您可以在函数组件中隐式返回 JSX，而无需像这样的 return 语句：

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

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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

return 是一个方法/给出函数的输出

Answer 7

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

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

Answer 8

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

Answer 9

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

返回是你要显示的。

例如。

渲染(){

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

返回

( {cardDisplay} )

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