React Hooks 入门记录

2020-04-04 本文已影响0人 Actoress

什么是 Hooks

以往，React 组件都是通过 class 的形式来编写，只有无状态组件才可以用函数来编写。Hooks 就允许我们在函数组件中使用预定义函数，来标记状态和组件生命周期，这使得所有组件都可以使用函数来编写。

类组件的劣势

1. 状态逻辑难复用
  缺少复用机制
  渲染属性和高阶组件导致层级冗余
1. 趋向复杂难以维护
  生命周期函数混杂不相干逻辑
  想干逻辑分散在不同生命周期
1. this指向困扰
  内联函数过度创建新句柄
  类成员函数不能保证this

优化类组件的三大问题

函数组件无 this 问题
自定义 Hook 方便复用状态逻辑
副作用的关注点分离

Hooks 使用法则

官方文档: https://reactjs.org/docs/hooks-rules.html

仅在顶层调用 Hooks 函数

整个 Hooks 函数都依赖调用顺序，这样 React 才能在不同的渲染周期中把相同的逻辑关联起来，一旦 Hooks 函数不在顶层调用，那么很有可能在组件的不同渲染周期中，他们的调用顺序发生了变化，进而导致变量混乱等错误，为了尽量规避这些问题，所以尽量把 Hooks 放在最顶层。

仅在函数组件及函数组件中调用 Hooks 函数，不能放在普通函数及类组件中

Hooks 函数必须是use开头

Hooks 常见问题

生命周期函数如何映射到 Hooks ？

getDerivedStateFromError() 这个处理错误的函数，暂时无法在 Hooks 中实现，由此看出 Hooks 暂时无法代替类组件

function App () {
  useEffect(() => {
    // componentDidMount
    return () => {
      // componentWillUnmount
    }
  }, [])
  let renderCouter = useRef(0) // 通过 ref 来保持渲染计数
  renderCouter.current++

  useEffect(() => {
    if (renderCouter > 1) {
      // componentDidUpdate
    }
  })
}

类实例成员变量如何映射到 Hooks ?

使用 useRef(0)，同步到 current 中

Hooks 中如何获取历史 props 和 state

使用 useRef(0)，同步到 current 中

如何强制更新一个 Hooks 组件

创建一个不参与渲染的 state 的值，通过修改这个 state 的值来实现强制渲染

function Counter () {
  const [updater, setUpdater] = useState(0)
  function forceUpdate () {
    setUpdater(updater => updater + 1)
  }
}

使用 eslint-plugin-react-hooks 防止代码出错

1.安装

npm install eslint-plugin-react-hooks -D

2.在package.json 中配置

// package.json
...
"eslintConfig": {
    "extends": "react-app",
    "plugins": [
        "react-hooks"
    ],
    "rules": {
        "react-hooks/rules-of-hooks": "error"
    }
},
...

简单使用 useState

使用传统类组件

import React, { Component } from 'react'
class ClassComponent extends Component {
  state = {
    count: 0
  }
  render () {
    const { count } = this.state
    return (
      <button onClick={() => {this.setState({ count: count + 1 })}}>
        ClassComponent Click Count ({count})
      </button>
    )
  }
}

使用 Hooks

import React, { Component, useState } from 'react'
function HooksComponent () {
  // useState 传入 count 的默认值
  // count 获取值
  // setCount 设置值
  const [count, setCount] = useState(0)
  return (
    <button onClick={ () => { setCount(count + 1)} }>
        HooksComponent Click Count ({count})
    </button>
  )
}

通过 props 设置默认值

import React, { Component, useState } from 'react'
function HooksComponetDefault (props) {
  // 使用 props 设置默认值，useState 传入的函数只会被调用一次
  const [count, setCount] = useState(() => {
    return props.defaultCount || 0
  })
  return (
    <button onClick={ () => { setCount(count + 1)} }>
        HooksComponent Click Count ({count})
    </button>
  )
}

使用 Effect Hooks

常见副作用：

绑定事件
网络请求
访问DoM

常见的副作用时机：

Mount之后（componentDidMount）
Update之后（componentDidUpdate）
Unmount之前（componentWillUnmount）

以上的时机在传统类组件中，是在生命周期中解决，在 hooks 中的解决方案：useEffect()

关于 useEffect()

userEffect()标准上是在组件渲染(render)之后调用，并且根据自定义状态来决定是否调用，函数组件第一次渲染后的调用，就相当于componentDidMount()，后面的调用都相当于componentDidUpdate()。

userEffect()可以返回一个回调函数，这个回调函数的执行时机跟userEffect()执行时机挂钩。这个回调函数的主要作用是 清除上一次副作用所遗留下来的状态

