React 函数式组件和类组件的区别，不是只有state和性能！

与React类组件相比，React函数式组件究竟有何不同？

一般的回答都是：

1. 类组件比函数式组件多了更多的特性，比如 state，那如果有 Hooks 之后呢？
2. 函数组件性能比类组件好，但是在现代浏览器中，闭包和类的原始性能只有在极端场景下才会有明显的差别。
   1. 性能主要取决于代码的作用，而不是选择函数式还是类组件。尽管优化策略有差别，但性能差异可以忽略不计。
   2. 参考官网：(zh-hans.reactjs.org/docs/hooks-…)
   3. 参考作者github：(github.com/ryardley/ho…)

而下面会重点讲述：React的函数式组件和类组件之间根本的区别： 在心智模型上。

简单的案例

函数式组件经常被忽略的点：函数式组件捕获了渲染所用的值。（Function components capture the rendered values.）

思考这个组件:

function ProfilePage(props) {
  const showMessage = () => alert('你好 ' + props.user);

  const handleClick = () => setTimeout(showMessage, 3000);

  return <button onClick={handleClick}>Follow</button>
}
复制代码

上述组件：如果 props.user是 Dan，它会在三秒后显示 你好 Dan。

如果是类组件我们怎么写？一个简单的重构可能就象这样：

class ProfilePage extends React.Component {
  showMessage = () => alert('Followed ' + this.props.user);

  handleClick = () => setTimeout(this.showMessage, 3000);

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}
复制代码

通常我们认为，这两个代码片段是等效的。人们经常在这两种模式中自由的重构代码，但是很少注意到它们的含义：

我们通过 React 应用程序中的一个常见错误来说明其中的不同。

我们添加一个父组件，用一个下拉框来更改传递给子组件(ProfilePage)，的