rcc+tab鍵:用ES6模塊系統創建一個React組件類
import React, {Component} from 'react';
class Test extends Component {
render() {
return (
<div>
</div>
);
}
}
export default Test;
rccp+tab鍵:創建一個帶有PropTypes和ES6模塊系統的React組件類
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class Test extends Component {
render() {
return (
<div>
</div>
);
}
}
Test.propTypes = {};
export default Test;
rcfc+tab鍵:創建一個帶有PropTypes和所有生命週期方法以及ES6模塊系統的React組件類
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class Test extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
}
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
}
shouldComponentUpdate(nextProps, nextState) {
}
componentWillUpdate(nextProps, nextState) {
}
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount() {
}
render() {
return (
<div>
</div>
);
}
}
Test.propTypes = {};
export default Test;
rcjc+tab鍵:用ES6模塊系統創建一個React組件類(無導出)
class Test extends Component {
render() {
return (
<div>
</div>
);
}
}
rdp+tab鍵:快速生成defaultProps
.defaultProps = {
};
rpc+tab鍵:用PropTypes和ES6 moudle系統創建一個React純組件類
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
class Test extends PureComponent {
render() {
return (
<div>
</div>
);
}
}
Test.propTypes = {};
export default Test;
rrc+tab鍵:創建一個連接到redux的React組件類
import React, {Component} from 'react';
import {connect} from 'react-redux';
function mapStateToProps(state) {
return {};
}
class Test extends Component {
render() {
return (
<div>
</div>
);
}
}
export default connect(
mapStateToProps,
)(Test);
rrdc+tab鍵:創建一個通過dispatch連接到redux的React組件類
import React, {Component} from 'react';
import {connect} from 'react-redux';
function mapStateToProps(state) {
return {};
}
function mapDispatchToProps(dispatch) {
return {};
}
class Test extends Component {
render() {
return (
<div>
</div>
);
}
}
export default connect(
mapStateToProps,
)(Test);
rsc+tab鍵:創建沒有PropTypes和ES6模塊系統的無狀態React組件
import React from 'react';
const Test = () => {
return (
<div>
</div>
);
};
export default Test;
rscp+tab鍵:創建有PropTypes和ES6模塊系統的無狀態React組件
import React from 'react';
import PropTypes from 'prop-types';
const Test = props => {
return (
<div>
</div>
);
};
Test.propTypes = {
};
export default Test;
rsf+tab鍵:以命名函數的形式創建無狀態的React組件,不使用PropTypes
import React from 'react';
function Test(props) {
return (
<div></div>
);
}
export default Test;
rsfp+tab鍵:使用PropTypes將無狀態的React組件作爲命名函數創建
import React from 'react';
import PropTypes from 'prop-types';
Test.propTypes = {
};
function Test(props) {
return (
<div></div>
);
}
export default Test;
rsi+tab鍵:創建無狀態的React組件,不使用PropTypes和ES6模塊系統,但使用隱式返回和道具
import React from 'react';
const Test = (props) => (
);
export default Test;
rwwd+tab鍵:在沒有導入的情況下,在ES6模塊系統中創建一個有構造函數、空狀態、proptypes和導出的React組件類。(主要用於React時,proptype由webpack提供插件提供)
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
</div>
);
}
}
Test.propTypes = {};
export default Test;