react hook 新特性汇总

###Hook 简介

Hook是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数, 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

举个例子:

const Example = (props) => {
  // 你可以在这使用 Hook
  return <div />;
  }

hook使用规则

1.只在最顶层使用 Hook
不要在循环,条件或嵌套函数中调用 Hook,** 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

2.只在 React 函数中调用 Hook

3.Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。

一、优点

1.没有破坏性改动

完全可选

100%向后兼容

现在可用

2.Hook 不会影响你对 React 概念的理解。

3只是换成了相关的函数方式更好的组合实现了现有的api

4.解决在组件之间复用状态逻辑很难

react没有提供将可复用性行为“附加”到组件的途径,

高阶组件倒是可以但是容易形成嵌套地狱

renderprops 需要修改相应的组件结构

但是hook 可以自定义相关的hook 把公共的状态抽离出来,如果需要单元测试,测试函数比测试类好侧的多,相信我,历史教训😂

5.解决复杂组件变得难以理解

复杂的组件常常有许多的状态逻辑和副作用(你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”,或者简称为“作用”),我们都知道react calss 模式 ,有一些基本的生命周期,组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。这也是所有的状态都堆在一起。难以测试。不清晰。

不可能将组件拆分的更小颗粒化

为了解决这个问题,Hook 将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据),这个时候就用到了 effect-hook

可以将不同的逻辑写在不同的effecthook中

  1. 难以理解的 class 这个相对的。

this的问题少了

7.趋势

二、常用的hook
1.useState-相当于class this.state

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

前者当前状态和后者一个让你更新它的函数

你可以在一个组件中多次使用 State Hook

与class不同点

1)不同于 class 的是初始值我们可以按照需要使用数字或字符串对其进行赋值,而不一定是对象

2)但是它不会把新的 state 和旧的 state 进行合并。

你不必使用多个 state 变量。State 变量可以很好地存储对象和数组,因此,你仍然可以将相关数据分为一组。然而,不像 class 中的 this.setState,更新 state 变量总是替换它而不是合并它。

3)更新 读取的时候比较方便 不需要this

class {this.state.count}

函数 {count}

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

<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
  1. 类似与vue的计算属性,如果初始 state 需要通过复杂计算获得,则可以传入一个函数,在函数中计算并返回初始的 state,此函数只在初始渲染时被调用:
    const [state, setState] = useState(() => {
      const initialState = someExpensiveComputation(props);
      return initialState;
    });
    
    ####
2.Effect Hook

useEffect 就是一个 Effect Hook,给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途,只不过被合并成了一个 API。(我们会在使用 Effect Hook 里展示对比 useEffect 和这些方法的例子。)

用法

1.可以通过return 清除相关的状态、副作用。

useEffect(() => {

  return () => {

  };
});
  1. 跟 useState 一样,你可以在组件中多次使用 useEffect 这个就可以将多个状态拆分成颗粒化。
  2. React 保证了每次运行 effect 的同时,DOM 都已经更新完毕。
  3. 提示
    与 componentDidMount 或 componentDidUpdate 不同,使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕,这让你的应用看起来响应更快。大多数情况下,effect 不需要同步地执行。在个别情况下(例如测量布局),有单独的 useLayoutEffect Hook 供你使用,其 API 与 useEffect 相同。
  4. 避免多次刷新
    在某些情况下,每次渲染后都执行清理或者执行 effect 可能会导致性能问题。在 class 组件中,我们可以通过在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑解决:
    这是很常见的需求,所以它被内置到了 useEffect 的 Hook API 中。如果某些特定值在两次重渲染之间没有发生变化,你可以通知 React 跳过对 effect 的调用,只要传递数组作为 useEffect 的第二个可选参数即可:

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

([])作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值,所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。

useContext让你不使用组件嵌套就可以订阅 React 的 Context。
另外 useReducer 可以让你通过 reducer 来管理组件本地的复杂 state。
三自定义hook

通过自定义 Hook,可以将组件逻辑提取到可重用的函数中。

自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook。

与 React 组件不同的是,自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么,以及它应该返回什么(如果需要的话)。换句话说,它就像一个正常的函数。但是它的名字应该始终以 use 开头,这样可以一眼看出其符合 Hook 的规则。

在两个组件中使用相同的 Hook 会共享 state 吗?不会。自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值),所以每次使用自定义 Hook 时,其中的所有 state 和副作用都是完全隔离的。

自我学习 持续更新~~~~