reactjs - React - 使用新方法时如何更改以旧方式编写的代码？

Question

我在互联网上寻找步骤来重构以前的应用程序以采用新方法，但我没有找到令人满意的答案......

我知道以前在 ReactJS 中创建应用程序的方法，它使用 组件 和 渲染() 函数为例，但我可以看到它目前有所不同，因为:

npx create-react-app app-name

现在正在生成不同的模板。

例如，之前导入的是:

import React, {Component} from 'react';

现在仅:

import React from 'react';

我正在寻求有关我应该更改哪些内容的提示或简单建议，以便旧代码可以在不导入组件的情况下工作 组件。

通过AJAX使用函数进行通信的方法(例如loadPerson)也改变了吗？

例如，这里是 ./src/PersonDetail.js 的一些不起作用的示例:

import React from 'react';
import { DetailList } from './DetailList';
import { loadPerson } from './requests';

export class PersonDetail {
  constructor(props) {
    super(props);
    this.state = {person: null};
  }

  async componentDidMount() {
    const {personId} = this.props.match.params;
    const person = await loadPerson(personId);
    this.setState({person});
  }

  render() {
    const {person} = this.state;
    if (!person) {
      return null;
    }
    return (
      <div>
        <h1 className="title">{person.name}</h1>
        <div className="box">{person.description}</div>
        <h5 className="title is-5">Details at {person.name}</h5>
        <DetailList details={person.details} />
      </div>
    );
  }
}

提前谢谢您。

Answer 1

与 introduction of hooks一些核心概念开始发生变化。在 React 16.8 之前，我们通常根据经验法则来决定组件应该基于 class 还是 function:

If the component should hold state then it should be class based. If it doesn't have state (stateless) then it could be a functional component

这曾经是正确的，因为没有办法在功能组件内实现有状态逻辑。现在，钩子(Hook)允许您在功能组件中实现状态。

由create-react-app生成的样板不再从react导入Component，因为只有基于类的组件需要从 Component 扩展，App 现在是一个功能组件。

实际上没有任何改变，这只是编写组件的另一种方式。

像以前一样导入:

export class PersonDetail extends React.Component

或者给钩子(Hook)一个机会，将你的组件变成功能组件:

import React, { useState, useEffect } from 'react';
import { DetailList } from './DetailList';
import { loadPerson } from './requests';

const PersonDetail  = ({ personID }) => {
  const [person, setPerson] = useState(false)

  useEffect(() => {
      const person = await loadPerson(personId)
      setPerson(person)
  }, [personID])

  return !person ? null : (
    <div>
      <h1 className="title">{person.name}</h1>
      <div className="box">{person.description}</div>
      <h5 className="title is-5">Details at {person.name}</h5>
      <DetailList details={person.details} />
    </div>
  )
}