react推薦函數組件的原因是什么

這篇文章主要講解了“react推薦函數組件的原因是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“react推薦函數組件的原因是什么”吧！

原因：1、函數組件語法更短、更簡單，這使得它更容易開發、理解和測試；2、類組件過多的使用this讓整個邏輯看起來很混亂；3、hooks功能也只支持函數組件；4、React團隊針對函數組件做了更多的優化來避免非必要的檢查和內存泄漏；5、函數式組件性能消耗小，因為函數式組件不需要創建實例，渲染的時候就執行一下，得到返回的react元素后就直接把中間量全部都銷毀。

當使用React框架開發的時候，有兩種方式創建組件，使用函數和使用類，目前函數組件越來越流行。下面通過舉例的方式，分析函數組件和類組件的不同，并總結一下使用函數組件的原因（優勢）。

JSX渲染方式

函數組件和類組件處理JSX的方式不同，就像他們的名字，函數組件是一個純Javascript函數，直接返回JSX；而類組件是一個Javascript類，通過擴展React.Component，并實現render方法，render方法中返回JSX。下面舉例說明：

import React from "react";
 const FunctionalComponent = () => {
 return <h2>Hello, world</h2>;
 };

上面通過ES6箭頭函數的形式定義了一個函數組件，函數體內直接返回JSX。如果你對箭頭函數不熟悉，也可以寫成下面這種形式：

import React from "react";
function FunctionalComponent() {
 return <h2>Hello, world</h2>;
 }

兩種寫法是一樣的。

然后，來看看如何定義類組件，首先我們需要擴展React.Component,然后在render方法中返回JSX，具體看下面的代碼片段：

import React, { Component } from "react";
class ClassComponent extends Component {
 render() {
   return <h2>Hello, world</h2>;
 }}

上面使用了ES6的解構賦值語法來導入模塊，如果你對解構賦值語法不熟悉，也可以寫成下面這種形式，會看上去更簡潔一些：

import React from "react";
class ClassComponent extends React.Component {
 render() {
   return <h2>Hello, world</h2>;
 }
 }

傳遞props

當需要向一個組件傳遞數據的時候，我們使用props，比如<FunctionalComponent name="Shiori" />，name就是Component的一個props屬性，這里可以有更多屬性。FunctionalComponent組件的函數形式的定義如下：

const FunctionalComponent = ({ name }) => {
 return <h2>Hello, {name}</h2>;
 };

或者不使用解構賦值

const FunctionalComponent = (props) => {
 return <h2>Hello, {props.name}</h2>;
 };

這種方式，你需要使用props.name來獲取name屬性。

然后，我們來看看類組件如何使用props，

class ClassComponent extends React.Component {
  render() {
    const { name } = this.props;
    return <h2>Hello, { name }</h2>;
 }}

在類組件中，你需要使用this來獲取props，然后可以使用解構賦值獲取name屬性。

處理state

在React項目中，我們不可避免的要處理狀態變量。類組件直到最近才支持處理狀態，然而，從React從16.8版本開始，函數組件支持鉤子方法useState，這樣我們可以很方便的在函數組件中使用狀態變量。下面通過一個counter計數器實例來說明它們的不同。

在函數組件中處理狀態變量

const FunctionalComponent = () => {
 const [count, setCount] = React.useState(0);
 return (
   <div>
     <p>count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Click</button>
   </div>
 );};

這里使用useState鉤子，它接收一個初始的state作為參數。在本例中，計數器從0開始，所以我們給count一個初始值0。

state的初始值支持各種數據類型，包括null，string或者object對象，只要是javascript允許的都可以。在=號的左邊，我們使用解構賦值的形式來接受useState的返回值，包括當前的狀態變量和更新該變量的setter函數，即count和setCount。

在類組件中處理狀態變量

class ClassComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }
 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }}

與函數組件大同小異，首先我們要理解React.Component的構造函數constructor，react的官方文檔對constructor的定義如下：

“The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.”

翻譯一下，

React組件的constructor方法會在組件完全加載完成之前調用。在constructor方法中，你需要在第一行調用super(props)，否則會報this.props是undefined的錯誤。

如果在類組件中，你沒有實現constructor方法并調用super(props)，那么所有的狀態變量都將是undefined。所以，別忘記先定義constructor方法，在constructor方法中，我們需要給this.state一個初始值，像上面的代碼那樣。然后我們可以在JSX中使用this.state.count來獲取count的值，setter的使用也是類似的。

這里先定義一個onClick方法，后面會用到，

onClick={() =>
  this.setState((state) => {
    return { count: state.count + 1 };
  })}

這里注意setState()方法接收的是個箭頭函數，而箭頭函數的參數是state和props，props是可選的，這里沒用到就沒寫。

生命周期函數

React的組件在它整個的渲染的過程中，有它的生命周期。如果你之前一直使用類組件，剛剛接觸函數組件，你可能會疑惑，為什么在函數組件中沒有componentDidMount()這類的生命周期方法？但是別急，有其他的鉤子函數可以使用。

加載階段

類組件的生命周期函數componentDidMount會在首次渲染完成之后調用。首次渲染完成之前會調用componentWillMount ，但是這個方法在新版本的React中不推薦使用了。

在函數組件中，我們使用useEffect鉤子函數來處理生命周期內的事件，像下面這樣，

const FunctionalComponent = () => {
 React.useEffect(() => {
   console.log("Hello");
 }, []);
 return <h2>Hello, World</h2>;};

useEffect有兩個參數，第一個是箭頭函數，第二個是[]，[]里面是變化的state(s)。什么意思呢？就是[]中的狀態變化了，箭頭函數會被調用。如果像現在這樣寫個[]，那箭頭函數只會在組件第一次渲染之后調用一次，其功能類似下面類組件的componentDidMount。

class ClassComponent extends React.Component {
 componentDidMount() {
   console.log("Hello");
 }
 render() {
   return <h2>Hello, World</h2>;
 }}

卸載階段

const FunctionalComponent = () => {
 React.useEffect(() => {
   return () => {
     console.log("Bye");
   };
 }, []);
 return <h2>Bye, World</h2>;};

這里注意return的也是一個箭頭函數，這個函數就是在卸載階段執行的。當你需要執行一些卸載操作，可以放在這里，比如你可以把clearInterval放在這里，避免內存泄漏。使用useEffect鉤子函數的最大好處就是可以把加載函數和卸載函數放在一個同一個地方。這里對比一下類組件的寫法：

class ClassComponent extends React.Component {
 componentWillUnmount() {
   console.log("Bye");
 }
 render() {
   return <h2>Bye, World</h2>;
 }}

感謝各位的閱讀，以上就是“react推薦函數組件的原因是什么”的內容了，經過本文的學習后，相信大家對react推薦函數組件的原因是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！