react中的函数式组件和类式组件

jieyucx

已于 2023-10-30 14:05:51 修改

阅读量1.6k

点赞数 1

分类专栏： react从入门到精通文章标签： react.js 前端 javascript

于 2023-10-26 12:19:34 首次发布

本文链接：https://blog.csdn.net/jieyucx/article/details/134052596

版权

react从入门到精通专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

一、函数组件
- 1. 定义函数组件
- 2. 函数式组件没有自己的state
二、类式组件

一、函数组件

1. 定义函数组件

在React中，函数组件（Functional Component）是一种通过纯粹的JavaScript函数定义的UI组件。函数组件采用函数的方式接收一个输入参数 props，并返回一个React元素或者一组React元素作为输出。定义函数组件的基本语法如下：

function MyComponent(props) {
  // 组件的逻辑和渲染内容
  return (
    // 组件的UI内容
  );
}

注意点：

函数组件的函数名通常使用首字母大写的驼峰命名法，以示区分普通的JavaScript函数。
函数组件接收的输入参数 props 是一个包含传递给组件的属性的JavaScript对象。可以通过 props 对象来访问传递进来的属性值。
函数组件内部的逻辑和渲染内容可以使用函数的控制结构、变量、循环等等，并根据需要返回一个React元素或者一组React元素。
函数组件只能返回一个根元素，可以使用多个子元素将它们包裹起来。
函数组件不能使用this关键字，因为它没有实例对象。如果需要使用状态或者生命周期方法等特性，可以使用React的钩子函数来实现。

2. 函数式组件没有自己的state

在React中，函数组件是以函数的形式定义的组件。函数组件没有自己的state，但可以使用React的hooks来定义和管理状态。

函数组件的定义形式如下：

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

函数组件可以接收一个 props 对象作为参数，并且返回一个 React 元素。props 对象包含了从父组件传递下来的数据。

要让函数组件拥有自己的状态，可以使用 useState hook。 useState 返回一个带有两个元素的数组，第一个元素是状态的当前值，第二个元素是一个可以更新该状态的函数。可以根据需要在组件内使用多个 useState 来管理多个状态。

以下是一个使用 useState 的函数组件示例：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

在上述示例中，useState(0) 定义了一个名为 count 的状态变量并初始化为 0。通过 setCount 函数可以更新 count 的值。每次点击 “Increment” 按钮时，count 的值都会增加 1。点击 “Decrement” 按钮时，count 的值会减少 1。

二、类式组件

1. 定义类式组件

在React中定义类组件需要继承React.Component类，并且实现render方法来返回需要渲染的内容。

类组件的定义通常如下所示：

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 内容 */}
      </div>
    );
  }
}

类式组件的注意点：

继承React.Component类：类组件必须继承React.Component类，以便能够使用React提供的组件功能。
构造函数：如果需要在组件中使用state状态数据，可以通过构造函数来初始化state。
渲染方法：类组件必须实现一个render方法，该方法返回要渲染的内容。render方法中可以使用JSX语法描述UI组件的结构。
生命周期方法：类组件可以使用React提供的生命周期方法，用于在组件的不同生命周期阶段执行特定的操作，如componentDidMount用于组件挂载后执行操作，componentWillUnmount用于组件卸载前执行操作等。
使用props：类组件可以通过props属性接收父组件传递的数据，并在render方法中使用。
事件处理：在类组件中可以定义事件处理方法，并将其绑定到相应的DOM元素上。
修改state：通过调用setState方法可以修改state状态数据，并自动重新渲染组件。
不直接操作DOM：类组件应该避免直接操作DOM元素，而是使用setState方法来更新组件的状态。
使用this关键字：在类组件中，需要使用this关键字来访问组件的属性和方法。
遵循命名规范：类组件的名称应该以大写字母开头，并采用帕斯卡命名法。

2. 类中的state以及如何更新

在React的类组件中，状态是通过构造函数的this.state属性来管理的。状态是一个普通的JavaScript对象，包含组件中的数据。构造函数只会在组件实例化时被调用一次，用于初始化组件的状态。

要更新状态，可以使用this.setState方法。setState方法接受一个新的状态对象作为参数，并比较新的状态与当前状态的差异，然后进行合并和更新。React会响应式地重新渲染组件并更新页面，以反映出新的状态。

以下是一个示例代码，演示了状态如何被定义和更新：

import React, {Component} from 'react';

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

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

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

export default Counter;

上述代码中，Counter组件的状态在构造函数中初始化为一个计数器的初始值0。incrementCount方法会在点击按钮时被调用，用于更新count状态。通过使用this.setState来更新状态，React会重新渲染组件并将新的状态反映到页面上。

需要注意的是，更新状态是异步的，并且React会对多个setState调用进行批处理以提高性能。因此，在调用setState之后访问this.state可能无法立即获得最新的状态值。如果需要在更新状态后进行一些操作，可以使用setState的第二个参数，它是一个回调函数，在状态更新完成后被调用。

这就是在React的类组件中管理和更新状态的基本方法。通过合理使用状态，可以实现组件的交互和动态更新。

3. react更新状态的渲染过程

在React中，组件的状态（state）是存储在组件内部的对象。当状态发生变化时，React会重新渲染组件来反映这些变化。为了触发重新渲染，React要求使用this.setState()方法来更新组件的状态。

this.setState()方法是React提供的用于更新组件状态的方法。它是一个异步方法，接受一个对象作为参数，表示要更新的状态属性和它们的新值。当调用this.setState()时，React会合并新的状态与旧的状态，并计划执行一次组件的重新渲染。

这个渲染过程是React的内部机制自动完成的，不需要开发者手动干预。在重新渲染时，React会比较新旧状态的差异，并生成相应的虚拟DOM（Virtual DOM）树。然后，React会将这个虚拟DOM树与之前的虚拟DOM树进行比较，找出变化的部分，然后将这些变化应用到实际的DOM树上，从而更新用户界面。

值得注意的是，由于this.setState()是一个异步方法，所以多次调用this.setState()可能会被合并为一次更新。为了确保在状态更新后进行一些操作（例如在新状态生效后进行一些处理），可以使用this.setState()的第二个参数，这是一个回调函数，会在状态更新完成后被调用。

总结起来，React要求使用this.setState()方法来更新组件的状态，以触发重新渲染过程。这个过程是由React的内部机制自动完成的，用于比较新旧状态的差异，并将变化应用于实际的DOM树上，从而更新用户界面。

4. 事件绑定this指向问题

就是上面“2”中的示例，如果不使用箭头函数来绑定事件处理函数，而是直接使用onClick={this.incrementCount}这种写法，会导致this在事件处理函数中由于上下文的问题变成undefined。

原因是，当使用普通的函数写法时，事件处理函数的执行上下文会丢失，即this会指向undefined。而使用箭头函数时，箭头函数没有自己的this，它会继承外层作用域的this，所以可以正确地将this绑定到事件处理函数中。

所以，为了确保事件处理函数中的this指向组件实例，需要使用箭头函数来绑定事件处理函数，即onClick={() => this.incrementCount()}。

还有一种写法是将函数绑定到构造函数中：

constructor(props) {
  super(props);
  this.state = {
    count: 0
  };
  this.incrementCount = this.incrementCount.bind(this);
}

然后在onClick中直接使用this.incrementCount即可，这样也可以正确地将this绑定到事件处理函数中。