再聊react hook

React Hook是React函数式组件，它不仅仅有函数组件的特性，还带有React框架的特性。所以，官网文档多次强调：

只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook。你可以：

  • ✅ 在 React 的函数组件中调用 Hook
  • ✅ 在自定义 Hook 中调用其他 Hook

1. 那么 React 中 Function Component 与 Class Component 有何不同？

Class Component:

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

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

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

Function Component:

function ProfilePage(props) {
  const showMessage = () => {
    alert("Followed " + props.user);
  };

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

  return <button onClick={handleClick}>Follow</button>;
}

如下父级组件的调用方式：

<ProfilePageFunction user={this.state.user} />
<ProfilePageClass user={this.state.user} />

场景：那么当点击按钮后的 3 秒内，父级修改了 this.state.user，弹出的用户名是修改前的还是修改后的呢？
答案：Class Component 展示的是修改后的值，Function Component 展示的是修改前的值
原因：this 在 Class Component 中是可变的，当组件入参发生变化时， this.props同步改变。而 Function Component 不存在this.props 的语法，因此 props 总是不可变的。

2. 用Hook 创建函数组件，会有什么变化呢？

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
 
 function Example() {
   const [count, setCount] = useState(0);
 
   const handleAlertClick = useCallback(()=>{
     setTimeout(() => {
       alert('You clicked on: ' + count);
     }, 3000)
   }, [count]);
 
   return (
     <div>
       <p>You clicked {count} times</p>
       <button onClick={() => setCount(count + 1)}>
         增加 count
       </button>
       <button onClick={handleAlertClick}>
         显示 count
       </button>
     </div>
   );
 }
 const rootElement = document.getElementById("root");
 ReactDOM.render(<Example />, rootElement);

场景：点击 显示 按钮，在 3s 后（模拟耗时任务）会出现弹层。在这 3s 期间快速点击 增加 count 按钮
结果：3s 后看到的弹层计数仍旧为 0！
原因：在 handleAlertClick 函数执行的那个 Render 过程里，count 的值可以看作常量 。执行 setCount(count + 1) 时会交由一个全新的 Render 渲染，所以不会执行 handleAlertClick 函数。

那我们用useEffect 改造一下呢？

 const [count, setCount] = useState(0);
 useEffect(()=>{
    setTimeout(() => {
      alert('count: ' + count);
    }, 3000)
  }, [count]); // 监听count变化

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        增加 count
      </button>
    </div>
  );
}
...

行为：三秒钟内点击“增加 count”按钮三次。
结果：先显示0（初始化），然依次显示1，2，3，useEffect被触发4次。
原因：useEffect也是具有 Capture Value 的特性，每次render都是独立快照，拿到的 count 都是固化下来的常量。和上面例子不同之处在于，它监听了count变化，可以被触发多次Render。

什么是Capture Value?

每次 Render 的内容都会形成一个快照并保留下来，因此当状态变更而 Rerender 时，就形成了 N 个 Render 状态，而每个 Render 状态都拥有自己固定不变的 Props 与 State。

3. 如何绕过 Capture Value？

利用 useRef ！

useRef定义

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

ref 类型的变量通常是用来存储 DOM 元素引用。

但在 react hooks 中，它可以存放任何可变数据，并在所有 Render 过程中保持着唯一引用，因此所有对 ref 的赋值或取值，拿到的都只有一个最终状态，而不会在每个 Render 间存在隔离。

function Example() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  const handleAlertClick = useCallback(
    () => {
      setTimeout(() => {
        alert("You clicked on: " + countRef.current);
      }, 3000);
    },
    [count]
  );

  return (
    <div>
      <p>You clicked {count} times</p>
      <button
        onClick={() => {
          countRef.current = count + 1;
          setCount(count + 1);
        }}
      >
        增加 count
      </button>
      <button onClick={handleAlertClick}>显示 count</button>
    </div>
  );

行为：三秒钟内点击“增加 count”按钮三次。
结果: 先显示0（初始化），3s 后显示3次3。

4. useEffect搭配useReducer

利用 useEffect 的兄弟 useReducer 函数，可以将更新与动作解耦。

const [state, dispatch] = useReducer(reducer, initialState);
const { count, step } = state;

useEffect(() => {
  const id = setInterval(() => {
    dispatch({ type: "tick" }); // Instead of setCount(c => c + step);
  }, 1000);
  return () => clearInterval(id);
}, [dispatch]);

这就是一个局部 “Redux”，由于更新变成了dispatch({ type: "tick" }) 所以不管更新时需要依赖多少变量，在调用更新的动作里都不需要依赖任何变量。 具体更新操作在 reducer 函数里写就可以了

5. useMemo vs useCallback

按照官网说法，两个的相同点和不同点非常明确（React教程）

  • 相同点：
    • 都会在组件第一次渲染的时候执行
    • 依赖的变量发生改变时再次执行
    • 返回缓存的值
  • 不同点：
    • useMemo 返回缓存的变量
    • useCallback 返回缓存的函数

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

5.1 useMemo实例

export function useDocumentMap() {
  const { docState: { sideBarList = [] } = {} } = useStore()
  return useMemo(() => getDocumentMap(sideBarList), [sideBarList])
}

getDocumentMap是一个复杂计算函数，sideBarList为store里存储的值。UI显示的时候，需要做一次model=>UI model的转换。因为这个转换需要复杂计算，所以用useMemo做缓存，在sideBarList不变的情况下，调用useDocumentMap获取UI model只会计算一次。

5.2 useCallback实例

import React, { useState, useCallback } from 'react';
import Button from './Button';

export default function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const handleClickButton1 = () => {
    setCount1(count1 + 1);
  };

  const handleClickButton2 = useCallback(() => {
    setCount2(count2 + 1);
  }, [count2]);

  return (
    <div>
      <div>
        <Button onClickButton={handleClickButton1}>Button1</Button>
      </div>
      <div>
        <Button onClickButton={handleClickButton2}>Button2</Button>
      </div>
    </div>
  );
}

// Button组件
import React from 'react';

const Button = ({ onClickButton, children }) => {
  return (
    <>
      <button onClick={onClickButton}>{children}</button>
      <span>{Math.random()}</span>
    </>
  );
};

export default React.memo(Button);

可见Button组件只依赖onClickButton和children。
如果点击Button1，因为count1的值发生变化，导致容器App重新渲染，handleClickButton1变量重新被声明（又创建了一个新的函数对象），从而第一个Button被再次渲染。而handleClickButton2呢？因为被useCallback包了一层，且依赖count2，所以，此时handleClickButton2变量不会被重新声明，还是之前的函数引用地址，所以，第二个Button不会被重复渲染。

React.memo 这个方法，会对 props 做一个浅层比较，如果 props 没有发生改变，则不会重新渲染此组件

5.3 总结

  • 如果有函数传递给子组件，使用useCallback
  • 如果有值传递给子组件，使用useMemo
  • useMemo、useCallback 都自带闭包，类似useEffect的Capture Value能力

参考文章：
理解 React Hooks 的 Capture Value 特性
精读《useEffect 完全指南》

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,658评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,482评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,213评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,395评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,487评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,523评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,525评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,300评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,753评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,905评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,541评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2赞 352