09-无状态函数组件

3.2.4　无状态函数组件

要做些什么才能创建只使用属性并且没有状态的简单组件？这是通常的使用情况，特别是我们之后将探索的一些常见的对React友好的应用架构模式，如Flux和Redux。在这些情况下，我们通常希望将状态保存在一个中心位置而不是分散保存到组件中。但其他情形中只使用属性也是有用的。如果React不必管理支撑实例，那么减少应用在资源使用上的损耗也是不错的。

事实证明，可以创建一种只使用属性的组件：无状态函数组件。这些组件有时被开发人员称为无状态组件、函数组件和其他类似的名字，这一点有时让人很难了解正在讨论的内容。它们通常指的是同一件事——一个没有继承 React.Component 的组件，因此不能访问组件状态或其他生命周期方法。

不足为奇，无状态功能组件只是不能访问或使用React的状态API（或继承自 React.Component 的其他方法）的组件。它之所以没有状态并不是因为它没有任何种类的（一般）状态，而是因为它不会获得React进行管理的支撑实例。这意味着没有生命周期方法（第4章会涵盖），没有组件状态，并且可能占用更少的内存。

无状态函数组件是函数，因为它们可以被编写为命名函数或是赋值给变量的匿名函数表达式。它们只接收属性，而且对于给定的输入它们会返回相同的输出，因此基本上被认为是纯函数。这使得它们很快，因为React有可能通过避免不必要的生命周期检查或内存分配来进行优化。代码清单3-5展示了无状态函数组件的例子。你可以前往https://codesandbox.io/s/l756002969运行代码。

代码清单3-5　无状态函数组件

import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";
function Greeting(props) {
  return <div>Hello {props.for}!</div>;  ⇽--- 可以使用函数或匿名函数创建无状态函数组件
}
Greeting.propTypes = {     ⇽--- 对于任何形式的无状态函数组件，可以用函数或变量的属性来指定propTypes和默认属性
     for: PropTypes.string.isRequired
};
Greeting.defaultProps = {  ⇽--- 对于任何形式的无状态函数组件，可以用函数或变量的属性来指定propTypes和默认属性
     for: 'friend'
};
render(<Greeting for="Mark" />, mountNode);
// 或者使用箭头函数
// const Greeting = (props) => <div>Hello {props.for}</div>;  ⇽--- 可以使用函数或匿名函数创建无状态函数组件
// 像之前那样指定PropTypes和默认属性
// render(<Greeting name="Mark" />, document.getElementById("root"));

无状态函数组件很强大，特别是与拥有支撑实例的父组件结合使用时。与其在多个组件间设置状态，不如创建单个有状态的父组件并让其余部分使用轻量级子组件。第10章和第11章中，我们会使用Redux将这个模式提升到全新的水平。使用Redux的React应用常常会创建更少的有状态组件（尽管仍有让有状态组件发挥作用的情况）并将状态集中到单个位置中（就是指store）。

练习3-3　使用一个组件的状态来修改另一个组件的属性

本章讨论了属性和状态这两种处理和传递React组件中数据的主要方法。绝对不要直接修改状态或属性，而是使用setState告诉React更新组件的状态。如何使用一个组件的状态来修改另一个组件的属性？你可以前往https://codesandbox.io/s/38zq71q75进行尝试。