react系列（一）JSX語法、組件概念、生命週期介紹

時間 2019-12-13

標籤 react 系列 jsx 語法組件概念生命週期介紹欄目 React 简体版

原文原文鏈接

JSX

React中，推出了一種新的語法取名爲JSX，它給了JS中寫HTML標籤的能力，不須要加引號。JSX的語法看起來是一種模板，然而它在編譯之後，會轉成JS語法，只是書寫過程當中的語法糖。
JSX的解析器會幫咱們讀取這種語法並加以處理。
下面是一個簡單的例子。javascript

const element = <h1 className="greeting">Hello, world!</h1>;

其實至關於以下的代碼：html

const element = React.createElement({
  'h1',
  {className: 'greeting'},
  'Hello, world!',
  'Xxx'
})

第一個參數是類型，能夠是HTML標籤，也能夠是React組件；第二個參數是props對象；第三個之後參數是children，會按照傳入順序依次排列。
固然第三個參數也能夠傳入數組，若是第三個參數傳入數組，則後面再傳入其餘子節點，就會報錯。
JSX提供了一種HTML和JS混合編寫的能力。在須要使用JS表達式的地方，用一組花括號包裹起來便可：java

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1 className="test">
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('app')
);

因爲class在js中關鍵字，因此使用className去替代。
上面說到了JSX實際上是語法糖，因此若是要循環嵌入列表，能夠直接將列表傳進來：react

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('app')
);

在控制檯中會看到這樣的報錯：es6

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop.

這是因爲react使用virtual dom來渲染真實節點，在列表渲染時，若是每一個item沒有對應的key，react處理起增刪改時就會很慢，因此，渲染列表時，最好給每個item增長一個惟一的key。數組

const listItems = numbers.map((number, index) =>
  <li key={index}>{number}</li>
);

組件

React中最重要的概念就是組件。性能優化

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called 「props」) and return React elements describing what should appear on the screen.app

組件能夠看作是一個函數，指定了輸入（props），就會給出輸出（一個React元素）。
建立組件有兩種方法：
1.函數dom

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2.es6的類函數

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

第二種方法建立的組件，能夠擁有內部狀態（state）和生命週期函數。
若是隻是展現信息，沒有複雜的操做，能夠選擇第一種函數方法。若是組件比較複雜，而且須要在不一樣的時期作初始化或者銷燬等工做，就要採用第二種ES6類方法。

狀態（State）

State相似於props，但它是組件私有的而且徹底由組件控制。
下面咱們結合一個Clock類來演示State的概念。

import React, {Component} from 'react';

export default class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

在這個組件裏，Clock就擁有了本身的狀態，而不是從外界發生傳入。接下來咱們增長一個定時器的功能，來引入生命週期。

import React, {Component} from 'react';

export default class Clock extends Component {
  ...

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID)
  }

  tick () {
    this.setState({date: new Date()})
  }
  ...
}

注意：在React中，調用setState方法去修改state，會觸發View視圖層的修改，直接設置state就不會觸發state的修改。
上面引入了兩個生命週期方法：componentDidMount , componentWillUnmount 。
componentDidMount 會在組件掛載到DOM節點上以後觸發，而 componentWillUnmount 會在組件從節點上移除之後觸發。
React還有不少生命週期方法，下面作一個詳細的說明。

生命週期

在React中，一個組件可能會經歷建立、掛載、更新、卸載、銷燬這些事件，React爲咱們提供了鉤子函數來在這些事件觸發時進行操做。
他的生命週期能夠分爲三大部分：
建立、更新、銷燬。
建立組件並將其插入DOM時，下面的方法會依次觸發

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

更新時，將會觸發

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸載時，觸發

componentWillUnmount()

爲了更加直觀的查看生命週期方法，能夠參考這張圖：

圖片來源：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/。
Render階段，把一些state和props計算執行。
Commit階段就是把React組件插入到真實DOM節點上，這個時候可使用DOM。
而Pre-commit階段就是在插入真實DOM以前，這個階段能夠讀取DOM。