网站首页 > 基础教程正文

「React 手册」如何创建函数组件?

ccvgpt 2024-11-21 11:13:22 基础教程 1 ℃

大家好，在前面的几篇相关文章里，我们一起学习了如何使用类的方式声明组件，以及如何属性传值和处理本地数据状态，本篇文章我们一起学习如何使用函数的方式进行声明组件。

「React 手册」如何创建函数组件?

在 Hooks 技术没出现之前，我们一般在组件不需要维护数据状态时，使用函数组件，又称作静态组件（static components）或无状态组件（stateless components）等，但是在 React 16.8 版本引入了 Hooks 技术，函数组件就变得强大起来，它可以让react函数组件也拥有状态，不仅解决了React一些常见的问题，同时又让组件变得更简单、简洁、更易于阅读和重构，本篇文章将会针对 Hooks 进行简单的介绍。

如何创建简单的函数组件

基于上篇文章的例子，我们来尝试下通过函数的方式改写下公共组件：头组件、底部组件、内容组件等。

1、首先我们来看看当前的 Header 类组件：

import React, { Component } from "react";
import ProTypes from 'prop-types';
import logo from '../../images/logo.svg';
class  Header extends  Component{
    // 这里定义属性类型和规则
    static  proTypes={
        title:ProTypes.string.isRequired,
        url:ProTypes.string
    };
    render() {
        const {
            title='Welcome to React',
            url='https://www.qianduandaren.com'
        } =this.props;
        return (
            <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <a
                className="App-link"
                href={url}
                target="_blank"
                rel="noopener noreferrer"
            >
                {title}
            </a>
        </header>
        );
    }
}
export default  Header;

//File: src/shared/components/layout/Header/Header.js

2、接下来我们要做的就是把类组件变成箭头函数组件，并且删掉 Component 引用。然后我们不需要通过 this 方法设置 prop 属性，我们通过参数的方式进行传递。最后将 static proTypes 对象移动至函数外，通过函数属性的方式进行声明，修改后的代码如下：

import React from "react";
import ProTypes from 'prop-types';
import logo from '../../images/logo.svg';

const  Header = props =>{
    const {
        title='Welcome to React',
        url='https://www.qianduandaren.com'
    } = props;
    return(
        <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <a
                className="App-link"
                href={url}
                target="_blank"
                rel="noopener noreferrer"
            >
                {title}
            </a>
        </header>
    );
};

Header.proTypes={
    title:ProTypes.string.isRequired,
    url:ProTypes.string
};

export  default  Header;

//File: src/shared/components/layout/Header/Header.js

3、完成了 Header 组件的修改之后，我们来继续修改 Footer 组件，这个组件十分容易，没有 props 属性，首先我们来看看原先的 Footer 组件代码，示例代码如下：

import React,{Component} from "react";

class Footer extends Component{
    render() {
        return (
            <footer>
                ? 前端达人 {(new Date()).getFullYear()}
            </footer>
        );
    }
}

export  default  Footer;

//File: src/shared/components/layout/Footer/Footer.js

4、上述 Footer 组件代码修改完成后，示例代码如下：

import React from "react";

const Footer = ()=> (
    <footer>
        ? 前端达人 {(new Date()).getFullYear()}
    </footer>
);

export  default  Footer;

//File: src/shared/components/layout/Footer/Footer.js

5、最后将我们的内容组件（Content）转换成函数组件，首先我们来看看原先的内容组件：

import React,{ Component } from 'react';
import  Protypes from 'prop-types';
class Content extends  Component{
    static proTypes={
        children:Protypes.element.isRequired
    };
    render(){
        const { children } = this.props;
        return(
            <main>
                {children}
            </main>
        )
    }
}

export  default  Content;

//File: src/shared/components/layout/Content/Content.js

6、修改 Content 组件的方式和 Header 组件相似，我们将 props 属性作为函数参数进行传递，并且通过函数属性的方式进行声明 proTypes 对象，示例代码如下：

import React from 'react';
import  Protypes from 'prop-types';

const Content = props => {
    const { children } = props;
    return (
      <main>
          {children}
      </main>
    );
};

Content.propTypes = {
    children : Protypes.element.isRequired
};
export  default  Content;

//File: src/shared/components/layout/Content/Content.js

本部分小节

到这里我们就基于函数声明组件的方式完成了类组件的改造，是不是很简单呢，你是不是觉得代码看起来简洁多了。

初识 Hooks

文章开头我提及到了使用 Hooks 技术，其作用让函数组件变得强大起来，它可以让 react 函数组件也拥有状态，让我们用现有的 JavaScript 技术就能快速上手，让我们获取数据、更改状态是如此的轻松，接下来我们来初步实现一个Hook的例子：

1、首先我们在 component 目录下创建 MyName 目录，创建 MyName 组件文件。
2、引入 React 和 useState Hook 这些核插件，useState 是 Hook 的核心功能，用来维护数据状态。

import React,{ useState } from "react";

下一步，我们来初初始化我们的数据状态，但是我们在函数组件里不能使用 this.state 方法。但是我们可以使用 Hook 函数进行操作数据状态，我们可以使用 useState() 来初始我们的数据状态，并通过函数的方式返回相关内容：

当前数据状态
操作数据状态的方法

3、接下来我们可以使用 ES6 中解构赋值的方法，通过两个变量进行存储，示例代码如下：

 const  [ name, setName] =useState('');

这里我们初始化数据内容空，其实上面一段代码等价于以下代码：

const nameHook = useState('')
const name = nameHook[0]
const setName = nameHook[1]

4、然后我们来定义相关事件方法，调用 setName 函数更改状态值，示例代码如下：

function handleChange(evt) {
        setName(evt.target.value);
    }

小贴士：这里我们使用的是函数式声明，不在需要绑定 this 方法

5、接下来我们来制作交互界面，通过return函数渲染组件内容，示例代码如下：

    return(
        <div>
            <h1>
                My name is: { name }
            </h1>
            <input type="text"
                   value={name}
                   onChange={handleChange}
            />
        </div>
    )

6、最终完成的 MyName 组件代码如下：

import React,{ useState } from "react";
function  MyName() {
    const  [ name, setName] =useState('');
    function handleChange(evt) {
        setName(evt.target.value);
    }
    return(
        <div>
            <h1>
                My name is: { name }
            </h1>
            <input type="text"
                   value={name}
                   onChange={handleChange}
            />
        </div>
    )
}

export  default  MyName;

// File:  src/components/MyName/MyName.js

7、最后别忘记了，我们需要在App.js 引入 MyName 组件，进行渲染组件，如果一切顺利的话，你将会看到如下图所示的效果：

本部分小节

大家是不是觉得使用 Hook 操作数据状态相比类组件更简洁啊，这就是函数式编程的魅力，用最简单、最容易理解的方式进行实现。关于 Hooks 的内容比较多，比如常用的三个基本 Hook 功能：useState、useEffect、useContext，以及额外的方法：useRef、useReducer、useMemo、useCallback、useLayoutEffect、useDebugValue等，这里只是简单了解，关于 Hooks 的介绍我会在本专题介绍完后进行详细介绍，敬请期待。