Component

在前面的章節中，咱們學習瞭如何使用jsx語法建立基本元素，實際上，在React中，還能夠經過組件的方式來構建用戶界面，下面咱們就來看一下，如何來定義組件。

組件定義

function

第一種方式，咱們可使用function來定義一個組件，如：

const Welcome = props => {
  return <h1>hello, {props.name}！</h1>
}

Welcome函數就是一個React組件，這個函數接收props做爲參數，用來標誌組件須要的外部數據，同時，組件返回了一個React元素。

class

第二種方式，咱們可使用ES6中的class來定義：

class Welcome extends React.Component {
  render() {
    return <h1>hello, {this.props.name}！</h1>
  }
}

在class定義的組件中，咱們首先要繼承React.Component，繼承Component能夠初始化組件的props，而後還須要實現一個render方法，用來返回這個組件的結構，也就是使用function定義組件的那個返回值。若是還須要使用到外部數據的話，能夠經過this.props來獲取。

對於React來講，這兩種方式是等價的，可是經過class定義的組件還有一些額外的特性，咱們會在後面的章節介紹。

組件渲染

咱們知道，React完成一個基本元素的渲染，首先須要經過React.createElement建立一個描述對象，而後ReactDOM再根據這個描述對象，生成真實DOM渲染在頁面上。實際上，針對組件的渲染也是這樣。所以，咱們首先要建立組件的描述對象：

const element = React.createElement(Welcome, {
  name: "Sara"
})

React.createElement不但能夠建立基本元素，還能夠針對組件來進行建立。

在控制檯上打印這個對象，能夠看到，該對象的type屬性就是我們剛剛建立的Welcome類，props屬性就是這個組件所需的外部參數。

除了能夠經過React.createElement來建立組件的描述對象之外，咱們還可使用jsx：

const element = <Welcome name="Sara" />

使用 jsx 的話，咱們能夠直接將須要傳遞給組件的數據，定義在標籤身上，而後babel在解析時，會把這個標籤上的屬性收集起來，當成props傳遞給組件。組件內部就能夠經過this.props訪問了。

最後，咱們再將這個元素交給ReactDOM渲染出來：

ReactDOM.render(element, document.querySelector("#root"))

複合組件

在組件中，除了返回一些基本元素之外，還能夠嵌套其餘的組件，咱們稱之爲複合組件，例如：

class App extends React.Component {
  render() {
    return (
      <div> {/* 頂級組件 */}
        <Welcome name="Sara" />
        <Welcome name="Cahal" />
        <Welcome name="Edite" />
      </div>
    )
  }
}
ReactDOM.render(<App />, document.querySelector("#root"))

以上示例，在<App />組件中，屢次使用 <Welcome />組件。當一個組件是由多個子元素或者組件組成的時候，全部子元素必須包含在一個頂級組件中，因此咱們不能這樣寫：

// 錯誤示範，缺乏頂級組件
class App extends React.Component {
  render() {
    return (
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    )
  }
}

控制檯提示：

所以，咱們建立的組件必須有一個頂級組件給包裹起來。那這時，頁面渲染出來的真實結構就是這個樣子：

能夠看到，在根元素root下面是一個div，而後纔是多個h1元素。有時候，組件中的這個頂級元素在整個頁面中是多餘的，咱們並不但願在頁面中建立這個節點，這時，咱們可使用React.Fragement來充當頂級元素：

class App extends React.Component {
  render() {
    return (
      <React.Fragment>{/* 頂級組件 */}
        <Welcome name="Sara" />
        <Welcome name="Cahal" />
        <Welcome name="Edite" />
      </React.Fragment>
    )
  }
}

這時，頁面渲染的時候，就不會產生多餘的DOM節點了。

甚至，咱們還能夠直接使用<>...</>來簡化它。

class App extends React.Component {
  render() {
    return (
      <>{/* 頂級組件 */}
        <Welcome name="Sara" />
        <Welcome name="Cahal" />
        <Welcome name="Edite" />
      </>
    )
  }
}

這兩種方式是等價的。

Props

defaultProps

咱們知道，props是組件內部接收外部數據的一種方式，但有時，外部沒有提供有效數據時，有可能會致使組件渲染時出錯，例如：

class Books extends React.Component {
  render() {
    return (
      <>
        <h1>Books:</h1>
        <ul>
          {
            this.props.books.map(item => {
              return <li key={item}>{item}</li>
            })
          }
        </ul>
      </>
    )
  }
}

ReactDOM.render(<Books />, document.querySelector("#root"))

<Books />組件，接收一個數組做爲參數，組件內部迭代數組產生子元素，可是咱們使用<Books />組件時，並無傳遞任何數據給該組件，因此致使this.props.books.map方法調用失敗，爲了防止此類錯誤，React容許咱們給props設置默認值。

/* 定義 props 的默認值 */

// 方式一：
class Books extends React.Component {
  static defaultProps = {
    books: []
  }
  ...
}
// 方式二：
Books.defaultProps = {
  books: []
}

咱們能夠經過設置類的靜態屬性defaultProps，來設置props的默認值。

propTypes

除了給props設置默認值之外，還能夠添加props的類型約束，例如，咱們能夠設置books的類型爲Array:

import PropTypes from 'prop-types';

class Books extends React.Component {
  ...

  static propTypes = {
    books: PropTypes.array
  }
  
  ...

}
ReactDOM.render(<Books books="test" />, document.querySelector("#root"))

React提供了一個PropTypes對象，用來對數據類型進行檢測，在這個示例中，咱們設置了props.books的類型爲PropTypes.array，但實際傳入了一個字符串，控制檯就有如下提示：

如下是PropTypes提供的數據類型：

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // You can declare that a prop is a specific JS type. By default, these
  // are all optional.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // Anything that can be rendered: numbers, strings, elements or an array
  // (or fragment) containing these types.
  optionalNode: PropTypes.node,

  // A React element.
  optionalElement: PropTypes.element,

  // You can also declare that a prop is an instance of a class. This uses
  // JS's instanceof operator.
  optionalMessage: PropTypes.instanceOf(Message),

  // You can ensure that your prop is limited to specific values by treating
  // it as an enum.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // An object that could be one of many types
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // An array of a certain type
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // An object with property values of a certain type
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // You can chain any of the above with `isRequired` to make sure a warning
  // is shown if the prop isn't provided.
  requiredFunc: PropTypes.func.isRequired,

  // A value of any data type
  requiredAny: PropTypes.any.isRequired,

  // You can also specify a custom validator. It should return an Error
  // object if the validation fails. Don't `console.warn` or throw, as this
  // won't work inside `oneOfType`.
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // You can also supply a custom validator to `arrayOf` and `objectOf`.
  // It should return an Error object if the validation fails. The validator
  // will be called for each key in the array or object. The first two
  // arguments of the validator are the array or object itself, and the
  // current item's key.
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};