10天學會React——屬性，狀态，事件，生命周期

React元件的屬性、狀态、事件和生命周期

大家好，我是技術小江。今天我們來學習React的 Day 2 内容，主要是深入學習React元件的屬性和狀态，以及如何使用事件來控制元件的行為。相信大家已經掌握了React的基礎知識，現在我們來更加深入地學習一下React吧！

首先，我們來學習元件的屬性和狀态。元件的屬性是指元件在被使用時傳入的一些固定的值，這些值在元件的生命周期中不會發生變化。元件的狀态則是指元件内部的一些資料，這些資料可以随着使用者的互動或其他事件的發生而發生變化。React中，元件的屬性可以通過this.props來通路，而元件的狀态則可以通過this.state來通路。

那麼，我們接下來就來學習如何定義元件的屬性和狀态。在定義元件時，我們可以通過constructor()方法來初始化元件的狀态，代碼如下：

//舊代碼

import React from "react";

class Hello extends React.Component {
    render() {
      return (
        <div>
          <h1>你好世界!</h1>
        </div>
      );
    }
  }

 export default Hello

//新代碼
import React from "react";
class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '世界'
    };
  }
  render() {
    return (
      <div>
        <h1>你好, {this.props.greeting} {this.state.name}!</h1>
      </div>
    );
  }
}

 export default Hello      

在新代碼中，我們定義了一個名為“Hello”的元件，并初始化了它的狀态為{name: '世界'}。在元件的render()方法中，我們使用了JSX文法來渲染元件的UI界面，并在其中使用了元件的屬性和狀态來顯示“你好世界!”這個文本。在這個例子中，我們使用了this.props.greeting來擷取傳入元件的greeting屬性，并使用this.state.name來擷取元件内部的name狀态。

接下來，我們來學習如何使用事件來控制元件的行為。在React中，我們可以通過定義事件處理函數來響應使用者的互動事件，比如點選按鈕、輸入文本等。定義事件處理函數的方法有兩種：一種是使用ES6的箭頭函數，另一種是使用類的方法定義。在這裡，我們示範使用ES6的箭頭函數來定義事件處理函數，代碼如下：

import React from "react";

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '世界'
    };
    this.handleNameChange = this.handleNameChange.bind(this);
  }

  handleNameChange(event) {
    this.setState({name: event.target.value});
  }

  render() {
    return (
      <div>
        <h1>Hello,{this.state.name}!</h1>
        <input type="text" value={this.state.name} onChange={this.handleNameChange} />
      </div>
    );
  }
}

 export default Hello      

在這段代碼中，我們定義了一個名為“Hello”的元件，并定義了一個名為handleNameChange的事件處理函數，用于響應輸入框的文本變化事件。在元件的render()方法中，我們使用了input元素來渲染輸入框，并使用了value屬性來綁定元件的name狀态，并使用onChange事件來響應輸入框的文本變化事件。在handleNameChange事件處理函數中，我們使用了setState()方法來修改元件的name狀态，并觸發元件的重新渲染。

最後，我們來看一下React元件的生命周期。在React中，元件的生命周期可以分為三個階段：挂載、更新和解除安裝。在挂載階段，React會調用元件的constructor()、getDerivedStateFromProps()、render()和componentDidMount()方法；在更新階段，React會調用元件的getDerivedStateFromProps()、shouldComponentUpdate()、render()、getSnapshotBeforeUpdate()和componentDidUpdate()方法；在解除安裝階段，React會調用元件的componentWillUnmount()方法。

下面是一個簡單的React元件生命周期的例子：

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'World'
    };
    console.log('constructor');
  }

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
    return null;
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate');
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate');
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render');
    return (
      <div>
        <h1>Hello, {this.props.greeting} {this.state.name}!</h1>
      </div>
    );
  }
}      

對應的控制台輸出如下,可以看到生命周期的執行順序

//控制台輸出
Hello.js:9 constructor
Hello.js:13 getDerivedStateFromProps
Hello.js:13 getDerivedStateFromProps
Hello.js:40 render
Hello.js:40 render
Hello.js:32 componentDidMount
Hello.js:36 componentWillUnmount
Hello.js:32 componentDidMount      

好了，今天的React學習内容就到這裡了。希望大家能夠掌握React元件的屬性和狀态，以及如何使用事件來控制元件的行為，并深入了解React元件的生命周期。明天我們将會學習React的Day 3内容，敬請期待！