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

 未完，待续....