文档章节

初探React Hooks & SSR改造

o
 osc_a22drz29
发布于 2019/03/28 08:25
字数 2113
阅读 22
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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 模式下,我们继承了 BaseBase 会定义 constructorcomponentWillMount 来处理 stateprops ,可以帮助我们解决服务端渲染和客户端渲染下初始化状态数据的赋值和获取,因此我们才可以统一一套代码在客户端和服务端中运行(如需要,查看上篇文章了解详情)。

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

class 模式下,我们使用继承 Base 来处理 stateprops,由于 Base 已经封装了 constructor 和 componentWillMount 处理 stateprops,因此我们只需要定义好静态 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 中的 getPropsrequestInitialData 钩子调用时,需要传入当前 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 的改造非常平滑,classhooks 混用也不会造成什么问题,如果需要在旧的项目中使用 hooks 或者对原有的 class 进行改造,完全可以慢慢的一部分一部分迭代。当然 React Hooks 还有 useContext useReducer 等,不妨现在就去试试 Hooks

 

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

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
React 16 Roadmap

感谢支持ayqy个人订阅号,每周义务推送1篇(only unique one)原创精品博文,话题包括但不限于前端、Node、Android、数学(WebGL)、语文(课外书读后感)、英语(文档翻译) 如果觉得弱水三...

前端向后
2019/05/19
0
0
(十分钟视频教程)nodejs基础实战教程3:react服务端渲染入门篇

视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成...

osc_ragotoz1
2018/05/15
9
0
详解React 元素渲染

元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。 const element = <h1>Hello, world!</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以...

osc_2qah5avr
07/08
1
0
EggJs + Next.js+Mobx+ Typescript

参考文章: Next.js中文文档:http://nextjs.frontendx.cn/docs/#%E5%AE%89%E8%A3%85 Next.js入门案例教程:https://cloud.tencent.com/developer/article/1369493 EggJs + Next.js + React......

Liens
2019/05/08
295
0
彻底理解React 之React SSR、React服务端渲染,教你从零搭建配置

技术栈: React16.x + React-router4.x + React-redux5.x + Redux-thunk2.x + express4.x 前言 前段时间研究了下React SSR,SEO。后面就想把整个过程总结一下,同时也加深自己对其的理解 。(...

osc_1ipdqsf2
04/24
14
0

没有更多内容

加载失败,请刷新页面

加载更多

聚焦餐饮行业,研究院昨发布数据显示

谈话,聚焦餐饮行业,研究院昨发布数据显示,今年上半年,全国餐饮行业招聘需求增长46.18%,平均月薪6387元.随着餐饮行业的快速发展,"如何留人"也成为餐饮企业的思考题. 记者了解到,中国饭店协会...

点击fojewio
15分钟前
12
0
3·15晚会曝光上海氪信、招财旺旺SDK包泄露隐私 后台上传交易验证码敏感信息

来源 | 央视 7月16日,央视3·15晚会曝光国美易卡、美的空调遥控器、姨妈日历、银码头等50多款软件中内嵌的SDK包读取、上传用户隐私问题。上海氪信信息技术有限公司、北京招财旺旺信息技术有...

镭射财经
24分钟前
9
0
名称=''的无效表单控件不可聚焦 - An invalid form control with name='' is not focusable

问题: I have an acute problem on my website. 我的网站上有一个严重的问题。 In Google Chrome some customers are not able to proceed to my payment page. 在Google Chrome浏览器中,某......

技术盛宴
25分钟前
14
0
Hacker News 简讯 2020-07-17

更新时间: 2020-07-17 00:00 D 2.093.0 - (dlang.org) D 2.093.0 得分:32 | 评论:2 Let’s avoid talk of ‘chemical imbalance’: it’s people in distress - (psyche.co) 让我们避免谈论“......

FalconChen
30分钟前
80
0
【LeetCode】 59 在排序数组中查找元素的第一个和最后一个位置

题目: 解题思路: 二分法 https://leetcode-cn.com/problems/find-first-and-last-position-of-element-in-sorted-array/solution/zai-pai-xu-shu-zu-zhong-cha-zhao-yuan-su-de-di-yi-/ 代......

JaneRoad
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部