react 组件中的 render() 函数的作用是什么?

IT技术 javascript reactjs
2021-05-07 10:33:39

我是 reactjs 的新手,对在组件类中使用渲染函数和与 ReactDOM 全局对象一起使用感到困惑。

这个问题的答案并没有完全解决render()类组件内部函数的使用在 reactjs 官方网站上,我发现了不使用 render 方法的功能组件。所以我的观点是render()在创建组件时扮演的角色函数 [如下例所示]。

我正在关注 教程。我认为在 ReactDOM 中使用 render 会创建虚拟 Dom,但是在所有组件类中使用它是什么。在 react 的官方教程中,render()所有组件类都使用了它。

class Square extends React.Component  {
    render() {
        return(
            <button className="Square">
                {this.props.value}
            </button>
        );
    }
}

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);
1个回答

renderfunction 是 react 组件的一部分,lifecyle其中 ReactDOM 是类对象,它公开了一个称为 render 的方法,该方法用于将 React JSX 内容渲染到您的 DOM 中。

通常你会ReactDOM.render在你的应用程序中使用一次来渲染顶级组件,所有其他组件都将是顶级组件的子级

ReactDOMinstance 是您从中导入的内容'react-dom',它不是全局对象。

react组件通过许多安装和更新生命周期方法,并决定在渲染函数中渲染数据。在渲染React.createElement(tag, props, children)到 DOM 之前,您在 render 方法中编写的任何 JSX 代码都会被转换为