React書寫規范

React項目建議

一.React+ES6+Redux+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                在組件的更新已經同步到DOM 中之后立刻被調用。該方法不會在初始化渲染的時候調用

卸載

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',
    };
  }

 未完，待續....