一、React組件

React組件簡(jiǎn)介：
React組件是構(gòu)建用戶(hù)界面的基本單元。它們將界面拆分成獨(dú)立、可重用的部分，使得代碼更加模塊化、可維護(hù)性更高。React組件可以是函數(shù)組件或類(lèi)組件，它們接收輸入的數(shù)據(jù)（稱(chēng)為props）并返回表示用戶(hù)界面的React元素。

創(chuàng)建React組件：
在React中，可以通過(guò)兩種方式來(lái)創(chuàng)建組件：函數(shù)組件和類(lèi)組件。下面分別介紹這兩種方式的創(chuàng)建方法。

1. 函數(shù)組件：
   函數(shù)組件是最簡(jiǎn)單的創(chuàng)建組件的方式，它是一個(gè)純函數(shù)，接收props作為參數(shù)并返回一個(gè)React元素。函數(shù)組件適用于沒(méi)有內(nèi)部狀態(tài)（state）或生命周期需求的簡(jiǎn)單組件。

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

在上面的例子中，Greeting是一個(gè)函數(shù)組件，它接收一個(gè)name屬性作為props并返回一個(gè)包含歡迎消息的h1元素。

2. 類(lèi)組件：
   類(lèi)組件是使用ES6類(lèi)語(yǔ)法來(lái)創(chuàng)建的組件，它繼承了React.Component類(lèi)，并可以擁有內(nèi)部狀態(tài)和生命周期函數(shù)。類(lèi)組件適用于需要狀態(tài)管理或生命周期控制的復(fù)雜組件。

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

在上面的例子中，Counter是一個(gè)類(lèi)組件，它繼承自React.Component，具有內(nèi)部狀態(tài)count和一個(gè)點(diǎn)擊按鈕來(lái)增加計(jì)數(shù)值的功能。

使用組件：
無(wú)論是函數(shù)組件還是類(lèi)組件，都可以像HTML標(biāo)簽一樣在其他組件的渲染函數(shù)中使用。

import React from 'react';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Counter />
    </div>
  );
}

在上述例子中，App組件中使用了之前定義的Greeting函數(shù)組件和Counter類(lèi)組件。

二、React生命周期

React生命周期是理解和掌握React組件的關(guān)鍵。通過(guò)合理地使用生命周期方法，我們可以在不同的階段執(zhí)行必要的操作，實(shí)現(xiàn)更精細(xì)的控制和交互。

React生命周期方法

React生命周期方法可以分為三個(gè)主要階段：掛載階段、更新階段和卸載階段。下面詳細(xì)解釋每個(gè)階段及其對(duì)應(yīng)的生命周期方法。

掛載階段：
在組件被插入DOM中時(shí)調(diào)用。

1. constructor(props)：

構(gòu)造函數(shù)，用于初始化組件的狀態(tài)和綁定方法。通常在此階段初始化組件的內(nèi)部狀態(tài)。

2. render()：

渲染方法，返回表示組件UI的React元素。必須在此方法內(nèi)返回UI內(nèi)容。

3. componentDidMount()：

組件掛載后調(diào)用，適合進(jìn)行網(wǎng)絡(luò)請(qǐng)求、DOM操作或初始化操作。此階段常用于異步數(shù)據(jù)獲取。

更新階段：
當(dāng)組件的props或state發(fā)生變化時(shí)調(diào)用。

1. render()：

更新階段也會(huì)調(diào)用render方法來(lái)重新渲染組件的UI。

2. componentDidUpdate(prevProps, prevState)：

組件更新后調(diào)用，可在此處理DOM更新、網(wǎng)絡(luò)請(qǐng)求或其他副作用操作。prevProps和prevState參數(shù)表示之前的props和state。

卸載階段：
在組件被移除DOM時(shí)調(diào)用。

• componentWillUnmount()：

組件即將卸載時(shí)調(diào)用，適合進(jìn)行清理操作，如取消網(wǎng)絡(luò)請(qǐng)求、清除定時(shí)器等。

圖示

代碼示例

以下是一個(gè)使用React生命周期方法的示例，展示了生命周期方法的執(zhí)行順序和用途。

import React from 'react';

class LifecycleExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('constructor');
  }

  increment() {
    this.setState({
      count: this.state.count + 1
    })
  }

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

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

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

  render() {
    console.log('render');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>increment</button>
      </div>
    );
  }
}

class App extends React.Component {
  state = { showComponent: true };

  toggleComponent = () => {
    this.setState({ showComponent: !this.state.showComponent });
  };

  render() {
    return (
      <div>
        {this.state.showComponent && <LifecycleExample />}
        <button onClick={this.toggleComponent}>Toggle Component</button>
      </div>
    );
  }
}

export default App;

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-673895.html

到了這里，關(guān)于面試題-React(六)：React組件和生命周期的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！