请求将React Class组件转换为React Hooks（useState）实现

import React, { useState, useEffect } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';

const ResponsiveGridLayout = WidthProvider(Responsive);

const LocalStorageLayout = () => {
  // 初始化布局：从localStorage读取，无数据则用默认布局
  const [layout, setLayout] = useState(() => {
    const savedLayout = localStorage.getItem('react-grid-layout');
    return savedLayout ? JSON.parse(savedLayout) : [
      { i: 'a', x: 0, y: 0, w: 1, h: 2 },
      { i: 'b', x: 1, y: 0, w: 3, h: 2 },
      { i: 'c', x: 4, y: 0, w: 1, h: 2 },
    ];
  });

  // 布局变化时自动保存到localStorage
  useEffect(() => {
    localStorage.setItem('react-grid-layout', JSON.stringify(layout));
  }, [layout]);

  // 处理布局变更的回调函数
  const handleLayoutChange = (newLayout) => {
    setLayout(newLayout);
  };

  return (
    <ResponsiveGridLayout
      className="layout"
      layouts={{ lg: layout }}
      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
      cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
      onLayoutChange={handleLayoutChange}
    >
      <div key="a">a</div>
      <div key="b">b</div>
      <div key="c">c</div>
    </ResponsiveGridLayout>
  );
};

export default LocalStorageLayout;

核心转换要点 #

• 状态替换：用useState替代Class组件的this.state，初始化时传入函数避免每次渲染重复读取localStorage（该函数仅执行一次）。
• 副作用处理：用useEffect替代componentDidUpdate，依赖数组设为[layout]，确保仅在布局变化时触发localStorage保存操作。
• 回调优化：直接定义handleLayoutChange函数，无需手动绑定this，函数作用域更清晰。
• 结构简化：从Class组件转为函数组件，代码更简洁紧凑，符合React Hooks的开发规范。

内容的提问来源于stack exchange，提问作者Gojo Zinen