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 视作 componentDidMountcomponentDidUpdate 和 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 (<div>{desc}</div>)
}

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 (<div>{data}</div>)
}
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 进行改造,完全可以慢慢的一部分一部分迭代。当然 React Hooks 还有 useContext useReducer 等,不妨现在就去试试 Hooks ?

关联文章:《 实现ssr服务端渲染

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

初探React Hooks & SSR改造的更多相关文章

  1. React Hooks用法大全

    前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖 ...

  2. React Hooks 深入系列

    本文基于近段时间对 hooks 碎片化的理解作一次简单梳理, 个人博客.同时欢迎关注基于 hooks 构建的 UI 组件库 -- snake-design. 在 class 已经融入 React 生态 ...

  3. React Hooks 实现react-redux

    Redux 是目前 React 系统中最常用的数据管理工具,它落实并发扬了 Flux 的数据单向流动模式,被实践证明为一种成熟可用的模式. 尽管承受着一些非议,Redux 在 React 数据管理界的 ...

  4. 通过 React Hooks 声明式地使用 setInterval

    本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...

  5. 基于vue现有项目的服务器端渲染SSR改造

    前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...

  6. React hooks实践

    前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...

  7. 理解 React Hooks

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...

  8. React Hooks新特性学习随笔

    React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...

  9. 关于React Hooks,你不得不知的事

    React Hooks是React 16.8发布以来最吸引人的特性之一.在开始介绍React Hooks之前,让咱们先来理解一下什么是hooks.wikipedia是这样给hook下定义的: In c ...

随机推荐

  1. django系列7:修改404页面展示,优化模板,降低urlconf和模板之间的耦合,命名app将模板和app绑定

    为了增加程序的友好和健壮性,修改view代码,处理以下如果出现404,页面的UI展示. 修改view代码 from django.http import Http404 from django.sho ...

  2. node安装express-generator脚手架

    参考网址:https://www.jianshu.com/p/b555ba6f4067 全局安装: npm install express-generator -g 创建项目pro_test expr ...

  3. qt: 系统默认程序打开文件或者软件;

    Qt提供了QDesktopServices类, 可以利用openUrl函数调用默认程序打开文件: 源码参考: #ifdef Q_OS_WIN32 m_szHelpDoc = QString(" ...

  4. 数据可视化之pyecharts

    Echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生成 Echarts 图表的类库.实际上就是 Echarts 与 Python 的对接. 安装 ...

  5. 爬虫解析之css,xpath语法

    一.xpath语法 xpath实例文档 <?xml version="1.0" encoding="ISO-8859-1"?> <bookst ...

  6. Docker:容器间互联的应用zabbix监控项目 [十]

    一.docker容器间的互联 1.创建两个容器 [root@luoahong ~]# docker run -d --name luoahong httpd:latest 8f771f043391e7 ...

  7. 第十六节: EF的CodeFirst模式通过Fluent API修改默认协定

    一. 简介 1. 优先级:Fluent API > data annotations > default conventions. 2. 所有的Fluent API配置都要在 OnMode ...

  8. redis发布/订阅

    发布订阅简介 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息,消息之间通过channel传递. 准备工作 两台安装了redis的机器(虚拟 ...

  9. metasploit 教程之基本参数和扫描

    前言 首先我也不知道我目前的水平适不适合学习msf. 在了解一些msf之后,反正就是挺想学的.就写博记录一下.如有错误的地方,欢迎各位大佬指正. 感激不尽.! 我理解的msf msf全程metaspl ...

  10. 快速安装Java环境

    1.部署jdk8 jdk包地址:https://pan.baidu.com/s/1QNGpapGuex00F6HQ5pynHgtar -xzf jdk-8u60-linux-x64.tar.gz #安 ...