React Hooks 解析（下）：进阶

APICloud 发布于2019-08-23 17:04 / 660人阅读

摘要：第一次了解这项特性的时候，真的有一种豁然开朗，发现新大陆的感觉。在绝大多数情况下，是更好的选择。唯一例外的就是需要根据新的来进行操作的场景。会保证在页面渲染前执行，也就是说页面渲染出来的是最终的效果。上面条规则都是为了保证调用顺序的稳定性。

欢迎关注我的公众号睿Talk，获取我最新的文章：

一、前言

React Hooks 是从 v16.8 引入的又一开创性的新特性。第一次了解这项特性的时候，真的有一种豁然开朗，发现新大陆的感觉。我深深的为 React 团队天马行空的创造力和精益求精的钻研精神所折服。本文除了介绍具体的用法外，还会分析背后的逻辑和使用时候的注意事项，力求做到知其然也知其所以然。

这个系列分上下两篇，这里是上篇的传送门：
React Hooks 解析（上）：基础

二、useLayoutEffect

useLayoutEffect的用法跟useEffect的用法是完全一样的，都可以执行副作用和清理操作。它们之间唯一的区别就是执行的时机。

useEffect不会阻塞浏览器的绘制任务，它在页面更新后才会执行。

而useLayoutEffect跟componentDidMount和componentDidUpdate的执行时机一样，会阻塞页面的渲染。如果在里面执行耗时任务的话，页面就会卡顿。

在绝大多数情况下，useEffectHook 是更好的选择。唯一例外的就是需要根据新的 UI 来进行 DOM 操作的场景。useLayoutEffect会保证在页面渲染前执行，也就是说页面渲染出来的是最终的效果。如果使用useEffect，页面很可能因为渲染了 2 次而出现抖动。

三、useContext

useContext可以很方便的去订阅 context 的改变，并在合适的时候重新渲染组件。我们先来熟悉下标准的 context API 用法：

const ThemeContext = React.createContext("light");

class App extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}

// 中间层组件
function Toolbar(props) {
  return (
    
      
    
  );
}

