React Hook-Basic
文章目录

React Hook

  • FC 和 class 组件的区别
    • Class 通过实例化会自己维护组件里面的状态, 然后通过 render 多次刷新
    • FC 里面没有状态每次都初始化, 因此需要Hooks来维护状态
  • 使用 Hook 的目的是创造一个自维护 state 的组件, 这个组件是没有状态的
    • 首先有一点必须要了解的: react 本身是单向数据流
    • 因为单向数据流所以导致了 JSX 的 nested hell
  • 这个 react Hook 的目的就是为了实现状态以及逻辑共享
  • 只能在顶层调用 Hooks. 不要在循环, 条件或嵌套函数中调用 Hook
    • 这么做的目的是为了保证调用 hooks 的顺序.
  • 仅从 React 的函数式 class 中使用 Hooks. 不要从常规 JavaScript 函数中调用 Hook

Effect Hook

  • 这个类似于生命周期的钩子
  • 主要目的应该是为了复用一些逻辑

React Hook 的最佳实践

  • Value 和 setValue 配对, 后者一定影响前者, 前者仅被后者影响
  • 作为一个整体它们完全不受外界的影响
  • 将状态管理的部分放到 Hook 里面

React 一些要点

  1. React Hook 可以返回变量或者返回一段 JSX

    1. 如果返回变量的话这个 Hook 完全可以重用, 里面会对 state 以及 event 进行处理
    2. 如果返回 JSX 的话那其实就可以实现一个 Presentational Components
  2. 那么完全可以将所有状态变化的逻辑放到函数式组件的开头, 这种情况下就不需要对 state 进行操作

useCallback & useMemo 区别

  • 返回值不同, useCallback() 返回的是一个函数, useMemo() 返回的是一个变量
    • useCallback() 能够让一个函数的逻辑根据依赖变化
    • useMemo() 就是单纯计算得出结果然后缓存

useEffect & useMemo 区别

  • useEffect() 适合放 Side Effect, 会在渲染前就处理完, useMemo() 则会在渲染时执行

useMemo & useState 区别

  • useState 将会在 setState 时候触发重新渲染
  • useMemo 会在渲染时执行, 不适合放置渲染无关的操作比如 side effect
  • useState 方法没有 Dependencies 的概念

简单例子

Class 和 Hooks 的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
number: 0,
};
}
handerClick = () => {
/* 点击按钮的时候触发, 在 0 时刻, 快速绑定 5 个 timer, 这五个 timer 都会在 1 秒时输出 num */
/* 输出 1,2,3,4,5: setTimeout 破坏了 isBatchUpdate, 然后 class 组件会维护 state 因此输出 1-5 */
for (let i = 0; i < 5; i++) {
setTimeout(() => {
this.setState({ number: this.state.number + 1 });
console.log(this.state.number);
}, 1000);
}
};

render() {
return (
<div>
<button onClick={this.handerClick}>num++</button>
</div>
);
}
}


Hooks 的使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import "./styles.css";
import React from "react";

function Index() {
const [num, setNumber] = React.useState(0);
/* 点击按钮的时候触发, 在 0 时刻, 快速绑定 5 个 timer, 这五个 timer 都会在 1 秒时输出 num */
/* 点击按钮的时候触发, 在 0 时刻, 快速绑定 5 个 timer, 这五个 timer 都会在 1 秒时输出 num */
const handerClick = () => {
for (let i = 0; i < 5; i++) {
setTimeout(() => {
setNumber(num + 1);
console.log(num);
}, 1000);
}
};
return <button onClick={handerClick}>{num}</button>;
}

export default Index;