当前位置：首页 > news >正文

React状态管理器的应用

news 来源：原创 2025/4/29 19:42:22

Vue的响应能力，直接改变data()里面字段的值UI就会自动刷新，而react不会，如下代码：

import React from 'react';
import { Badge, TabBar, Button } from 'antd-mobile';
import {
  ScanningOutline,
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';



const Menu = () => {
  let products=[
    { title: '卷心菜', isFruit: false, id: 1 },
    { title: '大蒜', isFruit: false, id: 2 },
    { title: '苹果', isFruit: true, id: 3 }
  ];

  const ShoppingList = () => {
    return (
      <ul>
        {products.map(i => (
          <li key={i.id} style={{ color: i.isFruit ? 'magenta' : 'darkgreen' }}>
            {i.title}
          </li>
        ))}
      </ul>
    );
  };
  return (
    <div style={{ padding: 20 }}>
      <h2>菜单页面</h2>
      <ShoppingList />
      <div>
        <Button type="primary" onClick={() => {
          const productName = prompt('请输入产品名称');
          if (productName) {
            const newProduct = {
              title: productName,
              isFruit: false,
              id: products.length + 1
            };
            products=[...products, newProduct];
          }
        }}>添加11</Button>
      </div>
    </div>
  );
};
export default Menu;

直接改变products，界面中的products列表不会刷新。
这时候要引入状态管理器：

import React, { useState } from 'react';
import { Badge, TabBar, Button } from 'antd-mobile';
import {
  ScanningOutline,
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';



const Menu = () => {
  const [products, setProducts] = useState([
    { title: '卷心菜', isFruit: false, id: 1 },
    { title: '大蒜', isFruit: false, id: 2 },
    { title: '苹果', isFruit: true, id: 3 }
  ]);

  const ShoppingList = () => {
    return (
      <ul>
        {products.map(i => (
          <li key={i.id} style={{ color: i.isFruit ? 'magenta' : 'darkgreen' }}>
            {i.title}
          </li>
        ))}
      </ul>
    );
  };
  return (
    <div style={{ padding: 20 }}>
      <h2>菜单页面</h2>
      <ShoppingList />
      <div>
        <Button type="primary" onClick={() => {
          const productName = prompt('请输入产品名称');
          if (productName) {
            const newProduct = {
              title: productName,
              isFruit: false,
              id: products.length + 1
            };
            setProducts([...products, newProduct]);
          }
        }}>添加</Button>
      </div>
    </div>
  );
};
export default Menu;

需要注意的是useState要在组件内部使用！ShoppingList 可以放到组件外部，带上参数即可，如下：

...
// 将 ShoppingList 函数移到组件外部
const ShoppingList = (props) => {
  const { args } = props;
  return (
    <ul>
      {args.map(i => (
        <li key={i.id} style={{ color: i.isFruit ? 'magenta' : 'darkgreen' }}>
          {i.title}
        </li>
      ))}
    </ul>
  );
};

const Menu = () => {
  const [products, setProducts] = useState([
    { title: '卷心菜', isFruit: false, id: 1 },
    { title: '大蒜', isFruit: false, id: 2 },
    { title: '苹果', isFruit: true, id: 3 }
  ]);

  return (
    <div style={{ padding: 20 }}>
      <h2>菜单页面</h2>
      <ShoppingList args={products} />
      <div>
        <Button type="primary" onClick={() => {
          const productName = prompt('请输入产品名称');
          if (productName) {
            const newProduct = {
              title: productName,
              isFruit: false,
              id: products.length + 1
            };
            setProducts([...products, newProduct]);
          }
        }}>添加</Button>
      </div>
    </div>
  );
};
export default Menu;