初识 React ：响应式数据与状态管理

在上一篇文章中，我们对 Vue 有了初步的认识，了解了 Vue 组件的基本概念以及如何使用组件来渲染静态数据。在这篇接续文章中，我们将探讨 React 中的响应式数据和状态管理，通过分析 App.jsx 文件来进一步理解 React 的强大功能。

代码分析

首先，让我们来看一下 App.jsx 文件的代码：

import './App.css'
 function App() {
   //react 比vue 更纯粹
   const todos = ['吃饭', '睡觉', '打豆豆'];
   return (
     <>
       <table>
         <thead>
           <tr>
             <th>序号</th>
             <th>任务</th>
           </tr>
         </thead>
         <tbody>
           {
             todos.map((item,index)=>(
               `
               <tr>
                 <td>${index+1}</td>
                 <td>${item}</td>
               </tr>
               `
               )
             )
           }
         </tbody>
       </table>
     </>
   )
 }

export default App

按照以前js和vue的角度，这串代码好像没什么问题，但是浏览器打开却是这样：

我们检查一下看看就破案了：

两层标签？意思是说 react 自带一层是吗？那我不是就可以直接在内部写 js 代码了？有点意思，改一下：

<tbody>
  {
    todos.map((item,index)=>(
       <tr>
         <td>{index+1}</td>
         <td>{item}</td>
       </tr>
      )
    )
  }
</tbody>

问题解决了：

代码问题

有经验的开发者肯定看出我们的代码是“死的”这个问题，没有动态交互，任务永远都是“吃饭睡觉打豆豆”。

那有问题我们就解决一下吧：

先展示完整代码和效果：

import { useState } from 'react'
import './App.css'
function App() {
  // 数据 -> 数据状态 数据业务 改变的 数据状态
  const [todos,setTodos] = useState(['吃饭', '睡觉', '打豆豆']);
  const [title,setTitle] = useState('Hello React');
  setTimeout(()=>{
    setTodos(['学习'])
    setTitle('不 Hello')
  },2000);
  return (
    <div>
      <h1 className='title'>{title}</h1>
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>任务</th>
          </tr>
        </thead>
        <tbody>
          {
            // html 模板
            todos.map((item,index)=>(
              <tr>
                <td>{index+1}</td>
                <td>{item}</td>
              </tr>
              )
            )
          }
        </tbody>
      </table>
    </div>
  )
}
export default App

1. 引入必要的模块

import { useState } from 'react'
import './App.css'

这里我们引入了 useState 钩子，它是 React 中用于管理状态的重要工具。同时，为了看起来舒服一点，我们引入了 App.css 文件，用于为组件添加样式。

2. 状态管理

const [todos, setTodos] = useState(['吃饭', '睡觉', '打豆豆']);
const [title, setTitle] = useState('Hello React');

useState 是一个 React 钩子，用于在函数组件中添加状态。它接受一个初始值作为参数，并返回一个数组，数组的第一个元素是当前状态的值，第二个元素是一个函数，用于更新该状态。

在这个例子中，我们定义了两个状态：todos 和 title。todos 是一个数组，初始值为 ['吃饭', '睡觉', '打豆豆']；title 是一个字符串，初始值为 'Hello React'。

3. 状态更新

setTimeout(() => {
  setTodos(['学习']);
  setTitle('不 Hello');
}, 2000);

我们使用 setTimeout 函数在 2 秒后更新 todos 和 title 的状态。setTodos 和 setTitle 分别是用于更新 todos 和 title 状态的函数。当这些状态更新时，React 会自动重新渲染组件，以反映最新的状态。

4. JSX 渲染

return (
  <div>
    <h1 className='title'>{title}</h1>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>任务</th>
        </tr>
      </thead>
      <tbody>
        {
          todos.map((item, index) => (
            <tr>
              <td>{index + 1}</td>
              <td>{item}</td>
            </tr>
          ))
        }
      </tbody>
    </table>
  </div>
)

在 return 语句中，我们使用 JSX 语法来定义组件的 UI。{title} 是一个 JSX 表达式，用于插入 title 状态的值。todos.map 方法用于遍历 todos 数组，并为每个元素生成一个 <tr> 元素。

5. 样式应用

在 App.css 文件中，我们定义了一个 .title 类：

.title {
  background-color: rgb(137, 99, 129);
  color: yellow;
}

这个样式会应用到 <h1> 元素上，使标题具有特定的背景颜色和文字颜色。

总结

通过这个例子，我们深入了解了 React 中的状态管理和响应式数据。useState 钩子让我们可以在函数组件中轻松地管理状态，并且当状态更新时，React 会自动重新渲染组件，以反映最新的状态。这种响应式的设计使得我们可以更专注于业务逻辑，而不必手动操作 DOM。

在后续的学习中，我们可以进一步探索 React 的其他特性，如组件间通信、生命周期方法、上下文 API 等，以构建更复杂的应用程序。