React规范（一）

墨蓝 2022-05-25 00:20 127阅读 0赞

一.React+ES6+ant-design+webpack

二.建议加入eslint插件到编辑器中，帮助我们检查Javascript编程时的语法错误

基础规范

component 文件夹中，展示组件文件名，样式文件名，采用大驼峰命名，如：Login.js 、Login.less

containers  文件夹中，容器组件文件名，采用大驼峰命名，如：Login.js

对应的展示组件和容器组件最好命名一致，便于查找和管理

Component 展示组建书写规范

一.创建展示组建

![复制代码][copycode.gif]

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初始化。

![复制代码][copycode.gif]

// 初始化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',
        };
      }

![复制代码][copycode.gif]

[copycode.gif]: /images/20220525/10ea5f723ea44eb1b6dbb225a0daf4a4.png