本文是 React Hooks 深入系列的后续。此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子作了阐述。
React Logo 与 HooksReact 的 logo 是一个原子图案, 原子组成了物质的表现。类似的, React 就像原子般构成了页面的表现; 而 Hooks 就如夸克, 其更接近 React 本质的样子, 但是直到 4 年后的今天才被真正设计出来。 —— Dan in React Conf(2018)
why Hooks?一: 多个组件间逻辑复用: 在 Class 中使用 React 不能将带有 state 的逻辑给单独抽离成 function, 其只能通过嵌套组件的方式来解决多个组件间逻辑复用的问题, 基于嵌套组件的思想存在 HOC 与 render props 两种设计模式。但是这两种设计模式是否存在缺陷呢?
嵌套地狱, 当嵌套层级过多后, 数据源的追溯会变得十分困难, 导致定位 bug 不容易; (hoc、render props)
性能, 需要额外的组件实例存在额外的开销; (hoc、render props)
命名重复性, 在一个组件中同时使用多个 hoc, 不排除这些 hoc 里的方法存在命名冲突的问题; (hoc)
二: 单个组件中的逻辑复用: Class 中的生命周期 componentDidMount、componentDidUpdate 甚至 componentWillUnMount 中的大多数逻辑基本是类似的, 必须拆散在不同生命周期中维护相同的逻辑对使用者是不友好的, 这样也造成了组件的代码量增加。
三: Class 的其它一些问题: 在 React 使用 Class 需要书写大量样板, 用户通常会对 Class 中 Constructor 的 bind 以及 this 的使用感到困惑; 当结合 class 与 TypeScript 一起使用时, 需要对 defaultValue 做额外声明处理; 此外 React Team 表示 Class 在机器编译优化方面也不是很理想。
useState 返回的值为什么是数组而非对象?原因是数组的解构比对象更加方便, 可以观察以下两种数据结构解构的差异。
返回数组时, 可以直接解构成任意名字。
[name, setName] = useState('路飞') [age, setAge] = useState(12)返回对象时, 却需要多一层的命名。
{value: name, setValue: setName} = useState('路飞') {value: name, setValue: setName} = useState(12) Hooks 传递的设计Hooks 是否可以设计成在组件中通过函数传参来使用? 比如进行如下调用?
const SomeContext = require('./SomeContext) function Example({ someProp }, hooks) { const contextValue = hooks.useContext(SomeContext) return <div>{someProp}{contextValue}</div> }使用传递的劣势是会出现冗余的传递。(可以联想 context 解决了什么)
Hooks 与 Class 中调用 setState 有不同的表现差异么?Hooks 中的 setState 与 Class 中最大区别在于 Hooks 不会对多次 setState 进行合并操作。如果要执行合并操作, 可执行如下操作:
setState(prevState => { return { ...prevState, ...updateValues } })此外可以对 class 与 Hooks 之间 setState 是异步还是同步的表现进行对比, 可以先对以下 4 种情形 render 输出的个数进行观察分析:
是否能使用 React Hooks 替代 Redux在 React 16.8 版本之后, 针对不是特别复杂的业务场景, 可以使用 React 提供的 useContext、useReducer 实现自定义简化版的 redux, 可见 todoList 中的运用。核心代码如下:
import React, { createContext, useContext, useReducer } from "react" // 创建 StoreContext const StoreContext = createContext() // 构建 Provider 容器层 export const StoreProvider = ({reducer, initialState, children}) => { return ( <StoreContext.Provider value={useReducer(reducer, initialState)}> {children} </StoreContext.Provider> ) } // 在子组件中调用 useStoreContext, 从而取得 Provider 中的 value export const useStoreContext = () => useContext(StoreContext)但是针对特别复杂的场景目前不建议使用此模式, 因为 context 的机制会有性能问题。具体原因可见 react-redux v7 回退到订阅的原因
Hooks 中如何获取先前的 props 以及 stateReact 官方在未来很可能会提供一个 usePrevious 的 hooks 来获取之前的 props 以及 state。
usePrevious 的核心思想是用 ref 来存储先前的值。
function usePrevous(value) { const ref = useRef() useEffect(() => { ref.current = value }) return ref.current } Hooks 中如何调用实例上的方法在 Hooks 中使用 useRef() 等价于在 Class 中使用 this.something。
/* in a function */ const X = useRef() X.current // can read or write /* in a Class */ this.X // can read or write Hooks 中 getDerivedStateFromProps 的替代方案在 React 暗器百解 中提到了 getDerivedStateFromProps 是一种反模式, 但是极少数情况还是用得到该钩子, Hooks 没有该 api, 那其如何达到 getDerivedStateFromProps 的效果呢?
function ScrollView({row}) { const [isScrollingDown, setISScrollingDown] = setState(false) const [prevRow, setPrevRow] = setState(null) // 核心是创建一个 prevRow state 与父组件传进来的 row 进行比较 if (row !== prevRow) { setISScrollingDown(prevRow !== null && row > prevRow) setPrevRow(row) } return `Scrolling down ${isScrollingDown}` } Hooks 中 forceUpdate 的替代方案