class ThemedButton extends React.Component {
  // 通过定义静态属性 contextType 来订阅
  static contextType = ThemeContext;
  render() {
    return

除了定义静态属性的方式，还有另外一种针对Function Component的订阅方式：

function ThemedButton() {
    // 通过定义 Consumer 来订阅
    return (
        
          {value =>

使用useContext来订阅，代码会是这个样子，没有额外的层级和奇怪的模式：

function ThemedButton() {
  const value = useContext(NumberContext);
  return

在需要订阅多个 context 的时候，就更能体现出useContext的优势。传统的实现方式：

function HeaderBar() {
  return (
    
      {user =>
        
          {notifications =>
            
              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            
          }
      }
    
  );
}

useContext的实现方式更加简洁直观：

function HeaderBar() {
  const user = useContext(CurrentUser);
  const notifications = useContext(Notifications);

  return (
    
      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    
  );
}

四、useReducer

useReducer的用法跟 Redux 非常相似，当 state 的计算逻辑比较复杂又或者需要根据以前的值来计算时，使用这个 Hook 比useState会更好。下面是一个例子：

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return {count: state.count + 1};
    case "decrement":
      return {count: state.count - 1};
    case "reset":
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      
      
      
    
  );
}

结合 context API，我们可以模拟 Redux 的操作了，这对组件层级很深的场景特别有用，不需要一层一层的把 state 和 callback 往下传：

const TodosDispatch = React.createContext(null);
const TodosState = React.createContext(null);

function TodosApp() {
  const [todos, dispatch] = useReducer(todosReducer);

  return (
    
      
        
      
    
  );
}

function DeepChild(props) {
  const dispatch = useContext(TodosDispatch);
  const todos = useContext(TodosState);

  function handleClick() {
    dispatch({ type: "add", text: "hello" });
  }

  return (
    <>
      {todos}
      
    
  );
}

五、useCallback / useMemo / React.memo

useCallback和useMemo设计的初衷是用来做性能优化的。在Class Component中考虑以下的场景：

class Foo extends Component {
  handleClick() {
    console.log("Click happened");
  }
  render() {
    return ;
  }
}

传给 Button 的 onClick 方法每次都是重新创建的，这会导致每次 Foo render 的时候，Button 也跟着 render。优化方法有 2 种，箭头函数和 bind。下面以 bind 为例子：

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log("Click happened");
  }
  render() {
    return ;
  }
}

同样的，Function Component也有这个问题：

function Foo() {
  const [count, setCount] = useState(0);

  const handleClick() {
    console.log(`Click happened with dependency: ${count}`)
  }
  return ;
}

而 React 给出的方案是useCallback Hook。在依赖不变的情况下 (在我们的例子中是 count )，它会返回相同的引用，避免子组件进行无意义的重复渲染：

function Foo() {
  const [count, setCount] = useState(0);

  const memoizedHandleClick = useCallback(
    () => console.log(`Click happened with dependency: ${count}`), [count],
  ); 
  return ;
}

useCallback缓存的是方法的引用，而useMemo缓存的则是方法的返回值。使用场景是减少不必要的子组件渲染：

function Parent({ a, b }) {
  // 当 a 改变时才会重新渲染
  const child1 = useMemo(() => , [a]);
  // 当 b 改变时才会重新渲染
  const child2 = useMemo(() => , [b]);
  return (
    <>
      {child1}
      {child2}
    
  )
}

如果想实现Class Component的shouldComponentUpdate方法，可以使用React.memo方法，区别是它只能比较 props，不会比较 state：

const Parent = React.memo(({ a, b }) => {
  // 当 a 改变时才会重新渲染
  const child1 = useMemo(() => , [a]);
  // 当 b 改变时才会重新渲染
  const child2 = useMemo(() => , [b]);
  return (
    <>
      {child1}
      {child2}
    
  )
});

六、useRef

Class Component获取 ref 的方式如下：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  
  componentDidMount() {
    this.myRef.current.focus();
  }  

  render() {
    return ;
  }
}

Hooks 的实现方式如下：

function() {
  const myRef = useRef(null);

  useEffect(() => {
    myRef.current.focus();
  }, [])
  
  return ;
}

useRef返回一个普通 JS 对象，可以将任意数据存到current属性里面，就像使用实例化对象的this一样。另外一个使用场景是获取 previous props 或 previous state：

function Counter() {
  const [count, setCount] = useState(0);

  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });
  const prevCount = prevCountRef.current;

  return Now: {count}, before: {prevCount};
}

七、自定义 Hooks

还记得我们上一篇提到的 React 存在的问题吗？其中一点是：

带组件状态的逻辑很难重用

通过自定义 Hooks 就能解决这一难题。

继续以上一篇文章中订阅朋友状态的例子：

import React, { useState, useEffect } from "react";

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return "Loading...";
  }
  return isOnline ? "Online" : "Offline";
}

假设现在我有另一个组件有类似的逻辑，当朋友上线的时候展示为绿色。简单的复制粘贴虽然可以实现需求，但太不优雅：

import React, { useState, useEffect } from "react";

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  return (
    
      {props.friend.name}
    
  );
}

这时我们就可以自定义一个 Hook 来封装订阅的逻辑：

import React, { useState, useEffect } from "react";

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

自定义 Hook 的命名有讲究，必须以use开头，在里面可以调用其它的 Hook。入参和返回值都可以根据需要自定义，没有特殊的约定。使用也像普通的函数调用一样，Hook 里面其它的 Hook（如useEffect）会自动在合适的时候调用：

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return "Loading...";
  }
  return isOnline ? "Online" : "Offline";
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    
      {props.friend.name}
    
  );
}

