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
,尤其是useState
或useReducer
挂钩
如果你在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:从基于类的组件转变为基于功能的组件的主要内容,如果未能解决你的问题,请参考以下文章