初探React Hooks & SSR改造

Hooks

React v16.8 发布了 Hooks，其主要是解决跨组件、组件复用的状态管理问题。

在 class 中组件的状态封装在对象中，然后通过单向数据流来组织组件间的状态交互。这种模式下，跨组件的状态管理变得非常困难，复用的组件也会因为要兼容不同的组件变得产生很多副作用，如果对组件再次拆分，也会造成冗余代码增多，和组件过多带来的问题。

后来有了 Redux 之类的状态管理库，来统一管理组件状态。但是这种分层依然会让代码变得很复杂，需要更多的嵌套、状态和方法，写代码时也常在几个文件之间不停切换。hooks 就是为了解决以上这些问题。

文章不对 hooks 做太多详细介绍，建议阅读此文前，先到官网做大概的了解。此文基于上一篇文章《实现ssr服务端渲染》的代码，进行 hooks 改造。代码已经提交到仓库的 hooks 分支中，仓库链接 https://github.com/zimv/react-ssr/tree/hooks。

面向对象编程和函数式编程

在了解 hooks 的过程中，慢慢的感觉到了面向对象和函数式编程的区别。

在 class 模式中状态和属性方法等被封装在组件内，组件之间是相互以完整对象个体做交互，状态的修改需要在对象内部的 setState 中处理。

而 hooks 模式中，一切皆函数，也就是 hooks，可以被拆分成很多小单元再进行组合，修改状态的是一个 set 方法，此方法可以在任何其他的 hooks 中出现和调用。 class 更属于面向对象编程，而 hooks 更属于函数式编程。

React 也并不会移除 class，而是引入 hooks 使开发者能根据场景做更好的选择。它们依旧会在未来保持应有的迭代。

变化

使用 hooks 之后，原本的生命周期概念就会有所变化了。比如我们定义一个 hooks 组件 Index, 当组件运行时，Index 函数的调用就是一次 render，那么我们第一次 render 相当于原来的 willMount，而 useEffect 会在第一次 render 以后执行。官网文档也说过你可以把 useEffect Hooks 视作 componentDidMount、componentDidUpdate 和 componentWillUnmount 的结合。 state 也被 useState 替代，useState 传入初始值并返回变量和修改变量的 set 方法。

在我们服务端渲染的时候，上篇文章说过生命周期只会执行到 willMount 后的第一次 render。 那在我们 hooks 模式下，服务端渲染会执行 Index hooks 第一次 render，而 useEffect 不会被执行。

function Index(props){
    console.log('render');
    const [desc, setDesc] = useState("惹不起");
    useEffect(() => {
        console.log('effect')
    })
    return (
{desc}
)
}

useEffect

如果使用了 useEffect，组件钩子每次 render 以后，useEffect 会被执行。 useEffect 第一个入参是需要调用的方法，方法可以返回一个方法，返回的方法会在非首次执行此 useEffect 之前调用，也会在组件卸载时调用。

第二个参数是传入一个数组，是用来限制 useEffect 执行次数的，如果不传入此参数，useEffect 会在每次 render 时执行。如果传入第二个数组参数，在非首次执行 useEffect 时，数组中的变量较上一次 render 发生了变化，才会再次触发 useEffect 执行。

看如下代码，当页面首次 render ，useEffect 执行异步数据获取，当数据获取成功，setList 设置值以后(类似 setState 会触发 render)，会再次执行 render，而 useEffect 还会再次执行，数据请求结束以后，setList 又会导致 render，因此陷入死循环。

const [list, setList] = useState([]);
useEffect(() => {
    API.getData().then(data=>{
        if (data) {
            setList(data.list);
        }
    });
});

所以需要使用第二个参数，限制执行次数，我们传入一个 1，就可以实现仅执行一次 useEffect 。当然也可以通过传入一个 useState 变量。

const [list, setList] = useState([]);
useEffect(() => {
    API.getData().then(data=>{
        if (data) {
            setList(data.list);
        }
    });
}, [1]);

class 改造

在原本的 SSR 仓库的前提下，仅针对组件部分，进行 hooks 改造。首先回顾 getInitialProps 在 class 模式下，是在 class 写一个 static 静态方法，如下：

export default class Index extends Base {
  static async getInitialProps() {
    let data;
    const res = await request.get("/api/getData");
    if (!res.errCode) data = res.data;
    return {
      data
    };
  }
}

