02 | 以组件方式考虑UI的构建

react入门到精通 react

案例1：以组件思想构建页面

如何理解组件

组件状态有两种：
注意：props用来传值, state用来维护数据

创建一个简单的组件

React快捷键

Snippets
Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.
Trigger Content
rcc→    class component skeleton
rrc→    class component skeleton with react-redux connect
rrdc→   class component skeleton with react-redux connect and dispatch
rccp→   class component skeleton with prop types after the class
rcjc→   class component skeleton without import and default export lines
rcfc→   class component skeleton that contains all the lifecycle methods
rwwd→   class component without import statements
rpc→    class pure component skeleton with prop types after the class
rsc→    stateless component skeleton
rscp→   stateless component with prop types skeleton
rsf→    stateless named function skeleton
rsfp→   stateless named function with prop types skeleton
rsi→    stateless component with prop types and implicit return
fcc→    class component with flow types skeleton
fsf→    stateless named function skeleton with flow types skeleton
fsc→    stateless component with flow types skeleton
rpt→    empty propTypes declaration
rdp→    empty defaultProps declaration
con→    class default constructor with props
conc→   class default constructor with props and context
est→    empty state object
cwm→    componentWillMount method
cdm→    componentDidMount method
cwr→    componentWillReceiveProps method
scu→    shouldComponentUpdate method
cwup→   componentWillUpdate method
cdup→   componentDidUpdate method
cwun→   componentWillUnmount method
gsbu→   getSnapshotBeforeUpdate method
gdsfp→  static getDerivedStateFromProps method
cdc→    componentDidCatch method
ren→    render method
sst→    this.setState with object as parameter
ssf→    this.setState with function as parameter
props→  this.props
state→  this.state
bnd→    binds the this of method inside the constructor
disp→   MapDispatchToProps redux function