Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react, differences between component create with extend class and simple const = function

Tags:

reactjs

In react tutorial:

https://egghead.io/lessons/javascript-redux-react-todo-list-example-filtering-todos

there is main component create with extends:

class TodoApp extends Component {
  render() {
    const visibleTodos = getVisibleTodos(
      this.props.todos,
      this.props.visibilityFilter
    );
    .
    . // Input and Button stuff
    .

and another components just create like a const that hold a function:

const FilterLink = ({
  filter,
  children
}) => {
  return (
    <a href='#'
       onClick={e => {
         e.preventDefault();
         store.dispatch({
           type: 'SET_VISIBILITY_FILTER',
           filter
         });
       }}
    >
      {children}
    </a>
  )
}

the difference i see, first created with class use a render function, and the another a return function to send back the template.

What are the differences? I've heard components in the future only will be allowed with extend Component ?

like image 632
stackdave Avatar asked Sep 20 '16 10:09

stackdave


People also ask

Which is better function component or class component in React?

Nothing is better, because both have pros and cons. But class components are important to understand React flow and lifecycle methods. The new learner should practice React using class components. Once they are familiar with class components, they can learn and use functional components.

Which one is better functional component or class component?

Personally, I found the functional component easier to understand compared to the class component, although this might be different for a developer from object-oriented programming like Java. The class component uses ES6 class syntax, and it extends React components with a render method that returns React elements.

Which is faster class component or functional component?

It is generally believed that functional components are faster than class components, and the React team has been promising optimizations to functional components.

What is the difference between React component and class component?

The most obvious difference is the syntax. A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. A class component requires you to extend from React. Component and create a render function that returns a React element.

Why should you use classes instead of functions in react?

With the release of React 16.8 in early 2019, a major gap between classes and functions has been reduced significantly. The ability to use states in function makes creating React components much more economical for a developer. So why should you use class components at all? The main answer to this is to do with the ability to create extensibility.

Do you prefer const or function names for components in react?

And React is cool :-) (though lots of other JS platforms are probably too...) I prefer "const" over function, but I don't like retyping the name of the component twice. Interesting distinction, I'll keep this in mind when using const vs. function.

What is the difference between a functional component and a class component?

A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. A class component requires you to extend from React. Component and create a render function that returns a React element. Not the answer you're looking for?


2 Answers

See: React.createClass vs. ES6 arrow function

The short answer is that you want to use Stateless Functional Components (SFC) as often as you can; the majority of your components should be SFC's.

Use the traditional Component class when:

  • You need local state (this.setState)
  • You need a lifecycle hook (componentWillMount, componentDidUpdate, etc)
  • You need to access backing instances via refs (eg. <div ref={elem => this.elem = elem}>)
like image 155
Joshua Comeau Avatar answered Oct 11 '22 07:10

Joshua Comeau


class Foo extends Component {} results in components with some React lifecycle hooks, while const Foo = (props) => {} does not. The latter should therefore result in more performant code and would be considered a "stateless" or "pure" component, as it doesn't come with any additional baggage.

like image 1
Louis Moore Avatar answered Oct 11 '22 06:10

Louis Moore