reactjs中渲染和返回有什么区别？

Question

我是Java脚本的新手.我看到许多地方返回并渲染被使用只是想知道它们之间的区别.

Answer 1

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

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

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

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 2

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

根据文件:

该render()方法是必需的.

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

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

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

门户.创建于ReactDOM.createPortal.空值.什么都没有.

布尔.什么都没有.(主要用于支持返回测试&&模式,其中test是boolean.)

基本上渲染是一种生命周期方法,只要组件需要更新就会调用它.

至于return声明,它用于返回data/response/JSX elements取决于它的使用位置.如果在render方法中使用,则需要返回上述指定类型之一(React元素,字符串和数字,Portals或Booleans).

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

Functional components不要定义render方法,而是使用explicit return statement或者返回React元素implicit return

例如:明确的回报

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

例如:隐含的回报

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

Answer 3

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

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

Answer 4

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