ES6 React Redux語法澄清

我是ES6和Redux的新手。我在看一些代碼並試圖理解這個新的ES6語法中發生了什麼。ES6 React Redux語法澄清

我覺得這可能很簡單，但我不理解它，它可能會幫助與我處於類似位置的其他人。

我想知道下面的代碼是如何創建一個react元素。我熟悉React.createClass方法，但似乎沒有在這裏陳述或至少不明確。我可以看到React已導入，但未在代碼的其餘部分提及。那麼FileTable如何變成反應組件？

我可以看到const變量FileTable似乎包含通常會在React.createClass的render方法中進行的操作，但是如果是這種情況，那麼像componentDidMount，componentDidUpdate等方法會在哪裏定義？

任何幫助是極大的讚賞。

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);

來源

2016-08-01 X0r0N

您可以創建反應有3種方式的組件 - React.createClass，ES6 class或 Stateless (pure) function組件。這是一個無狀態的組件，這意味着它沒有狀態，生命週期方法（如componentDidMount或componentDidUpdate）和refs，並且您推測它與反應類的render方法類似。

無論何時您需要一個純粹具有代表性的愚蠢組件，都可以使用無狀態組件，因爲它的簡潔。它與redux很好地結合，因爲connect創建了一個包裝無狀態方法的智能組件。

關於性能，無狀態組件在沒有狀態的情況下沒有任何超過ES6類組件的性能增益。不過，Facebook表示，未來會有一些優化。

來源

2016-08-01 20:21:27

編譯器，它可能是babel/webpack/browserify，它有一個插件，它以某種方式將JSX轉換爲javascript。如果對babel使用react-jsx轉換，那麼可以假設JSX可以轉換爲React，並且這個無狀態函數會變成「React .createElement'。 – CallMeNorm

這有助於很多！但如果是這種情況，如果我要創建一個React組件，我可以用const newComponent = React.createClass（{render：，componentDidMou NT：...}）。並在結束連接（mapStateToProps，mapDispatchToProps）（newComponent）和結果將是newComponent將連接到商店？ – X0r0N

實際上，react在一個擴展了React.Component的類中包裝了一個無狀態函數，並且調用了它的render方法。 Connect是一個擴展了React.Component的組件，它也調用了它在其渲染方法中包裝的組件，是一個無狀態的函數。無論你如何包裝它，無狀態函數都不會有生命週期方法。 –

它不必被聲明爲這裏作爲React組件; React知道純粹的功能。

Pure functions不需要繼承Component。他們並不適用於所有組件類型，但對於簡單的HTML呈現他們首選（例如，參見eslint-plugin-react prefer-stateless-function。

純函數沒有有組件的生命週期，相關方法等

來源

2016-08-01 20:21:38

ES6 React Redux語法澄清

回答

相關問題