React Hooks它可以让我们不编写class的情况下使用state以及其他的React特性；
useState的使用
- useState来自react，需要从react中导入，它是一个hook；
参数：初始化值，如果不设置，默认为undefined；
元素一：当前状态的值；元素二：设置状态值的函数；
import {useState} from 'react';
export default function ReactHook() {
const [count,setCount] = useState(0);
return (
<div>
<h2>当前计数：{count}</h2>
<button onClick={e => setCount(count+1)}>+1</button>
</div>
)
}
Hook就是JavaScript函数，这个函数可以帮助你钩入 (hook into) React State以及生命周期等特性
- Hook指的类似于useState、useEffect这样的函数
- Hooks是对这类函数的统称
- 使用它们会有两个额外的规则：
Effect Hook的使用
- Effect Hook可以让你来完成一些类似于class中生命周期的功能；
- 事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用；
- 所以对于完成这些功能的Hook被称之为Effect Hook；
useEffect的作用：
- 通过useEffect的Hook，可以告诉React需要在渲染后执行某些操作；
- useEffect要求我们传入一个回调函数，在React执行完更新DOM操作之后，就会回调这个函数；
- 默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数；
useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：
type EffectCallback = () => (void | (() => void | undefined));
那么，为啥要在effect中返回一个函数呢？
- 这是effect可选的清除机制。每个effect都可以返回一个清除函数。
- 如此可以将添加和移除订阅的逻辑放在一起。
- 它们都属于effect的一部分。
React何时清除effect？
- React会在组件更新和卸载的时候执行清除操作；
- 正如前面学到的，effect在每次渲染的时候都会执行；
- useEffect实际上有两个参数：
若一个函数我们不希望依赖任何的内容时，可以传递一个空数组[]作为第二个参数作为优化。
- 那么这里的两个回调函数分别对应是componentDidMount和componentWillUnmount生命周期函数
useContext的使用
src/App.js文件
import React, { createContext, PureComponent } from 'react'；
import ContextHook from './04_useContext的使用/01_useContext使用';
export const UserContext = createContext();
export const ThemeContext = createContext();
export default class App extends PureComponent {
render() {
return (
<div>
<UserContext.Provider value={{name:"boge",age:18}}>
< ThemeContext.Provider value={{fontSize:"30px",color:"red"}}>
<ContextHook />
</ThemeContext.Provider>
</UserContext.Provider>
</div>
)
}
}
src/04_useContext的使用/01_useContext使用.js文件
import React,{useContext} from 'react'
import {UserContext,ThemeContext} from '../App'
export default function ContextHook() {
const user = useContext(UserContext);
const theme = useContext(ThemeContext);
console.log(user,theme); //打印出UserContext和ThemeContext的value值
return (
<div>
ContextHook
</div>
)
}
useContext(UserContext)相当于class组件中的staticcontextType = UserContext或者<UserContext.Consumer>
useContext(UserContext)只是让你能够读取context的值以及订阅context的变化。你仍然需要在上层组件树使用<UserContext.Provider>来为下层组件提供context。
自定义Hook
自定义Hook是一个函数，其名称必须以“use”开头，函数内部可以调用其他的Hook。
代码案例：自定义Hook练习-Context共享
src/hooks/user-hooks.js
import { useContext } from "react";
import { TokenContext, UserContext } from "../App";
function useUserContext(){
const user = useContext(UserContext);
const token = useContext(TokenContext);
return [user,token];
}
export default useUserContext;
src/11_自定义Hook/02_自定义Hook练习-Context共享.js
import React from 'react'
import useUserContext from '../hooks/user-hook'
export default function CustomContextShareHook() {
const [user, token] = useUserContext();
console.log(user, token)
return (
<div>
<h2>CustomContextShareHook</h2>
</div>
)
}
src/App.js
import React, { createContext, PureComponent } from 'react';
export const UserContext = createContext();
export const TokenContext = createContext();
export default class App extends PureComponent {
render() {
return (
<div>
< UserContext.Provider value={{name:"boge",age:18}}>
<TokenContext.Provider value={"sadsad"}>
<CustomContextShareHook />
</TokenContext.Provider>
</UserContext.Provider>
</div>
)
}
}