useEffect() 的参数

【第一个参数】第一个参数为一个函数，返回值为回调函数。回调函数在视图被销毁的时候触发，1.组件重渲染，2.组件被卸载

【第二个参数】如果不填，则每次渲染后都会执行。第二个参数为一个数组，只有数组的每一项都不变的情况下，userEffect()才不会执行，因此，传一个空数组的话，该 useEffect 就只会在第一次调用一次

简单使用

function HooksCompinentUseEffect () {
  const [ count, setCount ] = useState(0)
  const [ size, setSize ] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  })
  const onWindowResize = () => {
    setSize({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    })
  }

  // useEffect 第一个参数为一个函数
  // 这里类似 componentDidount 和 componentDidUpdate
  useEffect(() => {
    document.title = count
  })

  // useEffect 第一个参数为一个函数，第二个参数为一个数组，只有数组的每一项都不变的情况下，userEffect()才不会执行
  // 这里类似 componentDidMount 和 componentWillUnmount
  useEffect(() => {
    window.addEventListener('resize', onWindowResize, false)
    // 回调函数在视图被销毁的时候触发，1.组件重渲染，2.组件被卸载
    return () => {
      window.removeEventListener('resize', onWindowResize, false)
    }
  },  [])
  return (
    <div>
      <button onClick={() => { setCount(count + 1)} }>
        HooksCompinentUseEffect Click Count ({count})
      </button>
      W: {size.width} | H: {size.height}
    </div> 
  )
}

Hooks环境下的Context

不要滥用 context，因为会破坏组件的独立性

import React, { useState, createContext, useContext } from 'react'
// 使用 context
const CountContext = createContext()
function HooksContextProvider () {
  const [ count, setCount ] = useState(0)
  return (
    <div>
      <button onClick={() => { setCount(count + 1) }}>HooksContextProvider {count}</button>
      {/* value 中设置的是需要共享的值 */}
      <CountContext.Provider value={count}>
        <HooksContextConsumer />
      </CountContext.Provider>
    </div>
  )
}
// 使用 useContext 调用，参数为创建的 Provider
function HooksContextConsumer () {
  const count = useContext(CountContext)
  return (
    <div>
      HooksContextConsumer: <b>{count}</b>
    </div>
  )
}

使用 useMemo 和 memo

useMemo 和 memo 的区别，memo针对的是一个组件的渲染是否重复执行，useMemo定义了一段函数是否重复执行。本质都是利用同样的算法，来判断依赖是否发生改变，进而决定是否触发特定逻辑，同样都用来做性能优化。

useMemo的参数

第一个参数为要执行的逻辑函数

第二个参数为这个函数锁依赖的变量组成的数组，如果不传则 useMemo 的逻辑每次都执行，如果传入空数组就执行执行一次

与 useEffect 的差异

两个函数的调用时机不同，useEffect() 执行的是副作用，所以一定是在渲染完成之后运行，而useMemo() 是需要有返回值，返回值直接参与渲染，因为 useMemo() 是在渲染期间完成的。两者存在一前一后的区别

useMemo 简单使用

import React, { useState, useMemo } from 'react'
// 使用 memo
function HookMemoParent () {
  const [ count, setCount ] = useState(0)
  // 第一个参数为要执行的逻辑函数
  // 第二个参数为这个函数锁依赖的变量组成的数组，如果不传则 useMemo 的逻辑每次都执行，如果传入空数组就执行执行一次
  // 当第二个参数发生变化时，就会触发逻辑，跟数组是什么值无关
  const doubleCount = useMemo(() => {
    return count * 2
  }, [count])

  // 根据第二个参数，count < 3 时，保持不变，不会重新计算
  // 当数组中的 bool 值发生改变时，就会重新渲染，false => true => false，所以 boolCount 会重新渲染两次
  const boolCount = useMemo(() => {
    return count * 3
  }, [count === 3])

  return (
    <div>
      <button onClick={() => {setCount(count + 1)}}>HookMemoParent: {count}，doubleCount: {doubleCount}, boolCount: {boolCount}</button>
      <HooksMemoChild count={doubleCount}></HooksMemoChild>
    </div>
  )
}
function HooksMemoChild (props) {
  return (
    <div>{props.count}</div>
  )
}

useMemo 和 useCallback

当需要用 useMemo 返回一个函数时，可以使用 useCallback 代替，可以替代上一层函数。使用 useCallback 不能解决阻止创建新的函数，因为每次组件的函数执行都会创建新的函数，但是创建的这个函数不一定能够被返回，很可能会被直接弃用。useCallback解决的是传入子组件的函数参数过渡变化，导致子组件过渡渲染的问题。实际上 useCallback 只是 useMemo 的一种简写。

