React: Hooks

React: Hooks

一. 什么是Hooks？

  • React 一直都提倡使用函数组件，但是有时候需要使用 state 或者其他一些功能时，只能使用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有

  • Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

  • 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks

  • 凡是 use 开头的 React API 都是 Hooks

二. Hooks解决的问题

  1. 类组件的不足

  • 状态逻辑难复用： 在组件之间复用状态逻辑很难，可能要用到 render props （渲染属性）或者 HOC（高阶组件），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（一般都是 div 元素），导致层级冗余

  • 趋向复杂难以维护：

    • 在生命周期函数中混杂不相干的逻辑（如：在 componentDidMount 中注册事件以及其他的逻辑，在 componentWillUnmount 中卸载事件，这样分散不集中的写法，很容易写出 bug ）
    • 类组件中到处都是对状态的访问和处理，导致组件难以拆分成更小的组件

  • this 指向问题：父组件给子组件传递函数时，必须绑定 this

    • react 中的组件四种绑定 this 方法的区别

    图》

  • 第一种是在构造函数中绑定 this：那么每次父组件刷新的时候，如果传递给子组件其他的 props 值不变，那么子组件就不会刷新；
  • 第二种是在 render() 函数里面绑定 this：因为 bind 函数会返回一个新的函数，所以每次父组件刷新时，都会重新生成一个函数，即使父组件传递给子组件其他的 props 值不变，子组件每次都会刷新；
  • 第三种是使用箭头函数：父组件刷新的时候，即使两个箭头函数的函数体是一样的，都会生成一个新的箭头函数，所以子组件每次都会刷新；
  • 第四种是使用类的静态属性：原理和第一种方法差不多，比第一种更简洁
  1. Hooks 优势

能优化类组件的三大问题

  • 能在无需修改组件结构的情况下复用状态逻辑（自定义 Hooks ）

  • 能将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）

  • 副作用的关注点分离：副作用指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。而 useEffect 在全部渲染完毕后才会执行，useLayoutEffect 会在浏览器 layout 之后，painting 之前执行。

三. API

useState

  • React 假设当你多次调用 useState 的时候，你能保证每次渲染时它们的调用顺序是不变的。

  • 通过在函数组件里调用它来给组件添加一些内部 state，React会 在重复渲染时保留这个 state

  • useState 唯一的参数就是初始 state

  • useState 会返回一个数组：一个 state，一个更新 state 的函数

    • 在初始化渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同
    • 你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并，而是直接替换
// 这里可以任意命名，因为返回的是数组，数组解构
const [state, setState] = useState(initialState);

  • 每次渲染都是独立的闭包

    • 每一次渲染都有它自己的 Props 和 State
    • 每一次渲染都有它自己的事件处理函数
    • 当点击更新状态的时候，函数组件都会重新被调用，那么每次渲染都是独立的，取到的值不会受后面操作的影响

  • 函数式更新

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

  • 惰性初始化 state

    • initialState 参数只会在组件的初始化渲染中起作用，后续渲染时会被忽略
    • 如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用
  • 性能优化
    • useCallback：接收一个内联回调函数参数和一个依赖项数组（子组件依赖父组件的状态，即子组件会使用到父组件的值） ，useCallback 会返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新
    • useMemo：把创建函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算

useEffect

  • effect（副作用）：指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。

  • 副作用操作可以分两类：需要清除的和不需要清除的。

  • 原先在函数组件内（这里指在 React 渲染阶段）改变 dom 、发送 ajax 请求以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性

  • useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API

  • useEffect 接收一个函数，该函数会在组件渲染到屏幕之后才执行，该函数有要求：要么返回一个能清除副作用的函数，要么就不返回任何内容

  • 与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。

useReducer

  • useReducer 和 redux 中 reducer 很像

  • useState 内部就是靠 useReducer 来实现的

  • useState 的替代方案，它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法

  • 在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等

useContext

  • 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值

  • 当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定

  • 当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值

  • useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>

  • useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context

useLayoutEffect

  • useEffect 在全部渲染完毕后才会执行

  • useLayoutEffect 会在 浏览器 layout 之后，painting 之前执行

  • 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect

  • 可以使用它来读取 DOM 布局并同步触发重渲染

  • 在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新

  • 尽可能使用标准的 useEffect 以避免阻塞视图更新

useRef

  • 类组件、React 元素用 React.createRef，函数组件使用 useRef

  • useRef 返回一个可变的 ref 对象，其 current 属性被初始化为传入的参数（initialValue）

const refContainer = useRef(initialValue);
  • useRef 返回的 ref 对象在组件的整个生命周期内保持不变，也就是说每次重新渲染函数组件时，返回的ref 对象都是同一个（使用 React.createRef ，每次重新渲染组件都会重新创建 ref）

forwardRef

函数组件没有实例，所以函数组件无法像类组件一样可以接收 ref 属性；

  • forwardRef 可以在父组件中操作子组件的 ref 对象

  • forwardRef 可以将父组件中的 ref 对象转发到子组件中的 dom 元素上

  • 子组件接受 props 和 ref 作为参数

useImperativeHandle

  • useImperativeHandle可以让你在使用 ref 时，自定义暴露给父组件的实例值，不能让父组件想干嘛就干嘛

  • 在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用

  • 父组件可以使用操作子组件中的多个 ref

自定义Hooks

  • 自定义 Hook 更像是一种约定，而不是一种功能。如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook

  • 有时候我们会想要在组件之间重用一些状态逻辑，之前要么用 render props ，要么用高阶组件，要么使用 redux

  • 自定义 Hook 可以让你在不增加组件的情况下达到同样的目的

  • Hook 是一种复用状态逻辑的方式，它不复用 state 本身

  • 事实上 Hook 的每次调用都有一个完全独立的 state

posted @ 2021-07-07 16:34  85号bobo  阅读(159)  评论(0)    收藏  举报