React最佳实践

  React       2017-01-08

整体结构

  1. class List extends React.Component {
  2. static propTypes = {
  3. size: React.PropTypes.oneOf(['large', 'normal', 'small']),
  4. shape: React.PropTypes.oneOf(['default', 'primary', 'ghost'])
  5. disabled: React.PropTypes.bool
  6. };
  7. static defaultProps = {
  8. size: 'normal',
  9. shape: 'default',
  10. disabled: false
  11. };
  12. constructor(props) {
  13. super(props);
  14. this.state = {
  15. foo: 'bar'
  16. };
  17. }
  18. render() {
  19. return <div>{this.state.foo}</div>;
  20. }
  21. }

基础规范

  • React组件文件使用.jsx扩展名;
  • 对外暴露的文件名使用index
  • React组件名使用驼峰命名,首字母大写,实例名首字母小写;
  • 每个文件只写一个组件,但多个无状态组件可以放在一个文件中;

方法顺序

  1. propTypes
  2. defaultProps
  3. constructor()
  4. getChildContext()
  5. componentWillMount()
  6. componentDidMount()
  7. componentWillReceiveProps()
  8. shouldComponentUpdate()
  9. componentWillUpdate()
  10. componentDidUpdate()
  11. componentWillUnmount()
  12. render()

引号

JSX属性值使用双引号,其他均使用单引号;

  1. <Foo bar="bar" />
  2. <Foo style={{ left: '20px' }} />

空格

  • 总是在自闭合的标签/>前加一个空格;
  • 不要在JSX{}引用括号里两边加空格。
  1. <Foo />
  2. <Foo bar={baz} />

括号

将多行的JSX标签写在()里;

  1. render() {
  2. return (<MyComponent className="long body" foo="bar">
  3. <MyChild />
  4. </MyComponent>);
  5. }

标签

对于没有子元素的标签来说总是闭合的;

  1. <Foo className="stuff" />

组件定义

如果有内部状态、方法或是要对外暴露ref的组件,使用ES6 Class写法;

  1. class List extends React.Component {
  2. // ...
  3. render() {
  4. return <div>{this.state.hello}</div>;
  5. }
  6. }

否则的话,使用函数写法;

  1. const List = ({ hello }) => (
  2. <div>{hello}</div>
  3. );

PropsType 和 DefaultProps 写法

如果有内部状态、方法或是要对外暴露ref的组件,使用ES7类静态属性写法;
JSX属性名使用驼峰式风格。
如果属性值为true, 可以直接省略。

  1. class Button extends Component {
  2. static propTypes = {
  3. size: React.PropTypes.oneOf(['large', 'normal', 'small']),
  4. shape: React.PropTypes.oneOf(['default', 'primary', 'ghost'])
  5. disabled: React.PropTypes.bool
  6. };
  7. static defaultProps = {
  8. size: 'normal',
  9. shape: 'default',
  10. disabled: false
  11. };
  12. render() {
  13. // ....
  14. }
  15. }

否则的话,使用类静态属性写法

  1. const HelloMessage = ({ name }) => {
  2. return <div>Hello {name}</div>;
  3. };
  4. HelloMessage.propTypes = {
  5. name: React.PropTypes.string
  6. };
  7. HelloMessage.defaultProps = {
  8. name: 'vic'
  9. };

State 写法

使用ES7实例属性提案声明写法或者构造函数声明写法,后者适合需要进行一定计算后才能初始化state的情况。

  1. class Some extends Component {
  2. state = {
  3. foo: 'bar'
  4. };
  5. // ....
  6. }
  7. class Some extends Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = {
  11. foo: 'bar'
  12. };
  13. }
  14. // ....
  15. }

函数绑定

在使用ES6编写React时,不会将方法内部的作用域自动绑定到组件的引用上。
为此有以下几种写法仅供参考:

参考

本文最后更新于2017-01-08 00:41:49