React:从基于类的组件转变为基于功能的组件

Posted

技术标签:

【中文标题】React:从基于类的组件转变为基于功能的组件【英文标题】:React: change from class based components to functional based components 【发布时间】:2020-09-27 10:53:24 【问题描述】:

这是一个反应初学者练习,所以我正在寻找最简单的解决方案。我需要将这 3 个类组件转换为功能组件。我目前正在学习 React,因此任何有用的 cmets 也将不胜感激。提前致谢!

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;

【问题讨论】:

【参考方案1】:

这是关于如何将 React 类组件转换为更好、更简洁、更易于阅读的功能组件的逐步答案:

    你需要把类改成函数 删除render函数 删除this关键字 如果您的Class Component 中有state,请使用hooks,尤其是useStateuseReducer 挂钩 如果你在Class Component 中使用了lifecycle methods,你几乎可以在任何情况下使用useEffect 挂钩。 (只需要对它感到满意,您可以阅读更多关于它的信息here 和 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;

【讨论】:

【参考方案2】:

在这种特殊情况下,转换很简单,因为它们是简单的“哑”组件。您只需删除类,将它们转换为标准函数,并将它们的 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;

【讨论】:

【参考方案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:从基于类的组件转变为基于功能的组件的主要内容,如果未能解决你的问题,请参考以下文章

react中从类重构为功能钩子组件

将功能组件代码转换为类组件代码

Vue.js 3.0 组件是如何渲染为 DOM 的?

基于类的组件具有功能组件的参考警告

为啥使用无状态功能组件而不是基于类的组件?

如何在反应中将函数转换为基于类的组件?