ReactNative 代码规范

最新推荐文章于 2023-06-27 19:35:04 发布

原创最新推荐文章于 2023-06-27 19:35:04 发布 · 492 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react native #代码规范

本文介绍了React组件的最佳实践，包括组件的定义方式、属性类型检查、默认属性设置、命名规范及代码组织等方面的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、每个文件只写一个组件，但是多个无状态组件可以放在单个文件中；
2、有内部状态，方法或要对外暴露ref的组件，用类式组件；
3、无内部状态，方法或无需对外暴露ref的组件，用函数式组件；
4、有内部状态，方法或要对外暴露ref的组件，使用es7类静态属性；

class Button extends Component {
    static propTypes = {
        size: React.PropTypes.oneOf(['large', 'normal', 'small']),
        shape: React.PropTypes.oneOf(['default', 'primary', 'ghost']),
        disabled: React.PropTypes.bool
    };

    static defaultProps = {
        size: 'normal',
        shape: 'default',
        disabled: false
    };
}

5、无内部状态，方法或无需对外暴露ref的组件，使用类静态属性写法；

const HelloMessage = ({name}) => {
  return Hello {name} ;
}
HelloMessage.propTypes = {
  name: React.PropTypes.string
};

HelloMessage.defaultProps = {
  name: 'camille666'
}

6、PropTypes必须；
7、为了调试方便，在组件最上方写displayName；

class Some extends Component {
  static displayName = 'Some';
}

8、react组件文件用jsx，用大驼峰命名jsx文件；
9、jsx的属性值总是使用双引号，其他用单引号；

10、在自闭合组件前加一个空格；

11、不要在jsx{}里两边加空格；

12、不要在等号两边加空格；

13、jsx属性名总是使用驼峰式风格；
14、如果属性值为true，可以直接省略；

15、遍历数组，输出相同的React组件，属性key必须；

[, , ]

16、总是在Refs里使用回调函数；

17、将多行的jsx标签写在()里，单行可忽略()；

// 在render方法中
return dddd;
return (我是一个盒子)

18、render方法必须有值返回；
19、没有子元素，自闭合；

20、按照以下顺序排序方法；

A、static methods and properties
B、lifecycle methods: displayName, propTypes, contextTypes , childContextTypes, mixins, statics, defaultProps, constructor, getDefaultProps, getInitialState,  state, getChildContext, componentWillMount, componentDidMount, componentWillReceiveProps, shouldComonentUpdate, componentWillUpdate, componentDidUpdate, componentWillUnmount
C、custom methods
D、render method

21、不要在componentDidMount或componentDidUpdate中调用setState，除非在绑定回调函数中设置State；

class Hello extends Component {
    componentDidMount() {
        this.onMount(newName => {
            this.setState({
                name: newName
            });
        });
    }
    render() {
        return Hello {this.state.name};
    }
}