React hooks

作者: 一瓣山河 | 来源:发表于2019-07-21 09:42 被阅读0次

React Hooks
react-hooks
React Hooks
5分钟简单了解React-Hooks
react-hooks
React-hooks API介绍
React Hooks 入门
react hooks 源码分析 --- useState
React Hooks的入门简介
React hooks(钩子)

Hooks 是React官方在2018 React Conf 大会上宣布React v16.7.0-alpha（内测）引入的，React v16.8.0 release 可以使用。

why Hooks

难以重用和共享状态逻辑
更小粒度的组件维护，往往项目中类组件的逻辑比较复杂，需要处理多个互不相关的local state, 生命周期函数中可能还包含各种互不相关的逻辑。
JavaScript 中闭包函数的性能是非常快的，并且得益于相对于class 更轻量的函数组件，以及避免了HOC，renderProps 等等 …

Hooks如何解决问题

状态逻辑共享
更小粒度的组件维护，往往项目中类组件的逻辑比较复杂，需要处理多个互不相关的local state, 生命周期函数中可能还包含各种互不相关的逻辑。

Hooks 使用

hooks出现之前，函数组件就是通过props传递，输入到输出的映射逻辑；而Hooks 让函数组件拥有和类组件一样的local state和生命周期处理。最常用的几个hooks是 useState, useEffect, useContext，下面详细介绍：

useState

useState 这个方法可以为函数组件带来 local state。

import React, {useState, useEffect } from 'react'
const Example = () => {
   
  const [count, setCount] =  useState(0)
  return (
    <div>
        <span>{count}</span>
        <button onClick={() => setCount(count+1)}>click</button>
    </div>
  )
}

useState 接收一个用于初始 state 的值，返回一对变量。第一个变量是存放state 的变量；第二个变量是一个函数，用于改变该状态值，它可以接受一个值，也可以接受一个函数作为入参，当入参是函数时，该函数的入参是当前状态值，返回一个新的状态值。

useEffect

useEffect 可以为函数组件带来一些生命周期的处理。

import React, {useState, useEffect } from 'react'
const Example = () => {
  useEffect(() => {
    document.title =  `you clicked ${count} times`
  }, [count])
  const [count, setCount] =  useState(0)
  return (
    <div>
        <span>{count}</span>
        <button onClick={() => setCount(count+1)}>click</button>
    </div>
  )
}

useEffect可以看做componentDidMount、componentDidUpdate、componentWillUnmount生命周期的结合。每次render后都会调用useEffect()注册的effect函数。当React 渲染我们的组件时，它会记住我们的effect。
有经验的js开发者可能注意到：每次rerender后执行的effect都不同，实际上，每次rerender, React会schedule一个不同的effect,代替上一个effect.

useEffect函数的第二个参数是该effect所依赖的变量，只有当[ ]里的变量发生改变时，才会执行effect。例如，当第二个参数为[]，该effect 只会在组件didMount和willUnmount后执行。

Effects with Cleanup

useEffect的设计就把subscribe 和unSubscribe 绑定在一起啦，当useEffect()函数返回一个函数时，当需要清理时，React就会调用他。

React 清理effect的时机
当组件unmount时，React 清理effect。上面我们说过，effects 在每次render时都会执行，因此，React 会在前一次 effect执行后，下一次 effect 将要执行前，以及 Unmount 时清理。

useContext

useContext 接受一个context对象（通过React.createContext生成的）作为入参，并返回当前context的value。当前context的value是由组件上层级的最近的 <MyContext.Provider>的value属性决定的。当最近的<MyContext.Provider>的value属性值发生变化，useContext 就会触发组组件的rerender。

const value = useContext(MyContext);

Hooks使用规则

只在React函数中使用hooks，不要在regular js函数中调用
在函数组件的top Level 中使用hooks, 不要在循环、条件语句、嵌套函数中使用，保证每次render后hooks的调用顺序都是一样的
注： React依赖hooks执行的顺序来保证各个状态与各个useState之间的对应关系。