【React学习】—类式组件(六)

简介: 【React学习】—类式组件(六)

<script type="text/babel">
      //创建类式组件
      class MyComponent extends React.Component{
        render() {
            // render是放在哪里的?MyComponent的原型对象上,供实例使用
            // render中的this是谁?MyComponent的实例对象=MyComponent的组件实例对象
            return <h2>我是类定义的组件(适用于复杂组件)的定义</h2>
        }
      }
      // 渲染组件到页面
      ReactDOM.render(<MyComponent/>,document.getElementById('test'))
      /*
       执行ReactDOM.render(<MyComponent/>………之后发生了什么?
       1、react解析组件标签,找到了MyComponent组件
       2、发现组件是类定义的,随后new出来该类的实例,并通过实例调用到原型上的render方法
       3、将render返回的虚拟DOM转化为真实DOM,随后呈现在页面中
       */
    </script>


相关文章
|
18天前
|
前端开发 API UED
怎么学习React 18 进行项目开发?
【4月更文挑战第18天】学习React 18涉及新特性如并发模式、Suspense API和自动批处理更新,可提升性能和用户体验。首先了解这些新特性,然后掌握React基础知识,如组件化、JSX、props和state。使用Create React App创建项目,学习如何启用并发模式和使用Suspense显示占位符。实现自定义组件,关注props传递、状态管理和事件处理。通过Profiler优化性能,利用懒加载和代码分割减少加载时间,使用Context API共享状态。不断实践和探索,参考官方文档与社区资源,以提高开发技能。
109 3
|
18天前
|
前端开发 JavaScript API
如何学习react
【4月更文挑战第9天】 学习React前,需掌握JavaScript基础,了解React的JSX、组件、props、state和生命周期等概念。安装Node.js和npm,用Create React App搭建环境。学习核心API,如React.createElement、React.render等,并阅读官方文档。实践项目,从Todo List开始,逐渐挑战复杂应用。同时,学习相关技术如Redux、React Router,并参与社区交流,持续关注React新发展。持之以恒,祝学习顺利!
29 10
|
18天前
|
前端开发 API
react怎么实现父子组件传值?
react怎么实现父子组件传值?
11 1
|
18天前
|
前端开发 JavaScript
react学习(Effect)
react学习(Effect)
25 3
|
7天前
|
JavaScript 前端开发 API
如何学习React.js?
【5月更文挑战第27天】如何学习React.js?
29 14
|
17天前
|
前端开发 JavaScript 开发者
掌握React中的useEffect:函数组件中的魔法钩子
掌握React中的useEffect:函数组件中的魔法钩子
|
17天前
|
存储 前端开发 安全
深入理解React中的useState:函数组件状态管理的利器
深入理解React中的useState:函数组件状态管理的利器
|
17天前
|
前端开发 JavaScript
React Hooks:让你轻松掌握函数组件的状态与管理
React Hooks:让你轻松掌握函数组件的状态与管理
|
17天前
|
存储 前端开发 JavaScript
探索React中的类组件和函数组件
探索React中的类组件和函数组件
|
18天前
|
缓存 前端开发 JavaScript
【亮剑】在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用
【4月更文挑战第30天】本文介绍了在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用。使用`useState`钩子和Context API可实现状态驱动的条件渲染,通过CSS类控制组件样式,或利用React Portals在DOM不同位置渲染。性能优化应注意避免不必要的渲染、合理使用Keys、优化事件处理器、使用Memoization及清理资源。测试和验证确保逻辑正确性,以构建动态用户界面并提升应用性能。