宁夏政务网站建设标准,wordpress 随机标签云,mip改造wordpress,创新的企业网站开发React 组件化 一、什么是组件化二、基础组件使用2.1、函数2.2、类2.3、渲染2.4、流程分析2.5、注意 三、参考地址 一、什么是组件化
React 是一个用于构建用户界面的JavaScript库#xff0c;它采用了组件化的开发模式#xff0c;使得开发者可以将界面划分为独立的、可重用的… React 组件化 一、什么是组件化二、基础组件使用2.1、函数2.2、类2.3、渲染2.4、流程分析2.5、注意 三、参考地址 一、什么是组件化
React 是一个用于构建用户界面的JavaScript库它采用了组件化的开发模式使得开发者可以将界面划分为独立的、可重用的组件以便更轻松地管理和维护复杂的应用程序。
组件化开发是一种将应用程序拆分为小块、可重用的部分的方法。
在React中每个组件都有自己的状态state和属性props它们用于描述组件的行为和外观。以下是一些关键概念来理解React的组件化 组件 在React中组件是构建用户界面的基本单元。组件可以是功能性的也可以是有状态的。每个组件都可以包含自己的逻辑、渲染方法和样式。 功能性组件 也称为无状态组件是一种仅通过输入属性props来渲染UI的组件。它们通常用于显示静态内容。 类组件 也称为有状态组件是用JavaScript类来定义的组件。它们可以维护自己的状态以及生命周期方法来处理组件的不同生命周期阶段。 属性props 属性是传递给组件的数据它们类似于函数的参数。属性可以在组件内部使用帮助决定组件的外观和行为。 状态state 状态是组件内部管理的数据。只有类组件才能拥有状态状态的改变会触发组件的重新渲染。 渲染rendering 组件的渲染是指将组件的输出通常是UI元素的描述转换为实际的DOM元素以便在浏览器中显示。 生命周期方法Lifecycle Methods 对于类组件React 提供了一组生命周期方法它们允许开发者在组件不同的生命周期阶段执行代码比如组件挂载、更新和卸载等。 组件通信 在React中组件之间可以通过属性props和事件来进行通信。一个组件可以将数据通过属性传递给子组件同时子组件可以通过回调函数向父组件发送事件。 复合Composition 组件可以嵌套在其他组件内部从而构建出更复杂的界面。这种嵌套和组合的方式使得代码更具有可维护性和可扩展性。
二、基础组件使用
2.1、函数 //方式1: 无状态函数(简单组件, 推荐使用)function MyComponent1(props) {returnh1自定义组件标题11111/h1}函数名首字符大写 组件名称须以大写字母开头React 据此区分组件和普通的 HTML 必须有返回值 表示该组件的 UI 结构如果不需要渲染任何内容则返回 null
2.2、类 //方式2: ES6类语法(复杂组件, 推荐使用)class MyComponent3 extends React.Component {render () {return h1自定义组件标题33333/h1}}类名必须以大写字母开头extends是一个关键字用来实现类之间的继承。类组件应该继承 React.Component 父类从而使用父类中提供的方法或属性。类组件必须提供 render 方法render 方法必须有返回值表示该组件的 UI 结构。render会在组件创建时执行一次
2.3、渲染 ReactDOM.render(MyComp /, cotainerEle)2.4、流程分析
ReactDOM.render()渲染组件标签的基本流程
React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象将虚拟DOM并解析为真实DOM插入到指定的页面元素内部
2.5、注意
组件名必须首字母大写虚拟DOM元素只能有一个根元素虚拟DOM元素必须有结束标签
三、参考地址
chatgpt
转https://juejin.cn/post/7015402441298411533
https://www.bilibili.com/video/BV1wy4y1D7JT/?spm_id_from333.337.search-card.all.clickvd_source8ac97496e3a9e47d15f8bdfb630e596a
