React Hook速览

南山隐士 2022年06月25日 30 0

Hook简介

Hook 是 React 16.8 的新增特性, 它可以在函数组件中, 使用 state 以及其他的 React 特性, ==需要注意的是, 部分Hook 不能 在class 组件中使用==

useState

我们可以通过使用useState 在函数组件中创建state 以及 更新 state

const [count, setCount] = useState(0)
 return (
    <div>
      <p>You click { count } times </p>
      <button onClick={() => setCount(count + 1)}>
        Click Me to update
      </button>
    </div>
  )

useState函数==接受一个state的初始值==, 它会返回==一个包含当前state 以及 更新state的数组==

想使用这个state, 你只需要通过读取对应的变量名即可, 并不需要像class 组件中this.state.xxx 读取, 更新你只需要通过更新函数, 传入对应需要更新的值,即可, 它总是会将旧的值覆盖掉, 当有多个状态的时候, 你可以考虑传入一个对象, 或者说创建多个 useState 进来管理更新

useEffect

在class 组件中, 我们可以使用一些生命周期函数, useEffect可以让我们在函数组件中使用 部分 生命周期函数, ==你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合==

useEffect(() => {
    document.title = `You clicked ${count} times`;
    return (() => {
// componentWillUnmount 的逻辑
      console.log(1)
    })
 }, ['count']); // 只有count值更新才会执行, 如果没有定义, 只要有一个state值更新就会执行

需要注意的是, 在组件每次值更新的时候, 都会执行 useEffect 的方法, 例如, 你通过useState 创建了多个state, 只要有一个state更新了,它都会执行, 要解决这个问题, 你可以在函数中传入一个数组, 来告诉 useEffect 在某个值更新的时候你才执行, 如果你想, 无论怎么样, 都只执行一次, 那么你可以传入一个空的数组, 不传入任何数据, 就会每次都执行

你可以这么理解, useEffect 就是会在state更新的时候, 执行 class 组件中的 componentDidMount,componentDidUpdate 和 componentWillUnmount 这个3个生命周期, 而需要注意的是, 想实现类似于componentWillUnmount 这个方法, 你需要在useEffect 返回一个函数, 在里面写逻辑

useContext

useContext它的作用在于简化获取context的值的一个hook, useContext接受一个有React.createContext创建的对象, 按照以前, 如果是在class组件, 我们需要使用 static contextType 然后, 通过this.context来读取context的值, 函数组件, 我们需要使用 Consumer 然后通过函数的形式来读取值, 可是useContext就可以它来快速地读取值

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

让你读取context比较方便, 但是需要注意的是,你还是需要在最上层的组件中, ==包裹一层MyContext.Provider 来传递context的值==

useMemo && useCallback

useMemo它是专门用来优化使用的, ==它跟useEffect最大的区别在于, 它是在渲染的时候, 执行的, 而后者是在渲染后执行的==

它们第一个参数都是接受一个函数, 在这个函数中你可以执行你需要的操作

第二个参数是一个缓存值, 它是一个数组, 这个缓存值如果你不写, 就会不断地执行这个函数, 如果有缓存值, 那么只有当缓存值发生变化的时候, 才会执行函数, 传入空的数组, 只会执行一次

==useMemo可以缓存一个值==, 一般这个值你可能需要通过大量计算得出的,那么你就恶意使用它来进行优化

==useCallback可以缓存一个函数==, 一般你这个函数可能你会传递给子组件,那么你就可以考虑使用它,只要它不改变, 当你子组件只有这个函数的props, 可以避免子组件的再次渲染

useRef

==useRef你可以理解为它的作用在于存储某个值==, 它跟普通的ref不同在于, 它可以存储任何的值, 保存到它的current属性中, 而ref只能存储dom或者组件实例, 想改变它你需要改变它的current的值, ==它的改变, 不会触发组件再次渲染==
例如,我们可以使用它来缓存上一个props或者state的数据,在useEffect中改变它的值进行缓存

useReducer

useState的替代方案,它的第一个参数 接受一个跟redux一样的reduces函数, 第二个参数接受state的初始值, 在reduces中, 我们可以改变state的值, 第三个参数是一个函数, 它接受默认的state, 可以缓存初始的state的值

Last Updated: 2022/06/25 19:16:24
dva速览 React通信