将react类转换为？

Question

有人能帮我把这个转换成反应钩子吗?我相信它会是useState()

https://github.com/react-grid-layout/react-grid-layout/blob/master/test/examples/7-localstorage.jsx

import React from "react";
import RGL, { WidthProvider } from "react-grid-layout";

const ReactGridLayout = WidthProvider(RGL);
const originalLayout = getFromLS("layout") || [];
/**
 * This layout demonstrates how to sync to localstorage.
 */
 export default class LocalStorageLayout extends React.PureComponent {
 static defaultProps = {
 className: "layout",
 cols: 12,
 rowHeight: 30,
 onLayoutChange: function() {}
};

  constructor(props) {
    super(props);

    this.state = {
      layout: JSON.parse(JSON.stringify(originalLayout))
    };

    this.onLayoutChange = this.onLayoutChange.bind(this);
    this.resetLayout = this.resetLayout.bind(this);
  }

  resetLayout() {
    this.setState({
      layout: []
    });
  }

  onLayoutChange(layout) {
    /*eslint no-console: 0*/
    saveToLS("layout", layout);
    this.setState({ layout });
    this.props.onLayoutChange(layout); // updates status display
  }

  render() {
    return (
      <div>
        <button onClick={this.resetLayout}>Reset Layout</button>
        <ReactGridLayout
          {...this.props}
          layout={this.state.layout}
          onLayoutChange={this.onLayoutChange}
        >
          <div key="2" data-grid={{ w: 2, h: 3, x: 8, y: 0 }}>
            <span className="text">5</span>
          </div>
        </ReactGridLayout>
      </div>
    );
   }
}

function getFromLS(key) {
  let ls = {};
   if (global.localStorage) {
    try {
      ls = JSON.parse(global.localStorage.getItem("rgl-7")) || {};
    } catch (e) {
      /*Ignore*/
    }
  }
  return ls[key];
 }

 function saveToLS(key, value) {
  if (global.localStorage) {
   global.localStorage.setItem(
    "rgl-7",
      JSON.stringify({
      [key]: value
    })
  );
 }
}

 if (process.env.STATIC_EXAMPLES === true) {
 import("../test-hook.jsx").then(fn => fn.default(LocalStorageLayout));
}

尽我最大的努力去理解反应类，因为我只知道反应钩子，所以任何帮助都会是如此的神奇和有帮助，请和谢谢。

Answer 1

如果您了解组件的生命周期，React类是简单的。组件被实例化，然后挂载(与DOM关联)&然后呈现。

每次更新后(状态或道具)都会重新呈现。

构造器

组件或任何JS类的实例化发生在constructor中。它只运行一次。由于类组件继承自React.Component，所以它们通过调用super(props)将道具传递给React.Component。这将初始化props字段。super调用应该是构造函数中的第一行。

不能访问构造函数中的以下内容：window、document、fetch、localStorage、sessionStorage。

渲染

render方法返回呈现的Element/Fragment。它对应于函数组件的返回部分。每次呈现组件时，它都会运行。

事件侦听器绑定

类中最困难的部分是事件方法绑定。

隐式this对象，是访问状态、道具和其他组件方法所必需的。但是，在事件侦听器方法*中。它引用事件目标。因此，bind调用。然而，这个问题可以通过使用箭头方法绕过，因为箭头函数没有自己的this (即。this不引用事件目标)。

函数组件没有这个问题，因为它们不需要this。

State

状态在构造函数中初始化。

与函数组件不同，类将状态视为单个对象。

而不是,

let [x, setX] = useState(0); let [y, setY] = useState(1);

在课堂上是：

this.state = {x:0, y:1};

为了更新状态，我们使用setState方法，

this.setState({x: 3}); // updates only x, & y is unchanged: setX(3)
this.setState({x: 3, y: 4}); // updates both x & y: setX(3); setY(4)
this.setState((state)=>({ y: state.y - 1)) // updates y using previous value: setY(y=>y-1)

类的一个优点是，我们可以使用另一个状态属性的前一个值来更新状态属性。

this.setState((state)=>({x: (y%2)? 100: 50})); // updates x using y's value

此外，还可以更新有关道具的状态：

this.setState((state,props)=>({x: state.x + props.dx}));

此外，setState还有一个可选的第二个回调参数。此回调将在状态更新后立即运行。

this.setState(state=>({x: state.x+1}), ()=> {
    // called after x is updated
    sessionStorage.setItem('x', this.state.x);
});

// function version
setX(x=>x+1);

useEffect(()=> {
    localStorage.setItem('x', x);
}, [x]); // runs every time x is updated   

安装

安装后，调用componentDidMount()。现在，组件可以访问window & document对象。

在这里，你可以

使用API调用( setInterval/setTimeout

• Update sessionStorage)

)或存储(localStorage &sessionStorage))调用

• 状态

它相当于useEffect(()=> {}, [])

卸载

在卸载之前，调用componentWillUnmount()。通常，这里调用clearTimeout/clearInterval来清理组件。

它等价于返回的useEffect方法。

useEffect(()=>{
    //....
    return ()=> {
        // componentWillUnmount code
    };
}, [])