react 代码片段

I'm a big fan of speeding up every part of your development. If you shave off seconds here and there multiple times a day, you'll save a ton of time over the course of a year.

我非常乐于加速开发的每个部分。 如果您每天在这里或那里多次剃光几秒钟，那么一年中将节省大量时间。

This involves using the keyboard as often as possible and reaching for the mouse as little as possible. It's a goal of mine to do an entire day without touching the mouse. Still haven't gotten there.

这涉及尽可能多地使用键盘，并尽可能少地接触鼠标 。 我的目标是整天不触摸鼠标。 还没到那儿。

Learning vim is a big part to being productive in your editor. Even putting vim in your browser with helps a ton.

学习vim是提高编辑效率的重要部分。 即使使用将vim放入浏览器也可以帮助很多。

Snippets are another way to save time on development. for by is a great way to speed up development.

片段是节省开发时间的另一种方法。 的是加速开发的好方法。

Here's imrc expanded to import React, { Component } from 'react';

这是将imrc扩展为import React, { Component } from 'react';

( )

Simple React Snippets can be found in the VS Code Extension Marketplace:

可以在VS Code扩展市场中找到简单的React代码段： ://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

一个简单的例子 (A Quick Example)

Whenever starting a new React file, I'll use the imr or imrc snippets.

每当启动新的React文件时，我都会使用imr或imrc段。

• imr -> import React from 'react'
  imr > import React from 'react'
• imrc -> import React, { Component } from 'react'
  imrc > import React, { Component } from 'react' imrc import React, { Component } from 'react'

( )

After installing the VS Code Extension (may have to restart VS Code?), you can use the snippets by typing the shortcut and hitting Tab or Enter.

安装VS Code Extension（可能需要重新启动VS Code？）之后，可以通过键入快捷方式并单击Tab或Enter来使用代码段。

Here are the ones I think that are most helpful when starting new files:

以下是我认为在启动新文件时最有用的文件：

imr-导入React (imr - Import React)

import React from 'react';

imrc-导入React和组件 (imrc - Import React and Component)

import React, {
      Component } from 'react';

cc-制作类组件并导出 (cc - Make a Class Component and export)

class | extends Component {
       state = {
      | },  render() {
         return ( | );  }}export default |;

sfc-制作无状态功能组件 (sfc - Make a stateless function component)

const | = props => {
       return ( | );};export default |;

CDM-componentDidMount (cdm - componentDidMount)

componentDidMount() {
       |}

cdu-componentDidUpdate (cdu - componentDidUpdate)

componentDidUpdate(prevProps, prevState) {
       |}

ss-setState (ss - setState)

this.setState({
      | : | });

任-渲染 (ren - render)

render() {
       return (    |  );}

( )

There are a few more snippets that you can use that you can find on the .

您还可以在上找到更多可用的摘录。

翻译自:

react 代码片段