React：从基于 class 的组件更改为基于函数的组件

Question

这是一个 React 初学者练习，所以我正在寻找最简单的解决方案。我需要 将这 3 个 class 组件转换为功能组件。 我目前正在学习 React，所以任何有用的评论也将不胜感激。提前致谢！

APP.JS

import React from 'react'
import List from './components/List'


class DataArr extends React.Component {

  render() {

    const fruits = ["banana", "apple", "pear", "melon", "lemon"]

    return (
    <div className="DataArr">
      <List fruits={fruits}/>
    </div>
    )
}
}

export default DataArr;

LIST.JS

import React from "react";

import Item from "./Item"; 

class List extends React.Component {

  render() {

    return (
      <div>
        {this.props.fruits.map((fruit, index) => {
          return <Item key={index} fruit={fruit} />;
        })}
      </div>
    );
  }
}
export default List;

ITEM.JS

import React from 'react'
class Item extends React.Component{
    render() {

        return (
              <div>
                {this.props.fruit}
              </div>
        )
      }
    }
    export default Item;

Answer 1

这是关于如何将 React Class 组件转换为功能组件的分步回答，它更好、更清晰、更易于阅读：

您需要将 class 更改为函数
移除render功能
删除 this 关键字
如果您的 Class Component 中有 state，请使用 hooks，尤其是 useState 或 useReducer 挂钩
如果您在 Class Component 中使用了 lifecycle methods，您几乎可以在任何情况下使用 useEffect 挂钩。（只需要适应它，你可以阅读更多关于它的信息 here and here）

App.js 将是：


import React from 'react'
import List from './components/List'


// class DataArr extends React.Component { //<-- Remove this line
const DataArr = () => { // <-- Create a function Component
  // render() { // <-- remove render function because you don't need it
    const fruits = ["banana", "apple", "pear", "melon", "lemon"]
    return (
      <div className="DataArr">
        <List fruits={fruits}/>
      </div>
    )
// } // this curly brace is for render function
}

export default DataArr;

List.js 将是：

import React from "react";

import Item from "./Item"; 

// class List extends React.Component { //<-- Remove this line

const List = (props) => {
// render() { // <-- remove render function because you don't need it
    return (
      <div>
        {
          // this.props.fruits.map((fruit, index) => { <-- Change this.props to props
          props.fruits.map((fruit, index) => {
          return <Item key={index} fruit={fruit} />;
        })}
      </div>
    );
  // } // this curly brace is for render function
}
export default List;

和 ITEM.js 会是这样的：

import React from 'react'
// class Item extends React.Component{ //<-- Remove this line
const Item = (props) => { // <-- Create a function Component
  // render() { // <-- remove render function because you don't need it
    return (
          <div>
            {
              // this.props.fruit // <-- change this.props to props
              props.fruit
            }
          </div>
    )
}
// } // this curly brace is for render function
export default Item;

Answer 2

在此特定实例中，转换很简单，因为它们是简单的 'dumb' 组件。您只需删除类，将它们转换为标准函数，并将其 props 作为参数传递，删除 render() 并替换为 return.

APP.JS

import React from 'react'
import List from './components/List'

function DataArr() {
    const fruits = ["banana", "apple", "pear", "melon", "lemon"];

    return (
        <div className="DataArr">
          <List fruits={fruits}/>
        </div>
    );
}

export default DataArr;

LIST.JS

import React from "react";

import Item from "./Item"; 

function List({ fruits }) {
    return (
      <div>
        {fruits.map((fruit, index) => {
          return <Item key={index} fruit={fruit} />;
        })}
      </div>
    );
}

export default List;

ITEM.JS

import React from 'react';

function Item({ fruit }) {
    return (
        <div>
            {fruit}
        </div>
    );
}

export default Item;

Answer 3

APP.JS

    import React from 'react';
    import List from './components/List';

    const DataArr = () => {
        const fruits = ["banana", "apple", "pear", "melon", "lemon"];
        return (
            <div className="DataArr">
                <List fruits={fruits} />
            </div>
        )
    }
    export default DataArr;

LIST.JS

import React from 'react';
import Item from './Item';

const List = (props) =>
        {props.fruits.map(fruit, index) => 
              <Item key={index} fruit={fruit} />};
export default List;

ITEM.JS

import React from 'react';

const Item = (props) => {props.fruit};

export default Item;

React：从基于 class 的组件更改为基于函数的组件

React: change from class based components to functional based components

reactjs

react-functional-component

react-class-based-component