Question

我是ES6和Redux的新手。我正在查看一些代码，并尝试了解这种新的ES6语法中发生了什么。

我觉得这可能很简单，但我不理解它，它可能会帮助处于类似位置的其他人。

我想知道以下代码是如何创建react元素的。我熟悉React.createClass方法，但这似乎没有在这里陈述或至少没有明确说明。我可以看到React已导入，但在其余代码中没有提到。那么FileTable如何变成反应组件？

我可以看到const变量FileTable似乎包含了React.createClass的render方法中常见的内容，但是如果是这种情况，那么在哪里定义componentDidMount，componentDidUpdate等方法？ / p>

非常感谢任何帮助。

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

Answer 1

您可以通过3种方式创建反应组件 - React.createClass，ES6 class或 Stateless (pure) function组件。这是一个无状态组件，这意味着它没有状态，生命周期方法（如componentDidMount或componentDidUpdate）和refs，并且如你所推测的那样，它类似于react类的render方法。

每当您需要一个纯粹代表性的哑组件时，您可以使用无状态组件，因为它简洁。它与redux很好用，因为connect创建了一个包含无状态方法的智能组件。

关于性能，无状态组件与没有状态的ES6类组件相比没有任何性能提升。然而，Facebook表示将来会有一些优化。

Answer 2

它不必被声明为 here 作为React组件; React了解纯函数。

Pure functions不需要继承Component。它们并不适用于所有组件类型，但对于简单的HTML呈现，它们是首选的（例如，请参阅eslint-plugin-react prefer-stateless-function。

纯函数不具备组件生命周期，相关方法等。

ES6 React Redux语法澄清

2 个答案: