样式 cheatsheet

Three-column

Introduction

ThePapers.cn (thepapers)
ThePapers.cn (thepapers)

Markdown

这是ThePapers.cn的页面样式、格式
这是ThePapers.cn的页面样式、格式
这是~~ThePapers.cn~~的页面样式、格式
这是 ThePapers.cn的页面样式、格式
这是==ThePapers.cn==的页面样式、==格式==

Letax

\[\nabla_\boldsymbol{x} J(\boldsymbol{x})\]

See: ONline latexeditor

One-column

One column

Two-column

Column one

Column two

Three-column

Column one

2 Big Red

line with comment..

Column two

Column Three

1
2 line with highlight
3 line with highlight
4

line with comment..

two column with table

Mounting

Method	Description
`constructor` (props)	Before rendering #
`componentWillMount()`	Don’t use this #
`render()`	Render #
`componentDidMount()`	After rendering (DOM available) #
`componentWillUnmount()`	Before DOM removal #
`componentDidCatch()`	Catch errors (16+) #

Set initial the state on constructor(). Add DOM event handlers, timers (etc) on componentDidMount(), then remove them on componentWillUnmount().

Updating

Method	Description
`componentDidUpdate` (prevProps, prevState, snapshot)	Use `setState()` here, but remember to compare props
`shouldComponentUpdate` (newProps, newState)	Skips `render()` if returns false
`render()`	Render
`componentDidUpdate` (prevProps, prevState)	Operate on the DOM here

Called when parents change properties and .setState(). These are not called for initial renders.

See: Component specs

Property validation

PropTypes

import PropTypes from 'prop-types'

See: Typechecking with PropTypes

Key	Description
`any`	“Anything”

Basic

Key	Description
`string`
`number`	11
`func`	Function
`bool`	True or false

Enum

Key	Description
`oneOf`(any)	Enum `types`
`oneOfType`(type array)	Union

Basic types

MyComponent.propTypes = {
  email:      PropTypes.string,
  seats:      PropTypes.number,
  callback:   PropTypes.func,
  isClosed:   PropTypes.bool,
  any:        PropTypes.any
}

Arrays and objects

MyCo.propTypes = {
  list: PropTypes.array,
  ages: PropTypes.arrayOf(PropTypes.number),
  user: PropTypes.object,
  user: PropTypes.objectOf(PropTypes.number),
  message: PropTypes.instanceOf(Message)
}

MyCo.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age:  PropTypes.number
  })
}

Use .array[Of], .object[Of], .instanceOf, .shape.

CUSTOM Use .array[Of], .object[Of], .instanceOf, .shape.

Also see

ThePapers.cn (thepapers)