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

Question

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

我知道以前在ReactJS中创建应用程序的方法， 例如使用Component and render() 函数，但我可以看到它目前不同，因为：

npx create-react-app app-name

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

例如，以前它是导入的：

import React, {Component} from 'react';

现在只有：

import React from 'react';

我正在寻求有关我应该更改哪些内容的提示或简单建议，以便旧代码在不导入 Component.

使用通过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

随着hooks的引入，一些核心概念开始发生变化。在React 16.8之前，我们曾经有一个经验法则来决定一个组件应该基于classor function：

如果组件应该保持状态，那么它应该是基于类的。如果它没有状态（无状态），那么它可能是一个功能组件

这曾经是真实的，因为没有一种方法可以在功能组件内实现有状态的逻辑。现在钩子允许您state在功能组件中实现。

生成的样板不再从 fromcreate-react-app导入，因为只有基于类的组件需要from并且现在是一个功能组件。ComponentreactextendsComponentApp

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

就像以前一样导入：

export class PersonDetail extends React.Component

或者给钩子一个机会，把你的组件变成一个功能组件：

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>
  )
}