React16.8中Hooks详解

3,109 阅读4分钟

一、React Hooks(钩子)是什么

Introducing Hooks

React哲学:一切皆组件

类组件

class Counter extends Component {
    render () {
        return "Hello World"
    }
}

函数组件

const Counter = () => {
    return "Hello World"
}

为什么说函数式组件更优?

  1. 简单易懂
  2. 更符合React哲学,可以理解为React就是一个画UI的工具,符合UI=f(state)的原则
  3. 函数式编程

有hooks之前,为什么React需要类组件?

  1. 需要状态(state)
class Counter extends Component {
    state = {
        count: 0
    }
}
  1. 需要生命周期函数
shouldComponentUpdate () { // 减少render渲染
    return true
}
  1. 需要副作用操作(非纯函数)

副作用:调用ajax等

纯函数:每次输入的参数一样,那么每次返回的结果都相同。不要改全局变量,不要做ajax请求,不要去做异步操作等

componentDidMount () {
    fetchAPI().then(res => {
        this.setState({count: res})
    })
}

能否让函数组件拥有这些功能?

const Counter = () => {
    return `
    想拥有,可是我没办法拥有状态,也没有生命周期函数,更不要说副作用操作了
    `
}

Hooks拥有了这些功能

useState 状态管理
useEffect 生命周期函数
useContext 
等等...

二、React Hooks带来哪些好处

useState: 在函数中管理状态

const Counter = () => {
    const [count, setCount] = useState(0) // 解构  初始值0
    const increment = () => setCount( count + 1 )
    return (
      <>
        <h1>{count}</h1>
        <button onClick={increment}>+</button>
      </>
    )
}

useState的返回值是什么?

const [count, setCount] = useState(0)
可以改为下面的写法:
const state = useState(0)
const count = state[0]
const setCount = state[1]

三、常用 Hooks 使用技巧

HoC : Higher order Component(With开头)

有了useState这个hook之后,就可以在组件里管理状态了

useState 一般写在函数的最上面
useState:返回结果可以任意取名
const [count, setCount] = useState(0)
也可写成
const  [count, updateCount] = useState(0)

useState是怎么做到的?
想象一下React为每一次useState调用分配一个“空间”
React通过useState调用顺序辨别各个“空间”,很简单,就是通过调用顺序来区分的!

useState执行顺序必须一致!

不能写在if判断里,如下

const Counter = () => {
    const [count, setCount] = useState(0)
    if (count % 2 === 0) {
        const [bar, setBar] = useState(null) // 不能这么写
    }
    const [foo, setFoo] = useState("foo")
}


const [count, setCount] = useState(0) // 两个useState 根据调用顺序区分
const [name, setName] = useState("Fruit Bro") // 两个useState 根据调用顺序区分

setCount(count + 1)
setCount也是异步的,是setState的变种!

useEffect:有机会做副作用操作

componentDidMount 用于在mount过程结束时的副作用
componentDidUpdate 用于在update过程结束时的副作用

useEffect = componentDidMount + componentDidUpdate

useEffect模拟componentDidMount

useEffect(() => {
    // 每次mount或update都会调用到这里
})

useEffect(() => {
    // 只有mount时调用这里
},[]) // []代表依赖的数据

useEffect模拟componentDidUnmount

useEffect(() => {
    // 只有mount时调用这里
    return () => {
        // 只有unmount时调用这里
    }
},[])

hooks特有而类组件没有的是componentDidUnupdate,类似componentDidUnmount

useEffect模拟componentDidUpdate

const mounted = useRef() // useRef()不管调用多少次,返回的结果完全是一样的
useEffect(() => {
  if (!mounted.current) { 
  // 初次mounted,其实有用的就是current
      mounted.current = true
  } else {
      // do componentDidUpdate logic
  }
})

ref可以访问真正的dom,但在React中,是非常介意直接操作真实DOM的,因此用vitural dom

注意:每一次渲染都有独立的props和state,每一次渲染使用hooks,函数组件的每一次渲染,无论是mount还是update,不管是第几次update,它都有独立的props和state

const Counter = () => {
    const [count, setCount] = useState(0)
    const onClick = () => {
        setCount(count + 1)
        setTimeout(() => {
        // 返回0的原因,初次为0,只有再次渲染的时候count才会为1,而每次渲染都有独立的props和state,因此新的渲染不会影响上一次的值
            alert(count) // 0 每一次新的执行就是一次新的开始
        }, 1000)
    }
    return (
      <>
        <h1>{count}</h1>
        <button onClick={onClick}>+</button>
      </>
    )
}

useContext: 简化Context的使用

Hooks之前
<Context.Consumer>
  {contextValue => <h1>{contextValue}</h1>}
</Context.Consumer>

Hooks之后
const contextValue = useContext(Context)

<h1>{contextValue}</h1>

四、React Hooks有哪些好处

Hooks的好处

  1. 降低了组件的复杂性

    1.1 完全使用函数组件

    1.2 无需生命周期函数

    1.3 更好的状态管理

  2. 更好的代码重用性

    2.1 传统的代码重用方式 组件、高阶组件(HoC)、render props模式

    2.2 Hooks下的代码重用方式:函数

定制Hooks: 函数形式的代码重用
// Beacon 计数
const useBeacon = () => {
    const [renderCount, setRenderCount] = useState(0)
    
    useEffect(() => {
        sendBeacon()
    })
}
// 重用
const Foo = () => {
    useBeacon();
    ...
}

const Bar = () => {
    useBeacon();
    ...
}

五、如何迁移到Hooks

React v16.8.0开始正式支持Hooks

原有类组件功能依然支持

业界趋势将是向函数组件倾斜

迁移策略

了解Hooks

对新组建使用Hooks

逐步替换原有类组件

hooks如何处理类组件的shouldComponentUpdate来做性能优化 memo

如有错误,欢迎指正!谢谢!