摘要：檢查空值不要去檢查是否存在某個(gè)值，快使用。當(dāng)你的值是對(duì)象或者數(shù)組時(shí)，使用聲明嵌套數(shù)據(jù)的預(yù)期類型。命名事件可以使用自定義事件替代預(yù)設(shè)的事件名。

原文：react-patterns

class definition

constructor

event handlers

"component" lifecycle

getters

render

defaultProps

proptypes

class Person extends React.Component {
  constructor (props) {
    super(props);

    this.state = { smiling: false };

    this.handleClick = () => {
      this.setState({smiling: !this.state.smiling});
    };
  }

  componentWillMount () {
    // add event listeners (Flux Store, WebSocket, document, etc.)
  },

  componentDidMount () {
    // React.getDOMNode()
  },

  componentWillUnmount () {
    // remove event listeners (Flux Store, WebSocket, document, etc.)
  },

  get smilingMessage () {
    return (this.state.smiling) ? "is smiling" : "";
  }

  render () {
    return (
      

        {this.props.name} {this.smilingMessage}
      
    );
  },
}

Person.defaultProps = {
  name: "Guest"
};

Person.propTypes = {
  name: React.PropTypes.string
};

當(dāng)有2個(gè)以上屬性時(shí)，就換行顯示

// bad


// good

// bad


// good

使用getters方法代替定義依賴屬性

// bad
  firstAndLastName () {
    return `${this.props.firstName} ${this.props.lastname}`;
  }

  // good
  get fullName () {
    return `${this.props.firstName} ${this.props.lastname}`;
  }

使用getters方法代替定義依賴狀態(tài)，注意為了提高可讀性需要在命名時(shí)加上一個(gè)動(dòng)詞前綴。

// bad
happyAndKnowsIt () {
  return this.state.happy && this.state.knowsIt;
}

// good
get isHappyAndKnowsIt () {
  return this.state.happy && this.state.knowsIt;
}

這些方法必須返回boolean類型

保證渲染邏輯都寫在render方法里

// bad
renderSmilingStatement () {
  return {(this.state.isSmiling) ? " is smiling." : ""};
},

render () {
  return 
{this.props.name}{this.renderSmilingStatement()}
;
}

// good
render () {
  return (
    

      {this.props.name}
      {(this.state.smiling)
        ? is smiling
        : null
      }
    
  );
}

用定義的組件組成視圖。不要?jiǎng)?chuàng)建混雜著布局和功能的一次性組件

// bad
class PeopleWrappedInBSRow extends React.Component {
  render () {
    return (
      

        
      
    );
  }
}

// good
class BSRow extends React.Component {
  render () {
    return 
{this.props.children}
;
  }
}

class SomeView extends React.Component {
  render () {
    return (
      
        
      
    );
  }
}

容器組件負(fù)責(zé)獲取數(shù)據(jù)并交付給相應(yīng)的子組件渲染，僅此而已。— Jason Bonta

// bad
// CommentList.js

class CommentList extends React.Component {
  getInitialState () {
    return { comments: [] };
  }

