react為什麼推薦函數元件

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

本教學操作環境：Windows7系統、react18版、Dell G3電腦。

當使用React框架開發的時候，有兩種方式創建元件，使用函數和使用類，目前函數元件越來越流行。以下透過舉例的方式，分析函數元件和類別元件的不同，並總結使用函數元件的原因（優點）。

JSX渲染方式

---

函數元件和類別元件處理JSX的方式不同，就像他們的名字，函數元件是一個純Javascript函數，直接返回JSX；而類別元件是一個Javascript類，透過擴充React.Component，並實作render方法，render方法中傳回JSX。以下舉例說明：

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

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

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

兩種寫法是一樣的。

然後，來看看如何定義類別元件，首先我們需要擴充React.Component,然後在render方法中回傳JSX，具體看下面的程式碼片段：

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

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

#

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

傳遞props

---

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

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

或不使用解構賦值

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

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

然後，我們來看看類別元件如何使用props，

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

在在類別元件中，你需要使用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 <h1>Hello, World</h1>;};

useEffect有两个参数，第一个是箭头函数，第二个是[]，[]里面是变化的state(s)。什么意思呢？就是[]中的状态变化了，箭头函数会被调用。如果像现在这样写个[]，那箭头函数只会在组件第一次渲染之后调用一次，其功能类似下面类组件的componentDidMount。

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

卸载阶段

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

这里注意return的也是一个箭头函数，这个函数就是在卸载阶段执行的。当你需要执行一些卸载操作，可以放在这里，比如你可以把clearInterval放在这里，避免内存泄漏。使用useEffect钩子函数的最大好处就是可以把加载函数和卸载函数放在一个同一个地方。这里对比一下类组件的写法：

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

总结

---

函数组件和类组件各有优缺点，但函数组件相比类组件的优势：

• 函数组件语法更短、更简单，这使得它更容易开发、理解和测试；而类组件也会因大量使用 this而让人感到困惑
  

• 类组件过多的使用this让整个逻辑看起来很混乱；

• React团队主推的React hooks功能也只支持函数组件；

• React团队针对函数组件做了更多的优化来避免非必要的检查和内存泄漏；

  注：React团队也在努力将hooks功能引入类组件，所以没必要将现有的类组件都改写成函数组件；

• 类组件的性能消耗比较大，因为类组件需要创建类组件的实例，而且不能销毁。

  函数式组件性能消耗小，因为函数式组件不需要创建实例，渲染的时候就执行一下，得到返回的react元素后就直接把中间量全部都销毁。

【相关推荐：Redis视频教程、编程入门】

以上是react為什麼推薦函數元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！