如何編寫一個React組件

如何編寫一個React組件

在React的世界裏，一般是用class來聲明一個組件的，它必須繼承自React.Component。
例以下面的代碼：

// MyFirstComponent.jsx
class MyFirstComponent extends React.Component {
  state = {
    text: "Hello React"
  };

  /** 組件生命週期鉤子函數：在組件掛載完成後當即被調用 */
  componentDidMount() {
    alert("組件掛載完成！");
  }

  render() {
    return (
      <div>{this.state.text}, I am {this.props.author}!</div>
    )
  }
}

export default MyFirstComponent;

// index.js
import MyFirstComponent from "MyFirstComponent";

/** 渲染結果：<div>Hello React, I am Shaye!</div> */
ReactDOM.render(<MyFirstComponent author="Shaye"></MyFirstComponent>, document.getElementById("app"));

以上就是一個常規的React組件編寫方式，不過咱們還能夠經過觀察上面的代碼，發現幾個有趣的地方：

1. MyFirstComponent中有一個函數componentDidMount是組件生命週期鉤子函數。實際上React爲組件設計了一系列的生命週期鉤子函數
2. MyFirstComponent中有一個特別的函數render()，這個函數把相似html的模板內容jsx做爲返回值。這是一個必須定義的函數，不然React將拋出錯誤
3. jsx乍看之下像是一種模板引擎，其實是一種JavaScript的語法擴展，它的核心理念就是著名的all in js，它徹底是在JavaScript內部實現的，它和傳統的模板引擎同樣，也能夠綁定js表達式
4. jsx綁定的數據能夠很明顯地看出來自兩個對象：this.state和this.props；this.state是MyFirstComponent內部自定義的組件狀態；this.props是外部憑藉標籤屬性的形式傳進MyFirstComponent內部的數據，相似於函數的傳參；

總結來講，當你掌握了   組件生命週期   JSX   組件狀態state   組件屬性props   ，你就知道該如何編寫React組件了。

組件生命週期

官方文檔已經有很是詳盡的介紹，這裏再也不贅述，請點擊這裏查看組件生命週期的官方文檔。

JSX

你能夠任意地在JSX當中使用javaScript表達式，在JSX當中的表達式要包含在大括號裏。
例以下面的代碼：

<div className={this.state.clname} style={{ fontSize: "20px" }}>{this.state.content} forever</div>

JSX裏的React元素，好比div，最終都會被編譯器轉譯，被某些特定函數處理變成一個輕量的javascript object。好比上面提到的元素div最終會變成以下的object：

// 注意: 如下示例是簡化過的（不表明在 React 源碼中是這樣）
const divElement = {
  type: "div",
  props: {
    // this.state.clname的值
    className: "love",
    style: {
      fontSize: "20px"
    },
    // "you"爲this.state.content的值
    children: ["you", "forever"]
  }
}

React就是經過讀取這些對象來操做DOM並保持數據內容一致。因此，實際上你依然在寫js。因此，class和style必須使用在js中的寫法
好比:class => className
再好比：font-size: 20px; => { fontSize: "20px" }

特別地，React元素的屬性仍然能夠像原生html同樣使用引號來定義以字符串爲值的屬性，例如：className="my-claname"

除了以上所提，JSX的事件綁定與原生html也有一些語法上的不一樣：

• React的事件命名採用駝峯式寫法，而不是小寫。
• React事件綁定的必須是一個函數對象，不能是字符串。

代碼示例：

<div onClick={this.handleClick}>我是一個按鈕</div>

// 也能夠向事件回調函數傳遞參數
<div onClick={(params) => this.handleClick(params)}>我是一個按鈕</div>

組件狀態state

state是私有的，徹底受控於當前組件。既然是狀態，那麼就會有更新的需求，如何更新呢？
代碼示例：

// 對`this.state`或者它的屬性直接`=`賦值，將永遠不會觸發組件渲染，必須使用`setState()`

// 在組件的生命週期鉤子函數中調用this.setState()
componentDidMount() {
  this.setState({
    content: "lalalala"
  })
}

// 在組件的自定義函數中調用this.setState()
handleClick = () => {
  this.setState({
    content: "uauauaua"
  })
}

setState()是React中惟一一個動態更新組件的途徑，當它被調用以後，自身組件以它的全部子組件都將觸發重渲染
特別地，state一樣也能夠做爲屬性傳遞給子組件；
setState()詳細文檔

組件屬性props

props是父組件傳遞下來的數據，通常是來自父組件的state或者組件的其餘成員變量。而且，props是隻讀的，組件永遠沒法修改本身的props。只有在父組件調用setState()以後才能使子組件的屬性發生變化並從新渲染。
props只能從上往下傳，組件也只能修改自身私有的state，意味着整個應用的數據流只能是自上往下的單向數據流

總結

   組件生命週期   JSX   組件狀態state   組件屬性props    再加上一個自上而下的單向數據流，這些即是React組件最基本的特色了吧！