【特别提醒】使用 useMemo 和 useCallback 时，当依赖变化时，useMemo 和 useCallback 一定重新执行。但是，当依赖没变化时，不能保证它们一定不执行，也可能重新执行，这是考虑内存优化的结果，react 官方的文档中也没有打包票一定不执行。所以，useMemo 和 useCallback 可以作为一种锦上添花的方案，不可以过渡依赖它们是否重新执行。

useCallback的参数

第一个参数为要执行的逻辑函数

第二个参数为这个函数锁依赖的变量组成的数组，如果不传则 useMemo 的逻辑每次都执行，如果传入空数组就执行执行一次

useMemo(() => {
  return () => { console.log("click") }
}, [])
// 上下两者等价
useCallback(() => {
  console.log("click")
}, [])

使用 useRef

获取子组件或者DOM节点的句柄

获取跨越渲染周期的任意数据

useRef 和 useState 区别

state 的赋值会触发组件重渲染，但是 ref 不会

【特别用法】

如果在组件中，需要使用上次渲染的数据，可以使用useRef，同步到 current 中

// useRef
function HooksUseRef () {
  const [ count, setCount ] = useState(0)
  // 声明ref
  const countRef = useRef()
  // 将定时器实例，通步在useRef中，这样就可以防止每次渲染时重复调用
  const timer = useRef()

  // 给子组件传递的事件
  const bindChildClick = useCallback(() => {
    console.log('click')
    // 通过 current 获取 DOM 节点
    console.log(countRef.current)
    // 通过 ref 调用子组件的方法
    countRef.current.speak()
  }, [countRef])

  // 使 count 自增
  useEffect(() => {
    timer.current = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    return () => {
      cleanup
    }
  }, [])
  // 监测 count 大于10，停止自增
  useEffect(() => {
    if (count >= 10) {
      clearInterval(timer.current)
    }
  })

  return (
    <div>
      <button onClick={() => {setCount(count + 1)}}>HooksUseRef: {count}</button>
      {/* 给类组件的ref属性赋值 */}
      <HooksUseRefClassChild ref={countRef} count={count} onClick={bindChildClick}></HooksUseRefClassChild>
    </div>
  )
}
// 类组件获取 ref
class HooksUseRefClassChild extends PureComponent {
  speak () {
    console.log('this is child function: ', this.props.count)
  }
  render () {
    const { props } = this
    return <b onClick={props.onClick}> HooksUseRefClassChild: {props.count}</b>
  }
}

自定义 Hooks 函数

// 自定义 hooks 函数，一定要使用 use 开头
function useCount (defaultCount) {
  const [count, setCount] = useState(defaultCount)
  const timer = useRef()
  // 使 count 自增
  useEffect(() => {
    timer.current = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    return () => {
      cleanup
    }
  }, [])
  // 监测 count 大于10，停止自增
  useEffect(() => {
    if (count >= 10) {
      clearInterval(timer.current)
    }
  })
  // 这里的返回值可以自定义，我参考 useState 的返回
  return [count, setCount]
}
// 自定义 hooks 函数，返回 JSX
function useCountJSX (defaultCount) {
  return (
    <b>{defaultCount}</b>
  )
}
function HooksSelfFunciton () {
  const [count, setCount] = useCount(0) // 模仿原生的 useState
  const CountJSX = useCountJSX(count) // 直接返回 JSX
  return (
    <div>
      <button onClick={() => {setCount(count + 1)}}>useCount: {count}</button>
      useCountJSX: {CountJSX}
    </div>
  )
}

React Hooks 入门记录

什么是 Hooks

类组件的劣势

优化类组件的三大问题

Hooks 使用法则

Hooks 常见问题

生命周期函数如何映射到 Hooks ？

类实例成员变量如何映射到 Hooks ?

Hooks 中如何获取历史 props 和 state

如何强制更新一个 Hooks 组件

使用 eslint-plugin-react-hooks 防止代码出错

1.安装

2.在package.json 中配置

简单使用 useState

使用传统类组件

使用 Hooks

通过 props 设置默认值

使用 Effect Hooks

关于 useEffect()

useEffect() 的参数

简单使用

Hooks环境下的Context

使用 useMemo 和 memo

useMemo的参数

与 useEffect 的差异

useMemo 简单使用

useMemo 和 useCallback

useCallback的参数

使用 useRef

useRef 和 useState 区别

【特别用法】

自定义 Hooks 函数

猜你喜欢

热点阅读