自定义 Hook 其实就是一个普通的函数定义，以use开头来命名也只是为了方便静态代码检测，不以它开头也完全不影响使用。在此不得不佩服 React 团队的巧妙设计。

八、Hooks 使用规则

使用 Hooks 的时候必须遵守 2 条规则：

只能在代码的第一层调用 Hooks，不能在循环、条件分支或者嵌套函数中调用 Hooks。

只能在Function Component或者自定义 Hook 中调用 Hooks，不能在普通的 JS 函数中调用。

Hooks 的设计极度依赖其定义时候的顺序，如果在后序的 render 中 Hooks 的调用顺序发生变化，就会出现不可预知的问题。上面 2 条规则都是为了保证 Hooks 调用顺序的稳定性。为了贯彻这 2 条规则，React 提供一个 ESLint plugin 来做静态代码检测：eslint-plugin-react-hooks。

九、总结

本文深入介绍了 6 个 React 预定义 Hook 的使用方法和注意事项，并讲解了如何自定义 Hook，以及使用 Hooks 要遵循的一些约定。到此为止，Hooks 相关的内容已经介绍完了，内容比我刚开始计划的要多不少，想要彻底理解 Hooks 的设计是需要投入相当精力的，希望本文可以为你学习这一新特性提供一些帮助。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103769.html

新上课程推荐：《React Hooks 案例详解（React 进阶必备）》

摘要：课程制作和案例制作都经过精心编排。对于开发者意义重大，希望对有需要的开发者有所帮助。是从提案转为正式加入的新特性。并不需要用继承，而是推荐用嵌套。大型项目中模块化与功能解耦困难。从而更加易于复用和独立测试。但使用会减少这种几率。 showImg(https://segmentfault.com/img/bVbpNRZ?w=1920&h=1080); 讲师简介曾任职中软军队事业部，参与...

Lin_YT 2019-08-23 15:53 评论0 收藏0
React Hooks 解析（上）：基础

摘要：第一次了解这项特性的时候，真的有一种豁然开朗，发现新大陆的感觉。为了解决这一痛点，才会有剪头函数的绑定特性。它同时具备和三个生命周期函数的执行时机。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 React Hooks 是从 v16.8 引入的又一开创性的新特性。第一次了解这项特性...

yy736044583 2019-08-23 17:01 评论0 收藏0
React系列 --- 从Mixin到HOC再到HOOKS(四)

摘要：返回元素的是将新的与原始元素的浅层合并后的结果。生命周期方法要如何对应到函数组件不需要构造函数。除此之外，可以认为的设计在某些方面更加高效避免了需要的额外开支，像是创建类实例和在构造函数中绑定事件处理器的成本。 React系列 React系列 --- 简单模拟语法(一)React系列 --- Jsx, 合成事件与Refs(二)React系列 --- virtualdom diff算法实...

Lionad-Morotar 2019-08-26 10:38 评论0 收藏0
React 新特性 Hooks 讲解及实例(四)

摘要：粟例说明一下获取子组件或者节点的句柄指向已挂载到上的文本输入元素本质上，就像是可以在其属性中保存一个可变值的盒子。粟例说明一下渲染周期之间的共享数据的存储上述使用声明两个副作用，第一个每隔一秒对加，因为只需执行一次，所以每二个参为空数组。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ React 新特性讲解及实例(一) React 新特性 Hooks 讲解及实...

aboutU 2019-08-23 18:38 评论0 收藏0
Webpack Loader 高手进阶(一)

摘要：在一个构建过程中，首先根据的依赖类型例如调用对应的构造函数来创建对应的模块。文章首发于个人github blog: Biu-blog，欢迎大家关注~ Webpack 系列文章： Webpack Loader 高手进阶（一）Webpack Loader 高手进阶（二）Webpack Loader 高手进阶（三） Webpack loader 详解 loader 的配置 Webpack...

MAX_zuo 2019-08-26 13:34 评论0 收藏0