React Hook介绍(一）：React State HooK

2024-01-25 22:42:16

一、简介

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有多个子属性时。

码农公寓

相关文章