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

Question

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

Answer 1

render 方法在你编写一个 React 组件时需要作为类方法使用

根据文档：

render() 方法是必需的。

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

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

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

门户网站。使用 ReactDOM.createPortal 创建。无效的。什么都不渲染。

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

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

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

来自其他函数的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() {
console.log("Test")
const test = "test"
  return(
    <h1>Hi</h1>
  )
}

Answer 4

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

Answer 5

在 React 中，render 是一种告诉 React 要显示什么的方法。方法或函数中的返回是方法或函数的输出。

Answer 6

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

Answer 7

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

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

Answer 8

“这使成为方法回报对 DOM 应该是什么样子的描述，然后 React 有效地更新真实的 DOM 以匹配。”

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

Answer 9

使成为这正是您想要多次触发的。

返回是你想要显示的。

例如。

使成为(){

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

返回

( {cardDisplay} )

解释：您想显示公司中的员工列表。因此返回要多次触发（重复）的变量。在 Render 内部写下您要重复的逻辑。