react 组件是任何 react 应用程序的构建块。它们允许您将 ui 分成独立的、可重用的部分，可以单独管理和渲染。 react 组件有两种主要类型：功能组件和类组件。
功能组件
函数式组件更简单，并且被编写为 javascript 函数。它们将 props（输入数据）作为参数并返回 jsx，它描述了 ui 的外观。从 react 16.8 开始，函数式组件还可以使用 usestate 和 useeffect 等钩子来处理状态和副作用。
import react, { usestate } from 'react';const welcome = (props) => { const [count, setcount] = usestate(0); return ( hello, {props.name}!
you've clicked {count} times
);};export default welcome;
登录后复制
类组件
类组件是在 react 中编写组件的原始方式。它们扩展了 react.component 类，并且必须包含返回 jsx 的 render() 方法。类组件可以有自己的状态和生命周期方法，例如 componentdidmount、componentdidupdate 和 componentwillunmount。
import React, { Component } from 'react';class Welcome extends Component { constructor(props) { super(props); this.state = { count: 0 }; } handleClick = () => { this.setState({ count: this.state.count + 1 }); } render() { return ( Hello, {this.props.name}!
You've clicked {this.state.count} times
); }}export default Welcome;
登录后复制
关键概念：
jsx： javascript 的语法扩展，看起来像 html。 react 组件返回 jsx 来描述 ui。props：“properties”的缩写，props 允许您将数据从父组件传递到子组件。state： 用于存储影响组件中渲染内容的动态数据的内置对象。只有使用状态的组件（函数组件或类组件）才能根据此数据的更改重新渲染。
钩子（用于功能组件）：
usestate：允许您管理功能组件中的状态。useeffect： 允许您在功能组件中执行副作用（例如，获取数据、更新 dom）。
react 鼓励创建小型、可重用的组件，这些组件可以组合起来形成更大的应用程序，保持代码库模块化且更易于维护。
以上就是React 组件（基于类与函数式）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2667935.html
