react推薦函數(shù)組件的原因是什么

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

原因：1、函數(shù)組件語法更短、更簡單，這使得它更容易開發(fā)、理解和測(cè)試；2、類組件過多的使用this讓整個(gè)邏輯看起來很混亂；3、hooks功能也只支持函數(shù)組件；4、React團(tuán)隊(duì)針對(duì)函數(shù)組件做了更多的優(yōu)化來避免非必要的檢查和內(nèi)存泄漏；5、函數(shù)式組件性能消耗小，因?yàn)楹瘮?shù)式組件不需要?jiǎng)?chuàng)建實(shí)例，渲染的時(shí)候就執(zhí)行一下，得到返回的react元素后就直接把中間量全部都銷毀。

當(dāng)使用React框架開發(fā)的時(shí)候，有兩種方式創(chuàng)建組件，使用函數(shù)和使用類，目前函數(shù)組件越來越流行。下面通過舉例的方式，分析函數(shù)組件和類組件的不同，并總結(jié)一下使用函數(shù)組件的原因（優(yōu)勢(shì)）。

JSX渲染方式

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

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

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

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

兩種寫法是一樣的。

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

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

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

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

傳遞props

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

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

或者不使用解構(gòu)賦值

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，然后可以使用解構(gòu)賦值獲取name屬性。

處理state

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

在函數(shù)組件中處理狀態(tài)變量

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

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

state的初始值支持各種數(shù)據(jù)類型，包括null，string或者object對(duì)象，只要是javascript允許的都可以。在=號(hào)的左邊，我們使用解構(gòu)賦值的形式來接受useState的返回值，包括當(dāng)前的狀態(tài)變量和更新該變量的setter函數(shù)，即count和setCount。

在類組件中處理狀態(tài)變量

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>
   );
 }}

與函數(shù)組件大同小異，首先我們要理解React.Component的構(gòu)造函數(shù)constructor，react的官方文檔對(duì)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方法會(huì)在組件完全加載完成之前調(diào)用。在constructor方法中，你需要在第一行調(diào)用super(props)，否則會(huì)報(bào)this.props是undefined的錯(cuò)誤。

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

這里先定義一個(gè)onClick方法，后面會(huì)用到，

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

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

生命周期函數(shù)

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

加載階段

類組件的生命周期函數(shù)componentDidMount會(huì)在首次渲染完成之后調(diào)用。首次渲染完成之前會(huì)調(diào)用componentWillMount ，但是這個(gè)方法在新版本的React中不推薦使用了。

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

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

useEffect有兩個(gè)參數(shù)，第一個(gè)是箭頭函數(shù)，第二個(gè)是[]，[]里面是變化的state(s)。什么意思呢？就是[]中的狀態(tài)變化了，箭頭函數(shù)會(huì)被調(diào)用。如果像現(xiàn)在這樣寫個(gè)[]，那箭頭函數(shù)只會(huì)在組件第一次渲染之后調(diào)用一次，其功能類似下面類組件的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的也是一個(gè)箭頭函數(shù)，這個(gè)函數(shù)就是在卸載階段執(zhí)行的。當(dāng)你需要執(zhí)行一些卸載操作，可以放在這里，比如你可以把clearInterval放在這里，避免內(nèi)存泄漏。使用useEffect鉤子函數(shù)的最大好處就是可以把加載函數(shù)和卸載函數(shù)放在一個(gè)同一個(gè)地方。這里對(duì)比一下類組件的寫法：

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

感謝各位的閱讀，以上就是“react推薦函數(shù)組件的原因是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)react推薦函數(shù)組件的原因是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！