2017-10-09 5 views
1

Je viens de commencer à apprendre à réagir sur le site officiel et il y a cette étape dans le tutoriel dans lequel pour faire une horloge de travail, vous tournez une fonction dans une classe. Ma question est la suivante: puisque cela peut être fait d'une manière beaucoup plus simple, pourquoi quelqu'un ferait-il cela?Pourquoi quelqu'un voudrait transformer une fonction en classe en réagissant js

+1

dans React, vous avez besoin d'un composant de classe lorsque vous souhaitez React méthodes de cycle de vie (ou un arbitre à un élément de dom). Donc, la différence est la façon dont React utilise la fonction ou la classe. –

+0

Lorsque vous devez créer un composant sans créer d'état (appelé composant sans état), il est plus facile de le créer avec une fonction. Mais lorsque vous créez un composant qui a besoin d'un état, vous devrez utiliser des classes pour le faire. – Atef

Répondre

1

Lorsque vous souhaitez avoir accès à toutes les fonctionnalités telles que React.Componentprops et state, life cycle methods, ref et much more, vous devez extend de React.Component.
Vous ne pouvez le faire avec un class (en ES6)

Modifier

Juste une chose, vous pouvez accéder à des accessoires trop déclarant une fonction

Ce n'est pas vrai en fait, les composants sans état ne sont que des fonctions qui retournent jsx. ce sont des fonctions normales, normales, qui acceptent les paramètres.
Nous utilisons parfois le mot-clé props en tant que paramètre, simplement comme une habitude ou une convention, mais vous pouvez utiliser le mot-clé que vous voulez.

Exemple:

const MyHeader = (myParams) => (
 
    // no props here 
 
    <h2>{myParams.value}</h2> 
 
); 
 

 
class MyApp extends React.Component{ 
 
    render(){ 
 
    const {message} = this.props; // i get access to this.props as i extended React.Component 
 
    return(<MyHeader value={message} />); 
 
    } 
 
} 
 

 
ReactDOM.render(<MyApp message="Hello!" />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

+0

Juste une chose, vous pouvez accéder aux accessoires déclarant aussi une fonction. – RMontes13

+0

non vous ne pouvez pas car il n'y a pas de «props» dans les fonctions seulement des paramètres normaux réguliers. nous l'appelons 'props' comme convention quand vous le passez à l'élément JSX mais à l'intérieur de votre composant de fonction ils sont juste des paramètres normaux comme n'importe quelle autre fonction reçoit. –