ES6 React Redux Syntax Klärung

Ich bin neu in ES6 und Redux. Ich schaue mir Code an und versuche zu verstehen, was in dieser neuen ES6-Syntax vor sich geht.ES6 React Redux Syntax Klärung

Ich denke, das mag einfach sein, aber ich verstehe es nicht und es könnte jemand anderem in einer ähnlichen Position zu mir helfen.

Ich möchte wissen, wie der folgende Code ein Reaction-Element erstellt. Ich bin vertraut mit der React.createClass-Methode, aber das scheint hier nicht oder zumindest nicht explizit angegeben zu sein. Ich kann sehen, dass React importiert wird, aber es wird nicht im Rest des Codes erwähnt. also dann, wie die FileTable in eine reaktionskomponente verwandelt werden?

Ich kann die const-Variable FileTable scheint zu enthalten, was normalerweise in der Render-Methode von React.createClass gehen würde, aber wenn das der Fall ist, wo würden Methoden wie ComponentDidMount, ComponentDidUpdate usw. definiert werden?

Jede Hilfe zu diesem wird sehr geschätzt.

import React, { PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions'; 

const FileTable = ({ fileList, getFileList}) => { 

    return (
     <ul className="filterable-table"> 
      {fileList.map((file)=><li>{file.fileName}</li>)} 
     </ul> 
    ); 
}; 

FileTable.propTypes = { 
    fileList: PropTypes.array, 
}; 

const mapStateToProps = (state) => { 
    return { 
     fileList: state.fileList 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     getFileList:() => dispatch(actions.getFileList()) 
    }; 
}; 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(FileTable);

Quelle

2016-08-01 X0r0N

können Sie erstellen reagieren Komponenten auf 3 Arten - React.createClass, ES6 class oder Stateless (pure) function Komponente. Dies ist eine zustandslose Komponente, was bedeutet, dass sie keine State-, Life-Cycle-Methoden (wie ComponentDidMount oder ComponentDidUpdate) und Referenzen hat, und wie Sie vermuten, ähnelt sie der Render-Methode einer Reaktionsklasse.

Wenn Sie eine reine Repräsentationskomponente benötigen, können Sie aufgrund ihrer Kürze eine zustandslose Komponente verwenden. Es geht gut mit redux, als die Verbindung eine intelligente Komponente erstellen, die die statusfreie Methode umschließt.

In Bezug auf die Leistung haben zustandslose Komponenten keinen Leistungszuwachs gegenüber der Klasse ES6 ohne Status. Facebook erklärte jedoch, dass es in Zukunft einige Optimierungen geben wird.

Quelle

2016-08-01 20:21:27

Der Compiler , was wahrscheinlich babel/webpack/browserify ist, hat ein Plugin, das irgendwie JSX in Javascript umwandelt Wenn Sie react-jsx transform für babel verwenden, wird angenommen, dass JSX in React umgewandelt werden kann und diese zustandslose Funktion in 'React 'umgewandelt wird .createElement'. – CallMeNorm

das hilft viel! Aber wenn das der Fall ist, wenn ich eine React-Komponente erstellen würde, wäre ich in der Lage, es mit const newComponent = React.createClass ({render: ... , komponenteDidMou nt: ...}). und am Ende verbinden (mapStateToProps, mapDispatchToProps) (newComponent) und das Ergebnis wäre, dass newComponent mit dem Speicher verbunden wäre? – X0r0N

Tatsächlich reagiert das Umbrechen einer zustandslosen Funktion in einer Klasse, die React.Component erweitert, und ruft ihre Rendermethode auf. Verbinden ist eine Komponente, die React.Component erweitert, und sie ruft die Komponente auf, die sie in ihrer Rendermethode umschließt, sei eine zustandslose Funktion oder nicht. Egal, wie Sie es umhüllen werden, statuslose Funktion wird keine Lebenszyklus-Methoden haben. –

Es muss nicht hier als eine React-Komponente deklariert werden; React weiß über reine Funktionen Bescheid.

Pure functions müssen nicht von Component erben. Sie sind nicht geeignet für alle Komponententypen, aber für einfache HTML macht sie bevorzugt (siehe zB eslint-plugin-react prefer-stateless-function.

Reine Funktionen nicht haben Komponente Lifecycles, assoziiert Methoden usw.

Quelle

2016-08-01 20:21:38

Antwort

Verwandte Themen