时间戳

首页 > 解决方案 > React - 使用新方法时如何更改以旧方式编写的代码？

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

问题描述

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

我知道以前在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>
    );
  }
}

先感谢您。

标签： reactjsrefactoring

解决方案

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

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

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

生成的样板create-react-app不再导入Componentfromreact导致只有基于类的组件需要extendsfromComponent并且App现在是功能组件。

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

像以前一样导入：

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

推荐阅读