ES6 React Redux синтаксическое разъяснение

Я новичок в ES6 и Redux. Я просматриваю какой-то код и пытаюсь понять, что происходит в этом новом синтаксисе ES6.ES6 React Redux синтаксическое разъяснение

Я чувствую, что это может быть просто, но я не понимаю его, и это может помочь кому-то другому в подобном положении для меня.

Я хочу знать, как следующий код создает элемент реакции. im знакомы с методом React.createClass, но это, кажется, не указано здесь или, по крайней мере, явно. я вижу, что React импортирован, но он не упоминается в остальной части кода. так как тогда FileTable превратится в реактивный компонент?

Я вижу, что переменная const FileTable, как представляется, содержит то, что обычно входит в метод рендеринга React.createClass, но если это так, где бы были определены методы, такие как 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, и, как вы догадались, это похоже на метод рендеринга класса реагирования.

Всякий раз, когда вам нужен чисто репрезентативный немой компонент, вы можете использовать компонент без гражданства из-за его краткости. Это хорошо сочетается с redux, поскольку соединение создает интеллектуальный компонент, который обертывает метод без сохранения.

Что касается производительности, то компоненты без состояния не имеют какого-либо повышения производительности по сравнению с компонентом класса ES6 без состояния. Тем не менее, Facebook заявил, что в будущем будут некоторые оптимизации.

источник

2016-08-01 20:21:27

компилятор , который, вероятно, является babel/webpack/browsify, имеет плагин, который каким-то образом преобразует JSX в javascript. Если вы используете преобразование-jsx для babel, тогда предполагается, что JSX можно преобразовать в React, и эта функция без гражданства будет преобразована в «React .createElement'. – CallMeNorm

, который очень помогает, но если это так, если бы я должен был создать компонент React, я мог бы определить его обычным способом с помощью const newComponent = React.createClass ({render: ... , компонентDidMou нт: ...}). и в конце connect (mapStateToProps, mapDispatchToProps) (newComponent), и результатом будет то, что newComponent будет подключен к хранилищу? – X0r0N

На самом деле реакция обертывает функцию без состояния в классе, который расширяет React.Component и вызывает метод рендеринга. Connect - это компонент, который расширяет React.Component и вызывает компонент, который он обертывает в свой метод рендеринга, также является функцией без гражданства или нет. Независимо от того, как вы его обернете, функция stateless не будет использовать методы жизненного цикла. –

Здесь не обязательно указываться в качестве компонента React; Реакт знает о чистых функциях.

Pure functions не нужно наследовать от Component. Они не подходят для всех типов компонентов, но и для простого HTML делает они предпочтительным (например, см eslint-plugin-react prefer-stateless-function.

Чистые функции не имеют компонент жизненного цикла, связанные с ними методы и т.д.

источник

2016-08-01 20:21:38

ES6 React Redux синтаксическое разъяснение

ответ

Смежные вопросы