React 是一个用于构建用户界面的JavaScript库,它采用了组件化的开发模式,使得开发者可以将界面划分为独立的、可重用的组件,以便更轻松地管理和维护复杂的应用程序。
组件化开发是一种将应用程序拆分为小块、可重用的部分的方法。
在React中,每个组件都有自己的状态(state)和属性(props),它们用于描述组件的行为和外观。以下是一些关键概念来理解React的组件化:
组件: 在React中,组件是构建用户界面的基本单元。组件可以是功能性的,也可以是有状态的。每个组件都可以包含自己的逻辑、渲染方法和样式。
功能性组件: 也称为无状态组件,是一种仅通过输入属性(props)来渲染UI的组件。它们通常用于显示静态内容。
类组件: 也称为有状态组件,是用JavaScript类来定义的组件。它们可以维护自己的状态,以及生命周期方法来处理组件的不同生命周期阶段。
属性(props): 属性是传递给组件的数据,它们类似于函数的参数。属性可以在组件内部使用,帮助决定组件的外观和行为。
状态(state): 状态是组件内部管理的数据。只有类组件才能拥有状态,状态的改变会触发组件的重新渲染。
渲染(rendering): 组件的渲染是指将组件的输出(通常是UI元素的描述)转换为实际的DOM元素,以便在浏览器中显示。
生命周期方法(Lifecycle Methods): 对于类组件,React 提供了一组生命周期方法,它们允许开发者在组件不同的生命周期阶段执行代码,比如组件挂载、更新和卸载等。
组件通信: 在React中,组件之间可以通过属性(props)和事件来进行通信。一个组件可以将数据通过属性传递给子组件,同时子组件可以通过回调函数向父组件发送事件。
复合(Composition): 组件可以嵌套在其他组件内部,从而构建出更复杂的界面。这种嵌套和组合的方式使得代码更具有可维护性和可扩展性。
//方式1: 无状态函数(简单组件, 推荐使用)
function MyComponent1(props) {
return``自定义组件标题11111``
}
函数名首字符大写
组件名称须以大写字母开头,React 据此区分组件和普通的 HTML
必须有返回值
表示该组件的 UI 结构;如果不需要渲染任何内容,则返回 null
//方式2: ES6类语法(复杂组件, 推荐使用)
class MyComponent3 extends React.Component {
render () {
return ``自定义组件标题33333``
}
}
ReactDOM.render(` `, cotainerEle)
ReactDOM.render()渲染组件标签的基本流程
chatgpt