zoukankan      html  css  js  c++  java
  • Vscode开发工具中的Simple React Snippets插件,对React开发有哪些便捷

    Vscode插件搜索Simple React Snippets,点击安装,即可使用,常用快捷键如下:

    (二) 简单举例如下:

    imr - Import React
    import React from 'react';
    imrc - Import React, Component
    import React, { Component } from 'react';
    impt - Import PropTypes
    import PropTypes from 'prop-types';
    impc - Import PureComponent
    import React, { PureComponent } from 'react';
    cc - Class Component
    class | extends Component {
      state = { | },
      render() {
        return ( | );
      }
    }
    
    export default |;
    ccc - Class Component With Constructor
    class | extends Component {
      constructor(props) {
        super(props);
        this.state = { | };
      }
      render() {
        return ( | );
      }
    }
    
    export default |;
    sfc - Stateless Function Component
    const | = props => {
      return ( | );
    };
    
    export default |;
    cdm - componentDidMount
    componentDidMount() {
      |
    }
    cwm - componentWillMount
    //WARNING! To be deprecated in React v17. Use componentDidMount instead.
    componentWillMount() {
      |
    }
    cwrp - componentWillReceiveProps
    //WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
    componentWillReceiveProps(nextProps) {
      |
    }
    gds - getDerivedStateFromProps
    static getDerivedStateFromProps(nextProps, prevStat) {
      |
    }
    scu - shouldComponentUpdate
    shouldComponentUpdate(nextProps, nextState) {
      |
    }
    cwu - componentWillUpdate
    //WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
    componentWillUpdate(nextProps, nextState) {
      |
    }
    cdu - componentDidUpdate
    componentDidUpdate(prevProps, prevState) {
      |
    }
    cwun - componentWillUnmount
    componentWillUnmount() {
      |
    }
    cdc - componentDidCatch
    componentDidCatch(error, info) {
      |
    }
    gsbu - getSnapshotBeforeUpdate
    getSnapshotBeforeUpdate(prevProps, prevState) {
      |
    }
    ss - setState
    this.setState({ | : | });
    ssf - Functional setState
    this.setState(prevState => {
      return { | : prevState.| }
    });
    ren - render
    render() {
      return (
        |
      );
    }
    rprop - Render Prop
    class | extends Component {
      state = { | },
      render() {
        return this.props.render({
          |: this.state.|
        });
      }
    }
    
    export default |;
    hoc - Higher Order Component
    function | (|) {
      return class extends Component {
        constructor(props) {
          super(props);
        }
    
        render() {
          return < | {...this.props} />;
        }
      };
    }
  • 相关阅读:
    STL源码剖析之_allocate函数
    PAT 1018. Public Bike Management
    PAT 1016. Phone Bills
    PAT 1012. The Best Rank
    PAT 1014. Waiting in Line
    PAT 1026. Table Tennis
    PAT 1017. Queueing at Bank
    STL源码剖析之list的sort函数实现
    吃到鸡蛋好吃,看看是哪只母鸡下的蛋:好用的Sqlite3
    cJSON
  • 原文地址:https://www.cnblogs.com/linjiu0505/p/11882968.html
Copyright © 2011-2022 走看看