React Hook-Basic
文章目录

React Hook

  • 使用 Hook 的目的是创造一个自维护 state 的组件, 这个组件是没有状态的
    • 首先有一点必须要了解的: react 本身是单向数据流
    • 因为单向数据流所以导致了 JSX 的 nested hell
  • 这个 react Hook 的目的就是为了实现状态以及逻辑共享
  • 只能在顶层调用 Hooks。不要在循环、条件或嵌套函数中调用 Hook
  • 仅从 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() 的目的是让一些函数根据依赖变化, 依赖不变化函数就不变化
    • 典型引用场景是 onClick 事件, 如果是 inline onClick 事件每次 React Tree 刷新的时候就会 rerender, 使用 useCallback() 就可以省去多余的渲染
  • useMemo() 也很简单, 让一些变量根据依赖变化, 防止出现 useState() 那样重复 init 的情况

附录

React Hooks-Usage

(查看另一篇关于 React Hooks-Usage 的笔记)

Hook-useState() Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import {useState} from 'react';

function Example() {
// Declare a new state variable, which we'll call"count"
const [count, setCount] = useState(0); // 这里就是一个 Hook, 类似于直接或得到 getter 和 setter

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}