首頁 > 文章 > web前端 > React元件如何編寫？（代碼）

React元件如何編寫？（代碼）

不言原創: 2018-09-11 15:40:001472瀏覽

本篇文章帶給大家的內容是關於React元件如何寫？（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

如何寫一個React元件

在React的世界裡，通常是用class來宣告一個元件的，它必須繼承自React.Component。
例如下面的程式碼：

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

  /** 组件生命周期钩子函数：在组件挂载完成后立即被调用 */
  componentDidMount() {
    alert("组件挂载完成！");
  }

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

export default MyFirstComponent;

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

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

以上就是一個常規的React元件寫法，不過我們也可以透過觀察上面的程式碼，發現幾個有趣的地方：

##MyFirstComponent中有一個函式componentDidMount是元件生命週期鉤子函式。實際上React為元件設計了一系列的生命週期鉤子函數
MyFirstComponent中有一個特別的函數render()，這個函數把類似html的模板內容jsx當作傳回值。這是一個必須定義的函數，否則React會拋出錯誤
#jsx乍看之下像是一種模板引擎，其實是一種JavaScript的語法擴展，它的核心概念就是著名的all in js，它完全是在JavaScript內部實現的，它和傳統的模板引擎一樣，也可以綁定js表達式
#jsx綁定的資料可以很明顯地看出來自兩個物件：this.state和this.props;this.state是MyFirstComponent內部自訂的元件狀態； this.props是外部憑藉標籤屬性的形式傳進MyFirstComponent內部的數據，類似於函數的傳參；

總結來說，當你掌握了

元件生命週期 JSX 元件狀態state 元件屬性props ，你知道該如何寫元件了。

元件生命週期

官方文件已經有非常詳盡的介紹，這裡不再贅述，請點擊這裡查看組件生命週期的官方文件。

JSX

你可以任意在

JSX當中使用javaScript表達式，在JSX當中的表達式要包含在大括號裡。 例如下面的程式碼：

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

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

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const pElement = {
  type: "p",
  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事件綁定的必須是一個函數對象，不能是字串。

程式碼範例：

<p onClick={this.handleClick}>我是一个按钮</p>

// 也可以向事件回调函数传递参数
<p onClick={(params) => this.handleClick(params)}>我是一个按钮</p>

元件狀態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元件最基本的特點了吧！

React元件如何編寫？ （代碼）

相關文章

React元件如何編寫？（代碼）