React 中定义组件的两种方式

最新推荐文章于 2025-05-16 08:59:01 发布

661lly

最新推荐文章于 2025-05-16 08:59:01 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/llykingsohyun/article/details/118337287

react 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了React中两种组件创建方式：函数式组件与类组件。详细解释了它们的定义方法及如何渲染到页面的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.函数式定义

function MyComponent(params) {
            return <div>函数式创建组件myComponent</div>
        }
        ReactDOM.render(<MyComponent/>, document.getElementById('test'))
        const TDOM = document.getElementById('test')

2.类定义

// 1.创建类式组件
        class MyComponent extends React.Component{
            // render是放在哪里的？ ---MyComponent的原型对象上，供实例使用
            // render中的this是谁？ ---MyComponent实例对象  <=> MyComponent组件实例对象 
            render(){
                console.log(this,'<===?')
                return <div>类继承式创建组件myComponent</div>
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<MyComponent/>, document.getElementById('test'))
    /*
    执行了ReactDOM.render(<MyComponent/>...)后发生了什么
          1.React解析了组件标签，找到了MyComponent组件
          2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
          3.将render返回的虚拟DOM转为真实DOM，随后渲染到页面
    */
        const TDOM = document.getElementById('test')