一.React+ES6+ant-design+webpack

二.建議加入eslint外掛到編輯器中，幫助我們檢查Javascript程式設計時的語法錯誤

基礎規範

component 資料夾中，展示元件檔名，樣式檔名，採用大駝峰命名，如：Login.js 、Login.less

containers  資料夾中，容器元件檔名，採用大駝峰命名，如：Login.js 

對應的展示元件和容器元件最好命名一致，便於查詢和管理

Component 展示組建書寫規範

一.建立展示組建

import React from 'react';
import PropTypes from 'prop-types';

class Demo extends React.Component {
  // prop 初始化
  static propTypes = {
  }
  static defaultProps = {
  }
  // state 初始化
  constructor(props) {
    super(props);
    this.state = { demo: true }; // Init state in the constructor
  }

　 // 生命週期方法
  componentWillMount () {}

  componentWillReceiveProps(nextProps) {}
  componentWillUnmount () {}
  // 自定義方法 

  handleClick = () => { this.state({ demo: !this.state.demo }) }

  render() {
    return (
      <div onClick={this.handleClick}>Demo</div>
    );
  }
}

export default Demo;
 

說明： 

1.事件處理採用ES6中箭頭函式寫法：   

 handleClick = () => {}

2.生命週期：

初始化

render                  渲染元件，必須的方法

getInitialState      只元件掛在前執行一次，返回的只相當於初始化state

getDefaultProps  在元件類建立的時候呼叫一次，然後返回值被快取下來

propTypes           物件允許驗證傳入到元件的props

statics                  物件允許你定義靜態的方法，這些靜態的方法可以在元件類上呼叫

掛載

componentWillMount      伺服器端和客戶端都只調用一次，在初始化渲染執行之前立刻呼叫。

componentDidMount       在初始化渲染執行之後立刻呼叫一次，僅客戶端有效（伺服器端不會呼叫）

更新

componentWillReceiveProps      在元件接收到新的props 的時候呼叫。在初始化渲染的時候，該方法不會呼叫

shouldComponentUpdate           在接收到新的props 或者 state，將要渲染之前呼叫。該生命週期可用於做效能優化

componentWillUpdate                在接收到新的props 或者 state 之前立刻呼叫。在初始化渲染的時候該方法不會被呼叫

componentDidUpdate

解除安裝

componentWillUnmount            在元件從DOM 中移除的時候立刻被呼叫

詳細請參考  http://blog.csdn.net/limm33/article/details/50942808

二.React元件中propTypes初始化，state初始化。

 // 初始化prop為指定的 JS 屬性型別
  static propTypes = {
    // isRequired指定該prop是必須的，非必須prop可以不加
    age: React.PropTypes.number.isRequired,                        // 數字
    sex: React.PropTypes.func.bool.isRequired,                     // 布林
    name: React.PropTypes.string.isRequired,                       // 字串
    list: React.PropTypes.array.isRequired,                        // 陣列
    mylist: React.PropTypes.arrayOf.isRequired,                    // 自定義陣列
    submit: React.PropTypes.func.isRequired,                       // 方法
    Object: React.PropTypes.object.isRequired,                     // 物件
    form: React.PropTypes.shape({                                  // 自定義物件
      validateFields: PropTypes.func.isRequired,
      getFieldDecorator: PropTypes.func.isRequired,
    }).isRequired, 
    Node: React.PropTypes.node,                                    // 數字，字串，DOM元素
    Element: React.PropTypes.element,                              // React元素
    Any: React.PropTypes.any,                                      // 任意型別          
  }
  // prop預設值，非必須prop可以不寫
  static defaultProps = {
    form: {},
    list: [],
    mylist: undefined,
    age: undefined,
    sex：undefined,
    name: undefined,
    submit: () => {},
    submitResult: {},
    Object: undefined
  }
  // 初始化state
  constructor(props) {
    super(props);
    this.state = {
      orderlist: props.list,
      type: 'text',
    };
  }