1 Hook简介

1.1 基本概念

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使⽤ state 以及其他的 React 特性。

1.2 React Hooks优势

函数组件不能使⽤state，⼀般只⽤于⼀些简单⽆交互的组件，⽤作信息展示，即我们上⾯说的傻⽠组件使⽤，如果需要交互更改状态等复杂逻辑时就需要使⽤class组件了

React Hooks让我们更好的拥抱函数式编程，让函数式组件也能使⽤state功能，因为函数式组件⽐class组件更简洁好⽤，因为React Hooks的出现，相信未来我们会更多的使⽤函数式组件
副作⽤问题

我们⼀般称数据获取、订阅、定时执⾏任务、⼿动修改ReactDOM这些⾏为都可以称为副作⽤由于React Hooks的出现，我们可以使⽤useEffect来处理组件副作⽤问题，所以我们的函数式组件也能进⾏副作⽤逻辑的处理了
有状态的逻辑重⽤组件
复杂的状态管理

之前我们使⽤redux、dva、mobx第三⽅状态管理器来进⾏复杂的状态管理

现在我们可以使⽤useReducer、useContext配合使⽤实现复杂状态管理，不⽤再依赖第三⽅状态管理器
开发效率和质量问题

函数式组件⽐class组件简洁，开发的体验更好，效率更⾼同时应⽤的性能也更好

2 useState

2.1 定义

useState：组件状态管理钩⼦，使函数组件能够使⽤state

2.2 基本使用

1

const [state,setState]=useState(initState)

state是要设置的状态
setState是更新state的⽅法，只是⼀个⽅法名，可以随意更改
initState是初始的state，可以是随意的数据类型，也可以是回调函数，但是函数必须是有返回值

2.3 实际应用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import React, { useState } from 'react'
export default function UseS() {
    const [count, setState] = useState(0)
    return (
        <div>
            <div>你点击了{count}次</div>
            <button onClick={() => setState(count + 1)}>点 击</button>
        </div>
    )
}

3 useEffect

3.1 定义

useEffect：副作⽤处理钩⼦
数据获取、订阅、定时执⾏任务、⼿动修改ReactDOM这些⾏为都可以称为副作⽤。⽽useEffect就是为了处理这些副作⽤⽽⽣的
useEffect也是componentDidMount、componentDidUpdate和componentWillUnmount这⼏个⽣命周期⽅法的统⼀

3.2 基本使用

1

useEffect(callback,array)

callback：回调函数，作⽤是处理副作⽤逻辑。可以返回⼀个函数，⽤作清理

1
2
3
4
5
6
7
8


useEffect(() =>{
	//副作⽤逻辑
	xxxxxx
	return ()=>{
		//清理副作⽤需要清理的内容
		//类似于componentWillUnmount，组件渲染和组件卸载前执⾏的代码
	}
},[array])

array(可选参数)：数组，⽤于控制useEffect的执⾏。分三种情况

空数组，则只会执⾏⼀次（即初次渲染render）,相当于componentDidMount
⾮空数组，useEffect会在数组发⽣改变后执⾏，相当于componentDidUpdate
不填array这个数组，useEffect每次渲染都会执⾏

3.3 实际应用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


import { useState, useEffect } from 'react'
const UseE = () => {
    const [count, setState] = useState(0)

    useEffect(() => {
        //更新⻚⾯标题
        document.title = `您点击了${count}次了哦`
    }, [count])
    return (
        <div>
            <div>你点击了{count}次</div>
            <button onClick={() => setState(count + 1)}>点 击</button>
        </div>
    )
}
export default UseE;

4 useContext

4.1 定义

context就是⽤来更⽅便的实现全局数据共享的，但是由于他并不是那么好⽤，所以我们⼀般会使⽤第三⽅状态管理器来实现全局数据共享

redux
dva
mobx

是针对context上下⽂提出的⼀个Hooks提出的⼀个API，它接受React.createContext()的返回值作为参数，即context对象，并返回最近的context

使⽤useContext是不需要再使⽤Provider和Consumer的

当最近的context更新时，那么使⽤该context的hook将会重新渲染

4.2 基本使用

store.js中创建数据

1
2
3


import React from 'react';
const Context = React.createContext({ age: '18', name: 'jerry' })
export default Context

组件中使用useContext接收数据

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import React, { useContext } from 'react'
import Context from './store'
const UseC = () => {
    //使⽤useContext
    const ctx = useContext(Context)
    return (
        <div>姓名：<h2>{ctx.name}</h2>年龄：{ctx.age}岁</div>
    )
}
export default UseC

初识Hooks

Contents