函数式组件依然是【外部数据=>view】的映射，依然是pure function的心智模型。只不过现在外部数据不仅仅包括props和context，还包括state。
事实上，未来的并发模式就要求你使用pure function的心智模型来编写函数式组件，否则很容易出bug。

state是一种外部数据

有同学可能会问：“你在逗我吧？都useState了你还pure呢？？？”

但是你发现没有，react对hooks的种种限制，不就是为了让你把useState等hooks声明在函数组件的开头？useState状态声明在概念上相当于静态声明，不会因为【props这种运行时因素】的变化而改变。你完全能写个代码分析工具，无需运行代码就能收集所有状态声明。

静态声明一个state，不就相当于用一个Wrapper组件来持有这个状态，然后传给它？那这个state不就可以理解为一种外部输入？举个例子：

  1. function Comp1() {
  2.   const [count, setCount] = useState(0);
  3.   return <h1>{count}</h1>;
  4. }

相当于是

import React, { useState } from "react";

function MyComp(props) {
  return <h1>{props.count}</h1>;
}

class MyCompWrapper extends React.Component {
  state = {
    count: 1,
  };

  add = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <>
        <button onClick={this.add}>add 1</button>
        <MyComp count={this.state.count} />
      </>
    );
  }
}

export default MyCompWrapper;

后者看起来更像是在写纯函数了吧，但是两者其实是等价的啊！那么useState是不是就可以看作是一种语法糖，用来声明它的Wrapper应该持有哪些状态！只不过React内核会自动帮你生成这些MyCompWrapper，管理状态并将它注入给MyComp。

这里只是讲心智模型，内部实现肯定会更加高效。内部实现实际将组件状态放在组件实例对应的Fiber节点里面。

作者：csr632
链接：https://www.zhihu.com/question/343314784/answer/937174224
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。