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

根据文档：

该render()方法是必需的。

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

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

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

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

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

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

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

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

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

例如：显式返回

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

例如：隐式返回

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

在最新版本 (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阅读更多信息

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

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

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