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 ?
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.
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.
It is generally believed that functional components are faster than class components, and the React team has been promising optimizations to functional components.
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.
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.
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.
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?
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:
this.setState
)componentWillMount
, componentDidUpdate
, etc)<div ref={elem => this.elem = elem}>
)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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With