txt怎么做网站搜狐酒业峰会

txt怎么做网站,搜狐酒业峰会,织梦程序来搭建网站,室内设计联盟网组件是 React 的核心基石#xff0c;也是 React 生态中最具代表性的设计思想。它将 UI 拆分为独立、可复用的单元#xff0c;就像乐高积木一样#xff0c;通过组合不同的组件可以构建出复杂的页面。从早期的类组件到如今的函数组件 Hooks#xff0c;React 组件的开发模式不…组件是 React 的核心基石也是 React 生态中最具代表性的设计思想。它将 UI 拆分为独立、可复用的单元就像乐高积木一样通过组合不同的组件可以构建出复杂的页面。从早期的类组件到如今的函数组件 HooksReact 组件的开发模式不断进化变得更加简洁、灵活。本文将从组件本质、分类、创建、核心特性、通信、复用、性能优化等维度全面解析 React 组件的使用方法与最佳实践帮助你彻底掌握这一核心技能。一、React 组件的本质什么是组件1. 组件的定义React 组件是独立的、可复用的 UI 单元它接收输入Props处理内部逻辑State/Hooks最终返回用于描述 UI 的 JSX或 React 元素。简单来说组件就是一个 “函数”输入数据输出 UI。2. 组件的核心思想模块化与复用在传统的前端开发中我们通常按页面划分代码代码耦合度高复用性差。而 React 的组件化思想解决了这一问题单一职责一个组件只负责完成一个特定的功能比如一个按钮、一个列表、一个弹窗可复用组件可以在不同页面、不同项目中重复使用可组合组件可以嵌套、组合形成更复杂的组件或页面可维护组件独立存在修改一个组件不会影响其他组件便于后期维护。3. 组件的本质函数或类无论哪种类型的 React 组件其本质都是JavaScript 函数或类函数组件本质是一个普通的 JavaScript 函数接收 props 参数返回 JSX类组件本质是继承自React.Component的类通过render方法返回 JSX。举个最简单的例子一个显示 “Hello React” 的组件// 函数组件主流 const Hello () { return h1Hello React/h1; }; // 类组件旧版写法现在极少使用 import React from react; class HelloClass extends React.Component { render() { return h1Hello React/h1; } }二、React 组件的分类不同类型的组件及适用场景React 组件可以根据实现方式、职责、特性分为不同类型了解这些分类有助于我们在开发中选择合适的组件类型。1. 按实现方式划分函数组件 vs 类组件这是最核心的分类方式也是 React 发展的重要分水岭。特性函数组件Function Component类组件Class Component语法复杂度简洁普通 JS 函数繁琐需要继承 React.Component写 render 方法状态管理依赖 HooksuseState、useReducer依赖 this.state 和 this.setState生命周期依赖 HooksuseEffect有固定的生命周期方法componentDidMount 等性能略优无类实例化开销略差需要实例化类适用场景所有场景React 16.8 推荐老项目维护、特殊场景如需要继承的组件注意React 16.8 版本引入 Hooks 后函数组件已经能够实现类组件的所有功能目前函数组件 Hooks是 React 开发的主流方式类组件仅在老项目中存在。2. 按职责划分展示组件 vs 容器组件这是一种基于 “关注点分离” 的分类方式用于区分组件的功能职责。展示组件Presentational Component职责只负责 UI 的展示不处理业务逻辑也不管理状态数据来源通过 Props 接收外部传入的数据和回调函数特点纯函数式、可复用性高、无副作用。// 展示组件只渲染列表项不处理数据逻辑 const TodoItem ({ text, onDelete }) { return ( li {text} button onClick{onDelete}删除/button /li ); };容器组件Container Component职责负责处理业务逻辑、管理状态、请求数据不关心 UI 展示数据来源自身的 State 或外部状态管理库Redux、Mobx特点通常不直接渲染 JSX而是将数据和方法通过 Props 传递给展示组件。// 容器组件处理待办事项的逻辑管理状态 import { useState } from react; const TodoListContainer () { const [todos, setTodos] useState([学习React组件, 写博客]); const handleDelete (index) { setTodos(todos.filter((_, i) i ! index)); }; return ( ul {todos.map((todo, index) ( TodoItem key{index} text{todo} onDelete{() handleDelete(index)} / ))} /ul ); };补充随着 Hooks 的普及这种分类方式逐渐淡化因为我们可以通过自定义 Hooks 将业务逻辑抽离让组件同时兼具展示和逻辑功能。3. 其他常见分类纯组件Pure Component类组件中的React.PureComponent或函数组件中的React.memo用于优化性能避免不必要的重渲染高阶组件Higher-Order ComponentHOC一个接收组件并返回新组件的函数用于复用组件逻辑门户组件Portal用于将组件渲染到 DOM 树的其他位置如弹窗、提示框懒加载组件通过React.lazy和Suspense实现的按需加载组件。三、组件的创建与基础使用本节将重点讲解函数组件的创建与使用类组件仅作简单介绍包括 Props 接收、默认值、类型校验等核心知识点。1. 基础函数组件的创建与渲染1创建函数组件函数组件是一个普通的 JavaScript 函数返回值为 JSX或 null、false表示不渲染任何内容。// 无参数的基础组件 const Button () { return button点击我/button; }; // 箭头函数简写无大括号时return可省略 const Text () p这是一段文本/p; // 普通函数写法兼容旧版JS function Title() { return h1这是标题/h1; }2渲染组件组件创建完成后可以像使用 HTML 标签一样在其他组件中渲染注意组件名必须以大写字母开头React 的约定用于区分原生 HTML 标签。// 根组件 const App () { return ( div classNameapp Title / Text / Button / /div ); }; // 渲染到DOM import { createRoot } from react-dom/client; const root createRoot(document.getElementById(root)); root.render(App /);2. Props组件的输入参数PropsProperties 的缩写是组件的输入参数用于从父组件向子组件传递数据。Props 是只读的子组件不能修改 Props这是 React 的单向数据流原则。1接收与使用 Props// 子组件接收props const Greeting (props) { // props是一个对象包含父组件传递的所有属性 return h1Hello, {props.name}!/h1; }; // 父组件传递props const App () { return ( div {/* 传递字符串属性 */} Greeting nameReact / {/* 传递非字符串属性需用{}包裹 */} Greeting age{18} / {/* 传递布尔值 */} Greeting isShow{true} / {/* 传递函数 */} Greeting onButtonClick{() alert(点击了)} / {/* 传递JSX元素对应props.children */} Greeting p这是子元素/p /Greeting /div ); };2Props 解构赋值为了简化代码通常使用解构赋值直接提取 Props 中的属性。// 基础解构 const Greeting ({ name, age }) { return ( div h1Hello, {name}!/h1 p年龄{age}/p /div ); }; // 解构默认值 const Greeting ({ name 游客, age 0 }) { return ( div h1Hello, {name}!/h1 p年龄{age}/p /div ); };3默认 Props除了使用解构赋值设置默认值还可以通过defaultProps属性设置组件的默认 Props适用于函数组件和类组件。const Greeting ({ name, age }) { return ( div h1Hello, {name}!/h1 p年龄{age}/p /div ); }; // 设置默认Props Greeting.defaultProps { name: 游客, age: 0 };4Props 类型校验为了提高代码的健壮性我们可以使用prop-types库对 Props 的类型进行校验React v15.5.0 后PropTypes 从 React 核心库中移出需单独安装。步骤 1安装 prop-typesnpm install prop-types --save # 或 yarn add prop-types步骤 2使用 PropTypes 进行类型校验import PropTypes from prop-types; const Greeting ({ name, age, isShow, onButtonClick, children }) { return ( div h1Hello, {name}!/h1 p年龄{age}/p {children} /div ); }; // 类型校验 Greeting.propTypes { // 字符串必传 name: PropTypes.string.isRequired, // 数字也可以是字符串 age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // 布尔值 isShow: PropTypes.bool, // 函数 onButtonClick: PropTypes.func, // 任意React节点 children: PropTypes.node }; // 默认Props Greeting.defaultProps { name: 游客, age: 0, isShow: false };3. 类组件的创建仅作了解类组件需要继承React.Component并实现render方法返回 JSX。import React from react; import PropTypes from prop-types; class Greeting extends React.Component { // 默认Props static defaultProps { name: 游客, age: 0 }; // 类型校验 static propTypes { name: PropTypes.string.isRequired, age: PropTypes.number }; render() { const { name, age } this.props; return ( div h1Hello, {name}!/h1 p年龄{age}/p /div ); } }