7、React入门：组件、状态、样式与优势解析

最新推荐文章于 2025-10-15 04:01:29 发布

work3

最新推荐文章于 2025-10-15 04:01:29 发布

阅读量43

点赞数

CC 4.0 BY-SA版权

分类专栏：全栈开发实战：从零构建现代Web应用文章标签： React 组件状态管理

本文链接：https://blog.youkuaiyun.com/work3/article/details/150134850

全栈开发实战：从零构建现代Web应用专栏收录该内容

42 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

React入门：组件、状态、样式与优势解析

1. 组件属性与状态

在React中，组件的属性（props）和状态（state）是控制组件的重要数据类型。属性是只读的，在组件的生命周期内不会改变。如果属性需要改变，组件会被销毁并重新创建。例如，当一个书签（Bookmark）组件的描述需要改变时，实际上会创建一个新的书签组件，其描述值也会更新。

状态则提供了一种更高效的方式来处理会变化的数据。状态的改变不会直接导致React销毁并重新创建组件，而是只改变虚拟DOM树中需要改变的最小部分，进而引起最少的真实DOM变化。

以下是一个包含状态的书签组件示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Intro To React</title>
    <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      function start() {
        class Bookmark extends Rea