  componentDidMount () {
    $.ajax({
      url: "/my-comments.json",
      dataType: "json",
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }

  render () {
    return (
      

        {this.state.comments.map(({body, author}) => {
          return 
{body}—{author}
;
        })}
      
    );
  }
}

//good
// CommentList.js

class CommentList extends React.Component {
  render() {
    return (
      

        {this.props.comments.map(({body, author}) => {
          return 
{body}—{author}
;
        })}
      
    );
  }
}
// CommentListContainer.js

class CommentListContainer extends React.Component {
  getInitialState () {
    return { comments: [] }
  }

  componentDidMount () {
    $.ajax({
      url: "/my-comments.json",
      dataType: "json",
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }

  render () {
    return ;
  }
}

相關(guān)鏈接：
Container Components
React.js Conf 2015 - Making your app fast with high-performance components

不要在render中緩存狀態(tài)

// bad
render () {
  let name = `Mrs. ${this.props.name}`;

  return 
{name}
;
}

// good
render () {
  return 
{`Mrs. ${this.props.name}`}
;
}

// best
get fancyName () {
  return `Mrs. ${this.props.name}`;
}

render () {
  return 
{this.fancyName}
;
}

這里多半是出于代碼風(fēng)格的考慮，不過(guò)還是保持比較好，我懷疑也可能跟性能有關(guān)。

不要把復(fù)合條件判斷放在render里。

// bad
render () {
  return 
{if (this.state.happy && this.state.knowsIt) { return "Clapping hands" }
;
}

// better
get isTotesHappy() {
  return this.state.happy && this.state.knowsIt;
},

render() {
  return 
{(this.isTotesHappy) && "Clapping hands"}
;
}

這里最好的解決方案是使用容器組件來(lái)管理你的狀態(tài)然后在通過(guò)屬性（props）往下層傳遞。

不要去檢查是否存在某個(gè)prop值，快使用defaultProps。

// bad
render () {
  if (this.props.person) {
    return 
{this.props.person.firstName}
;
  } else {
    return null;
  }
}

// good
class MyComponent extends React.Component {
  render() {
    return 
{this.props.person.firstName}
;
  }
}

MyComponent.defaultProps = {
  person: {
    firstName: "Guest"
  }
};

當(dāng)你的值是對(duì)象或者數(shù)組時(shí)，使用 PropTypes.shape聲明嵌套數(shù)據(jù)的預(yù)期類型。

不要通過(guò)props值去設(shè)置state，除非明顯是個(gè)初始值。

// bad
getInitialState () {
  return {
    items: this.props.items
  };
}

// good
getInitialState () {
  return {
    items: this.props.initialItems
  };
}

詳細(xì)請(qǐng)閱讀官網(wǎng)的Props in getInitialState Is an Anti-Pattern

// bad
punchABadger () { /*...*/ },

render () {
  return 
;
}

// good
handleClick () { /*...*/ },

render () {
  return 
;
}

處理方法的命名必須：

第一個(gè)單詞為handle

最后一個(gè)單詞為要響應(yīng)的事件（比如Click，Change）

現(xiàn)在時(shí)態(tài)
如果為了避免命名沖突，你可以在handle和事件名中間加入其他信息。比如，你可以定義handleNameChange 和handleAgeChange來(lái)區(qū)分onChange的不同響應(yīng)處理。不過(guò)當(dāng)你這樣做的時(shí)候，你要問(wèn)問(wèn)自己是否需要一個(gè)新的組件了。

可以使用自定義事件替代預(yù)設(shè)的事件名。

class Owner extends React.Component {
  handleDelete () {
    // handle Ownee"s onDelete event
  }

  render () {
    return ;
  }
}

class Ownee extends React.Component {
  render () {
    return 
;
  }
}

Ownee.propTypes = {
  onDelete: React.PropTypes.func.isRequired
};

使用PropTypes可以預(yù)先定義屬性的類型，可以在之后獲得一些有意義的警告信息。

MyValidatedComponent.propTypes = {
  name: React.PropTypes.string
};

MyValidatedComponent的name屬性值如果不是string類型的話， 會(huì)輸出警告。

// Warning: Invalid prop `name` of type `number` supplied to `MyValidatedComponent`, expected `string`.

在這里也可以設(shè)置屬性是否是必須存在的。

MyValidatedComponent.propTypes = {
  name: React.PropTypes.string.isRequired
}

這個(gè)組件會(huì)驗(yàn)證是否存在name屬性。

// Warning: Required prop `name` was not specified in `Person`

相關(guān)鏈接：Prop Validation

要在使用React中使用特殊符號(hào)，請(qǐng)使用String.fromCharCode()。

// bad
PiCO · Mascot

// nope
PiCO · Mascot

// good
{"PiCO " + String.fromCharCode(183) + " Mascot"}

// better
{`PiCO ${String.fromCharCode(183)} Mascot`}

相關(guān)鏈接：HTML Entities

瀏覽器認(rèn)為你是愚蠢的，但是React不這么人為。請(qǐng)始終為你的table組件添加tbody。

// bad
render () {
  return (
    ...
  );
}

// good
render () {
  return (
    ...
  );
}

瀏覽器會(huì)自動(dòng)插入tbody當(dāng)你忘了寫它。React則不會(huì)，這樣會(huì)給你的代碼帶來(lái)混亂，請(qǐng)記住使用tbody。

使用classNames管理你的classes邏輯。

// bad
get classes () {
  let classes = ["MyComponent"];

  if (this.state.active) {
    classes.push("MyComponent--active");
  }

  return classes.join(" ");
}

render () {
  return 
;
}

// good
render () {
  let classes = {
    "MyComponent": true,
    "MyComponent--active": this.state.active
  };

  return 
;
}

相關(guān)鏈接：Class Name Manipulation