react项目开发中,没开发一个页面,都需要重新写同样的代码,进行基础搭建,大部分情况下,选择直接复制,然后删改下。下面我要讲的一个插件就非常好,可以自动生成代码
Simple React Snippet
react 快速生成代码块插件
安装
打开VSCode的插件查单,然后在输入框中输入Simple React Snippets,然后点击进行安装就可以了。
使用
输入imrc生成如下代码:
1 | import React, { Component } from 'react'; |
输入cc生成如下代码:
1 | class Test extends Component { |
输入impt生成如下代码:
1 | import PropTypes from 'prop-types'; |
输入ccc生成如下代码:
1 | class extends Component { |
输入sfc生成如下代码:
1 | const = () => { |
输入cdm生成如下代码:
1 | componentDidMount() { |
输入cwm生成如下代码:
1 | //WARNING! To be deprecated in React v17. Use componentDidMount instead. |
输入cwrp生成如下代码:
1 | //WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead. |
输入gds生成如下代码:
1 | static getDerivedStateFromProps(nextProps, prevState) { |
输入scu生成如下代码:
1 | shouldComponentUpdate(nextProps, nextState) { |
输入cwu生成如下代码:
1 | //WARNING! To be deprecated in React v17. Use componentDidUpdate instead. |
输入cdu生成如下代码:
1 | componentDidUpdate(prevProps, prevState) { |
输入cdc生成如下代码:
1 | componentDidCatch(error, info) { |
输入gsbu生成如下代码:
1 | getSnapshotBeforeUpdate(prevProps, prevState) {} |
输入ss生成如下代码:
1 | this.setState({ : }); |
输入ssf生成如下代码:
1 | this.setState(prevState => { |
输入ren生成如下代码:
1 | render() { |
输入rprop生成如下代码:
1 | class extends Component { |
输入hoc生成如下代码:
1 | function () { |