我应该在 React 中使用什么类型的组件:函数式组件还是类基组件? [英] What type of components should I use in React: functional components or class base components?

问题描述

令我困惑的是，函数式组件和基于类的组件现在都可以使用 State 和 Props 但在不同的实现中.我更喜欢基于类的组件，因为我是 angular 开发人员，我发现使用这些类型的组件更舒服.但是我搜索了这个，许多专家说最好尽可能多地使用功能组件.

我想知道当有人申请 React 开发人员职位时，这对科技公司是否真的很重要.他们会看这些东西吗?由于它们在实现上有很大不同......

解决方案

方法组件和类组件有一些区别.

方法组件:

在 React 中声明组件的最简单方法.你只需要声明一个返回 jsx 的方法.示例:

const MessageComponent = ({ name }) =>{ return 
Hi {name}
}

除了引入 React Hooks 之外，您还可以使用 方法组件

完成大部分功能

componentDidUpdate => useEffect(fn)

componentDidMount => useEffect(fn, [])

state => useState()

类组件:

组件的健壮版本.使用类组件，您可以做更多事情.Props 将默认在类上下文 this.props 中.您可以为组件使用状态、局部变量.您可以添加许多共享相同状态的类的方法.

导出默认类 MessageComponent extends Component {状态 = {消息:'默认消息'}renderMessage = () =>{返回 (<h1>嗨{this.props.name})}使成为() {返回 (<div>{this.renderMessage()}

)}}

类组件VS方法组件

不使用类组件的主要原因是您只需要一个简单的组件，如button、card或代表性组件.如果你的组件不需要复杂的状态、复杂的逻辑，method component 最适合你.

What confused me is that both functional component and class based component can now use State and Props but in different implementations. I prefer class based component since I am angular developer and I find it more comfortable to work with these type of components. But I searched for this and many experts said it is better to use functional components as mush as possible.

I want to know if it really matters with tech companies when someone apply for react developer position. Would they look in these things? Since they differ a lot in implementations...

解决方案

There are some differences between method component and class component.

Method Component:

The simplest way to declare a component in React. you need only to declare a method that returns a jsx. example:

const MessageComponent = ({ name }) => { return <h1>Hi {name}</h1> }

in addition to since introduction of React Hooks you can do most of functionalities using method component

componentDidUpdate => useEffect(fn)

componentDidMount => useEffect(fn, [])

state => useState()

Class Component:

the robust version of the component. With class component you can do more. Props will by default, in the class context this.props. You can use state, local variable for your component. You can add many class's method that share the same state.

export default class MessageComponent  extends Component {
  state = {
    message: 'default message'
  }

  renderMessage = () => {
    return (
      <h1>
        Hi {this.props.name}
      </h1>
    )
  }

  render() {
    return (
      <div>
        {this.renderMessage()}
      </div>
    )
  }
}

Class Component VS Method Component

The major reason to not using class component is when you only need a simple component like a button, card, or representational component. If your component doesn't need a complex state, complex logic, method component is best for you.

这篇关于我应该在 React 中使用什么类型的组件:函数式组件还是类基组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！