何时使用无状态组件进行反应

Question

I know the difference between stateless and statefull components in react application. I want to know what is the efficient way to use stateless and statefull components together. Is there any performance benefit of using the one over the other in any particular situation

Answer 1

You should default to using stateless components. Since they use no state, it's very easy to tell when a component should be re-rendered, since they will display the same thing if their props do not change.

You should use stateful components when you need to use setState or when you need to use lifecycle hooks.

In theory there could be performance benefits for using stateless components due to the fact they are pure functions (or should be pure functions), but I don't have any hard numbers for that.

Answer 2

Class Components

Class components (that have state) can be used when you want to store some local data inside a component. For eg -

import React from 'react'

function handleInc (state, props) {
  return {
    count: state.count + 1
  }
}

class App extends React.Component {
  state = {
    count: 0
  }

  handleClick = () => {
    this.setState(handleInc);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Increase</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

These components are also called smart containers or components because they hold all the logic for modifying the UI based on the state (Redux pattern).

Functional Components or Stateless Components

Functional components have no state or any local data. These components can be used to update some UI by passing down the props from the parent component.

<Child data={this.state.count} />

Functional components have their own advantages like :

• They are easy to test.

• They are easy to understand.

• Performance

• No worries about the this keyword.

If anything more, refer to this article.