「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.js2、接下来我们要做的就是把类组件变成箭头函数组件，并且删掉 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.js3、完成了 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.js4、上述 Footer 组件代码修改完成后，示例代码如下：
import React from "react";
const Footer = ()=> (
<footer>
© 前端达人 {(new Date()).getFullYear()}
</footer>
);
export default Footer;
//File: src/shared/components/layout/Footer/Footer.js5、最后将我们的内容组件（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.js6、修改 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.js7、最后别忘记了，我们需要在App.js 引入 MyName 组件，进行渲染组件，如果一切顺利的话，你将会看到如下图所示的效果：
本部分小节
大家是不是觉得使用 Hook 操作数据状态相比类组件更简洁啊，这就是函数式编程的魅力，用最简单、最容易理解的方式进行实现。关于 Hooks 的内容比较多，比如常用的三个基本 Hook 功能：useState、useEffect、useContext，以及额外的方法：useRef、useReducer、useMemo、useCallback、useLayoutEffect、useDebugValue等，这里只是简单了解，关于 Hooks 的介绍我会在本专题介绍完后进行详细介绍，敬请期待。
小节
关于函数式组件的内容就介绍到这里，本篇文章我们基于以前例子，将公共组件通过函数组件的方式进行了改写，并初步了解了什么是 Hooks，最后一起完成了一个简单的实例，下篇文章，我们将通过实例的方式学习函数的生命周期方法，敬请期待...
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。