在 hooks 中，class 变成了普通函数，以前的继承变得没有必要也无法适应需求，因此 getInitialProps 直接写在函数的属性中，方法本身返回的数据格式依然不变，返回一个对象。如下：

function Index(props) {
}
Index.getInitialProps = async () => {
  let data;
  const res = await request.get("/api/getData");
  if (!res.errCode) data = res.data;
  return {
    data
  };
};

包括定义的网页 title，之前也是使用 static，现在我们也 Index.title = 'index' 这样定义。

hooks 规范要求如下，援引中文 React 文档：

只能在顶层调用钩子。不要在循环，控制流和嵌套的函数中调用钩子。

只能从 React 的函数式组件中调用钩子。不要在常规的JavaScript函数中调用钩子。（此外，你也可以在你的自定义钩子中调用钩子。）

在class模式下，我们继承了Base, Base定义 constructor 和 componentWillMount 来处理 state 和 props ，可以帮助我们解决服务端渲染和客户端渲染下初始化状态数据的赋值和获取，因此我们才可以统一一套代码在客户端和服务端中运行（如需要，查看上篇文章了解详情）。

class 模式下的继承 Base 属于面向对象编程模式，而 hooks 模式下，由于需要在函数内使用 useState 来定义状态，并且返回方法来设置状态，这样看起来更偏向函数式编程，在这种场景下，继承变得不适应。因此需要对 Base 进行改造，在 Base 编写 hooks，在页面组件 hooks 中使用。

在 class 模式下，我们使用继承 Base 来处理 state 和 props，由于 Base 已经封装了 constructor 和 componentWillMount 处理 state 和 props，因此我们只需要定义好静态 state 和 getInitialProps，组件便会自动处理相关逻辑，大致使用代码如下

export default class Index extends Base {
  static state = {
    desc: "Hello world~"
  };
  static async getInitialProps() {
    let data;
    const res = await request.get("/api/getData");
    if (!res.errCode) data = res.data;
    return {
      data
    };
  }
}

在 hooks 模式下不一样，因为摒弃了继承，需要用 Base 自定义 hooks，然后在页面组件中使用。Base 中的 getProps 和 requestInitialData 钩子调用时，需要传入当前 Index 组件的部分对象，然后在 Base hooks 中返回变量初始值或者调用 set 修改当前 hooks 中的状态值，大致使用如下：

import { getProps, requestInitialData } from "../base";

function Index(props) {
  const [desc, setDesc] = useState("Hello world~");
  //getProps获取props中的ssrData，重构和服务端渲染时props有值，第三个参数为默认值
  const [data, setData] = useState(getProps(props, "data", ""));

  //在单页面路由页面跳转，渲染组件时，requestInitialData调用getInitialProps
  requestInitialData(props, Index, { data: setData });
  return (
{data}
)
}
Index.getInitialProps = async () => {
  let data;
  const res = await request.get("/api/getData");
  if (!res.errCode) data = res.data;
  return {
    data
  };
};
export default Index;

如此封装以后，我们依然保证了一套代码能在服务端和客户端运行，requestInitialData 方法第三个传入参数，是一个对象，传入了需要被修改的状态的 set 方法，最终 getInitialProps 返回数据后，会和传入的对象对比，属性名一致便会调用 set 方法进行状态修改，requestInitialData 是一个 useEffect hook，代码如下

export function requestInitialData(props, component, setFunctions) {
  useEffect(() => {
    //客户端运行时
    if (typeof window != "undefined") {
      //非同构时，并且getInitialProps存在
      if (!props.ssrData && component.getInitialProps) {
        component.getInitialProps().then(data => {
          if (data) {
            //遍历结果，执行set赋值
            for (let key in setFunctions) {
              for (let dataKey in data) {
                if (key == dataKey) {
                  setFunctions[key](data[dataKey]);
                  break;
                }
              }
            }
          }
        });
      }
    }
  },[1]);
}

至此，针对我之前的 SSR 代码，就完成了 hooks 的改造。React hooks 的改造非常平滑，class 和 hooks 混用也不会造成什么问题，如果需要在旧的项目中使用 hooks 或者对原有的 class 进行改造，完全可以慢慢的一部分一部分迭代。

当然还有更多 Hooks，如 useContext、useReducer 等等，那么不妨现在就去试试 Hooks ？

关联仓库：https://github.com/zimv/react-ssr

关注大诗人公众号，第一时间获取最新文章。