What type of components should I use in React: functional components or class base components?

问题

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...

回答1:

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.

回答2:

Functional components is the new standard. It is easier to keep them light weight and readable. In high quality code no component should need so much logic that it is ever more than 30-50 lines tops which keeps things short and succinct, with this in mind a class component is just large and clunky

回答3:

Class components were originally used, and are still supported by React. According to the React developers, there is no plan to stop supporting them. In an existing codebase there is no reason to spend resources converting class components to function components.

Having said that, function components are the better option for new code. They also support React Hooks which is a substitute for the class based lifecycle methods.

If you are writing new code, probably focus on writing function components. But if you are applying for jobs, there is a high chance that existing codebases have both class and function components. You will need to be comfortable with both and be able to translate one into the other.

回答4:

Well organizations now tend to use the latest there is, and employ someone that resonates with whatever's new.

Fuctional Components with new Hooks that also replace lifecycle method are

Easier to manage
Greater compatibility , especially with typescript
Much Less and Cleaner Code

回答5:

Nowadays, most of the developers are diverting to functional components instead of class components because there may be many reasons but some of the most beneficial points are

They are more readable in comparison to class-based components.
Easy to test and debug because it requires less code.
As per the guideline, it may boost performance.

I suppose you should write new components as functional components. Because now on the companies will manage class-based components for older code but they will move on with functional components. Therefore, you should be aware of both the coding conventions.

来源：https://stackoverflow.com/questions/59841274/what-type-of-components-should-i-use-in-react-functional-components-or-class-ba

标签

reactjs

react-native

react-component

react-functional-component