03. 该尝尝React Hook了。

cikenerd 发布于2019-08-26 10:43 / 1447人阅读

摘要：我们统一把这些操作称为副作用，或者简称为作用。尽可能使用标准的以避免阻塞视觉更新。大多数情况下，不需要同步地执行。返回的对象在组件的整个生命周期内保持不变。当对象内容发生变化时，并不会通知你。

Hook

Hook 是 React 16.8.0 的新增特性。

Hook 使你在非 class 的情况下可以使用更多的 React 特性。Hook 不能在 class 组件中使用。

使用规则：

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。

State Hook

useState

使用useState可以不通过class组件而在函数组件内使用state，可通过多次调用声明多个state

参数：

useState() 方法里面唯一的参数就是初始 state。

返回值：

当前 state 以及更新 state 的函数。

函数式更新：

如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      
      
      
    
  );
}

Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作（在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。）

useEffect

可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect 会在每次渲染后（第一次渲染之后和每次更新之后）都执行，如果你的 effect 返回一个函数，React 将会在组件卸载的时候执行清除操作时调用它。

useEffect在组件内可多次调用，Hook 允许我们按照代码的用途分离他们，React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。

使用位置：

组件内部调用 useEffect。将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。

性能优化：

useEffect 的第二个可选参数可以实现如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用。请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量

// 仅在 count 更改时更新
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

示例代码详解 useState 与 useEffect ：

// 引入 React 中的 useState Hook。它让我们在函数组件中存储内部 state
// 引入 useEffect
import React, { useState, useEffect } from "react";

function Example(props) {
  // 声明了一个叫 count 的 state 变量，然后把它设为 0
  const [count, setCount] = useState(0);
  // 声明第2个state
  const [isOnline, setIsOnline] = useState(null);

  // 无需清除的 effect
  useEffect(() => {
    // 将 document 的 title 设置为包含了点击次数的消息。
    document.title = `You clicked ${count} times`;
  });
  
  // 需要清除的 effect
  useEffect(() => {
    function handleFn(val) {
      setIsOnline(val);
    }
    // 注册监听
    XXAPI.subscribe(handleFn);
    // 清除监听
    return () => {
      XXAPI.unsubscribe(handleFn);
    };
  });

  return (
    
      // 读取 State: 我们可以直接用 count
      You clicked {count} times
      // 更新 State: 可以通过调用 setCount 来更新当前的 count
      
    
  );
}

useLayoutEffect

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。尽可能使用标准的 useEffect 以避免阻塞视觉更新。

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），这时需要用到useLayoutEffect

useRef

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

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      
      
    
  );
}

useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。

自定义Hook

自定义Hook 是一个函数，其名称以 use 开头(必须以 use 开头)，函数内部可以调用其他的 Hook。自定义Hook用于提取多组件之间的共享逻辑，可用于替代 render props 和 HOC。

在需要共享逻辑的组件内调用很简单，只需要引入定义好的自定义Hook，并传入自己想要的参数拿到你想要的返回值作用于当前组件。

如下例：

提取自定义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：

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

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

原文git地址觉得有用的话，来个star鼓励，持续更新中。

GPU云服务器云服务器购买了域名之后该干嘛 hook 逆向 hook java hook

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

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

react与redux通信之hook

摘要：新方案随着的发布，功能正式投入使用。那么，如果我们使用了，又该如何跟通信呢针对于这个问题，业界有人提供了一个取代的新插件。提供的创建上下文，返回该对象。可以预见的是，当你使用了，会在项目中逐渐把消灭，最后跟语法糖告别，回归函数的世界。 react和redux建立通信的方式有2种方案：老方案connect 新方案hook 老方案connect 曾经，我们会使用connect建立r...

lemon 2019-08-23 17:08 评论0 收藏0
快速了解 React Hooks 原理

摘要：使用该对象，可以跟踪属于组件的各种元数据位。调用你的组件这意味着它知道存储的元数据对象。下一次渲染会发生什么需要重新渲染组件由于之前已经看过这个组件，它已经有了元数据关联。为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！我们大部分 React 类组件可以保存状态，而函数组件不能？并且类组件具有生命周期，而函数组件却不能...

Hydrogen 2019-08-26 14:04 评论0 收藏0
React Hook 不完全指南

摘要：使用完成副作用操作，赋值给的函数会在组件渲染到屏幕之后。如此很容易产生，并且导致逻辑不一致。同时，这也是很多人将与状态管理库结合使用的原因之一。当我们通过的第二个数组类型参数，指明当前的依赖，就能避免不相关的执行开销了。前言本文内容大部分参考了 overreacted.io 博客一文，同时结合 React Hook 官方文章，整理并归纳一些笔记和输出个人的一些理解什么是 Hoo...

Lin_R 2019-08-26 13:50 评论0 收藏0
10分钟了解react新特性hooks

摘要：简介是的新增特性。我们统一把这些操作称为副作用，或者简称为作用。由于副作用函数是在组件内声明的，所以它们可以访问到组件的和。副作用函数还可以通过返回一个函数来指定如何清除副作用。目前为止，有两种主流方案来解决这个问题高阶组件和。 Hook 简介 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 us...

hlcfan 2019-08-26 13:58 评论0 收藏0
React Hooks入门: 基础

摘要：当组件安装和更新时，回调函数都会被调用。好在为我们提供了第二个参数，如果第二个参数传入一个数组，仅当重新渲染时数组中的值发生改变时，中的回调函数才会执行。前言　　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励，希望大家多多关注呀！React 16.8中新增了Hooks特性，并且在React官方文档中新增...

mrli2016 2019-08-23 15:36 评论0 收藏0