React Hook介绍(一）：React State HooK

一、简介

    React Hook是React16.8的新增特性：它是一种可以让你不编写Class的情况下使用state及其他React的特性，即一种特殊的钩子函数，即钩入了React特性的函数，其实可以叫：函数组件的写法。

   我的总结： 一个React页面，可以不需要定义成Class的方式，只要定义成函数模式，这个函数模式还可以获取到State，后面阿里的umi hooks和Ahooks中各个hook可以很省事写一些功能，

最终目的就是加快生产率，提升组件的复用能力，例如umi中完全不需要dva了即不需要Model文件的定义，只需要改写成hook的用法。

   React自带的两个关键hook，其中一个是State Hook，另一个是Effect Hook，当然后面会去研究阿里内部用的ahooks( 非开源的umi hooks)，这些hook(即特殊函数）均以use开始作为命名规范。

二、React State HooK，即在React函数组件中添加内部state的能力

  1.以前我们定义一个无状态组件是这样的：

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

或者是这样的：

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

现在我们要为这类函数引入React state的能力，所以无状态组件，可以改称为：函数组件。

2.这边有几句话要重视：

     1.Hook在class内部不起作用，但可以用它们来代替class。

     2.在函数组件中没有this.     

3.如何使用React State，如下例子：

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量 
 const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
           

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

•      这是一个数组解构的定义法，即useState它可以传一个参数进去，这个参数可以是数字或者字符串，其实还可以是对象和数组（但官方建议是分开成单个），例如：

  const [state, setState] = useState({ left: 0, top: 0, width: 100, height: 100 });
             

          如果要采用合并方式更新这个state中的某一些值时，即有一些值要保留，则...state是关键：

function handleWindowMouseMove(e) {
      // 展开 「...state」 以确保我们没有 「丢失」 width 和 height   
   setState(state => ({ ...state, left: e.pageX, top: e.pageY }));   
 }
           

•      返回有两个值的数组，第一个值是当前的state，第二个值是更新state的函数，后面可以通过setState这个函数（这个名字可以随便取）去更新state的值，注意这个state每次均有上一次值的记忆的功能，不是简单的变量值。
• 读取State

      A.想在 class 中显示当前的 count，我们读取 

this.state.count, 例如：

<p>You clicked {this.state.count} times</p>
           

   B.在函数中，我们可以直接用 

count

:

<p>You clicked {count} times</p>
           

• 更新State

在 class 中，我们需要调用 

this.setState()

 来更新 

count

 值：

<button onClick={() => this.setState({ count: this.state.count + 1 })}>    Click me
  </button>
           

在函数中，我们已经有了 

setCount

 和 

count

 变量，所以我们不需要 

this

:

<button onClick={() => setCount(count + 1)}>    Click me
  </button>
           

4.Hook的使用过程有两条规则必须遵循：

（1）规则一：只在最顶层使用Hook: 不要在循环，条件或者嵌套函数中调用Hook，其实目的就是为了保证：按顺序被调用。

 （2）规则二：只在React函数（即非普通函数，其实就是React函数组件中）中调用Hook:

        A.在React函数组件中调用Hook

        B.在自定义Hook中调用其它Hook

三、useState 初始化state的高级用法

    如何写一个函数，通过复杂计算，把结果作为这个state的初始值，把参数写成一个函数形式传入例如：

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});
           

四、useState如何实现合并更新state?

setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});
           

五、useState和useReducer有什么区别？

  useState一般用来更新单个State，useReducer一般用来更新这个State有多个子属性时。