React 組件的三種方式 詳解

React 組件

關於創建項目，可以選擇手動創建和通過腳手架來創建。這裏給一個傳送門 → 通過React 腳手架創建項目

在運行項目的時候，可能出遇到一個錯誤yarn&node-sass模塊下載失敗,那麼如何解決問題呢，這裏給一個傳送門 weixin_45072479

我們先來編寫第一個 react 程序

// 從 react 的包當中引入了 React。只要你要寫 React.js 組件就必須引入React, 因爲react裏有一種語法叫JSX，稍後會講到JSX，要寫JSX，就必須引入React
import React from 'react'
// ReactDOM 可以幫助我們把 React 組件渲染到頁面上去，沒有其它的作用了。它是從 react-dom 中引入的，而不是從 react 引入。
import ReactDOM from 'react-dom'

// ReactDOM裏有一個render方法，功能就是把組件渲染並且構造 DOM 樹，然後插入到頁面上某個特定的元素上
ReactDOM.render(
// 這裏就比較奇怪了，它並不是一個字符串，看起來像是純 HTML 代碼寫在 JavaScript 代碼裏面。語法錯誤嗎？這並不是合法的 JavaScript 代碼, “在 JavaScript 寫的標籤的”語法叫 JSX- JavaScript XML。
  <h1>歡迎進入React的世界</h1>,
// 渲染到哪裏
  document.getElementById('root')
)

接下來就是創建組件的方式，分爲以下幾點：

1. 函數式定義的無狀態組件
2. es5原生方式React.createClass定義的組件
3. es6形式的extends React.Component定義的組件

下面簡單介紹下有何不同之處。

1、無狀態函數式組件

通過函數形式或者ES6 箭頭 function的形式在創建，並且該組件是無state狀態的。
創建純展示組件，只負責根據傳入的props來展示，不涉及到要state狀態的操作，是一個只帶有一個render方法的組件類

創建形式如下：

import React from "react";
import ReactDOM from "react-dom";

const App = props => {
  return <h1> 歡迎進入 {props.name} 的世界</h1>;
};

ReactDOM.render(<App name="react" />, document.getElementById("root"));

無狀態組件的創建形式使代碼的可讀性更好，並且減少了大量冗餘的代碼,在,開發過程中，儘量使用無狀態組件。

其特點如下：

• 組件不會被實例化，整體渲染性能得到提升
• 組件不能訪問this對象
• 組件無法訪問生命週期的方法
• 無狀態組件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用

2、React.createClass

React.createClass是react剛開始推薦的創建組件的方式，這是ES5的原生的JavaScript來實現的React組件。

ps：React 版本16以後，React.createClass({})創建組件的方式失效。

需要以另一種形式創建，其形式如下：

import React from "react";
import ReactDOM from "react-dom";
import createClass from "create-react-class";

const App = createClass({
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
ReactDOM.render(<App name="react" />, document.getElementById("root"));

這個方式創建組件，需要單獨安裝create-react-class，否則會出現問題。

• React.createClass會自綁定函數方法導致不必要的性能開銷
• React.createClass的mixins不夠自然、直觀

與無狀態組件相比，React.createClass和後面要描述的React.Component都是創建有狀態的組件，這些組件是要被實例化的，並且可以訪問組件的生命週期方法。

3.React.Component

React.Component是以ES6的形式來創建react的組件的，是React目前極爲推薦的創建有狀態組件的方式，最終會取代React.createClass形式；相對於 React.createClass可以更好實現代碼複用。

import React, { Component } from "react";
import ReactDOM from "react-dom";
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return <div>這裏是</div>;
  }
}
ReactDOM.render(<Index name="react" />, document.getElementById("root"));

需要注意的是在書寫construstor之後，裏面一定要寫一個super()，否則會出現問題。

以上的方式也可以單獨提煉出一個單文件組件，但要注意！注意！注意！組件名必須大寫，否則報錯。

加餐！！！

下面來講一下如何用 JavaScript 對象來表現一個 DOM 元素的結構
代碼如下

<div class='app' id='appRoot'>
  <h1 class='title'>歡迎進入React的世界</h1>
  <p>
    React.js 是一個幫助你構建頁面 UI 的庫
  </p>
</div>

上面這個 HTML 所有的信息我們都可以用 JavaScript 對象來表示

{
  tag: 'div',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['歡迎進入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一個構建頁面 UI 的庫']
    }
  ]
}

但是用 JavaScript 寫起來太長了，結構看起來又不清晰，用 HTML 的方式寫起來就方便很多了。

於是 React.js 就把 JavaScript 的語法擴展了一下，讓 JavaScript 語言能夠支持這種直接在 JavaScript 代碼裏面編寫類似 HTML 標籤結構的語法，這樣寫起來就方便很多了。編譯的過程會把類似 HTML 的 JSX 結構轉換成 JavaScript 的對象結構。
下面代碼:

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      <div className='app' id='appRoot'>
        <h1 className='title'>歡迎進入React的世界</h1>
        <p>
          React.js 是一個構建頁面 UI 的庫
        </p>
      </div>
    )
  }
}

ReactDOM.render(
	<App />,
  document.getElementById('root')
)

編譯之後將得到這樣的代碼:

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "div",
        {
          className: 'app',
          id: 'appRoot'
        },
        React.createElement(
          "h1",
          { className: 'title' },
          "歡迎進入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一個構建頁面 UI 的庫"
        )
      )
    )
  }
}

ReactDOM.render(
	React.createElement(App),
  document.getElementById('root')
)

4.函數this

React.createClass創建的組件，其每一個成員函數的this都有React自動綁定，任何時候使用，直接使用this.method即可，函數中的this會被正確設置。
React.Component創建的組件，其成員函數不會自動綁定this，需要開發者手動綁定，否則this不能獲取當前組件實例對象。
React.Component三種手動綁定this的方法:

1. 在構造函數中綁定
2. 使用bind綁定
3. 使用arrow function綁定

4.1、在構造函數中綁定

constructor(props) {
	 super(props); 
	 this.Enter = this.Enter.bind(this);
 }

4.2、使用bind綁定

<div onKeyUp={this.Enter.bind(this)}></div>

4.2、使用arrow function綁定

<div onKeyUp={(event)=>this.Enter(event)}></div>

小小總結：
1.只要有可能，儘量使用無狀態組件創建形式,否則（如需要state、生命週期方法等），使用React.Component這種es6形式創建組件.
2.綁定this推薦使用在構造函數裏進行