0
저는 ES6 및 Redux를 처음 사용합니다. 일부 코드를보고이 새로운 ES6 구문에서 어떤 일이 벌어지고 있는지 이해하려고합니다.ES6 반응 Redux 구문 설명
나는 이것이 단순 할 수 있다고 생각하지만 나는 그것을 이해하지 않고 다른 사람을 도와 줄 수도 있습니다.
다음 코드가 어떻게 반응 요소를 생성하는지 알고 싶습니다. 메신저 React.createClass 메서드를 잘 알고 있지만 여기에 명시된 것처럼 보이지 않거나 적어도 명시 적으로 명시되지 않은 것 같습니다. 나는 React가 임포트 된 것을 볼 수 있지만 나머지 코드에서는 언급하지 않았다. 그렇다면 FileTable이 어떻게 반응 구성 요소로 바뀌 었습니까?
const 변수 FileTable에는 일반적으로 React.createClass의 렌더링 메소드가 포함되어있는 것 같습니다. 그렇다면 componentDidMount, componentDidUpdate 등의 메소드는 어디에 정의됩니까?
이 문제에 대한 도움을 주시면 감사하겠습니다. React.createClass, ES6 class 또는 Stateless (pure) function 구성 요소 -
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);
컴파일러를 , 아마도 babel/webpack/browserify 인 JSX를 javascript로 변환하는 플러그인이 있습니다 .babel에 대해 react-jsx transform을 사용하면 JSX를 React로 변형 할 수 있고이 상태없는 함수가 'React .createElement'. 많이 도움이되는 – CallMeNorm
!하지만 그럴 경우, React 구성 요소를 만들려면 const newComponent = React.createClass ({render : ...)를 사용하여 정상적인 방법으로 정의 할 수 있습니까? , componentDidMou nt : ...}). 그리고 마지막에 connect (mapStateToProps, mapDispatchToProps) (newComponent)를 호출하면 newComponent가 저장소에 연결될 것입니다. – X0r0N
사실 React.Component를 확장하고 render 메소드에서 호출되는 클래스에서 상태 비 저장 함수를 래핑합니다. Connect는 React.Component를 확장하는 구성 요소이며 렌더링 메서드에서 랩핑하는 구성 요소를 호출하며 상태 비 저장 기능을 갖 춥니 다. 아무리 당신이 포장 할지라도, 무국적 기능에는 수명주기 방법이 없을 것입니다. –