React---Hooks深入
16.1 useEffect
Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
- 事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
- 所以对于完成这些功能的Hook被称之为 Effect Hook；
import React, { useState, useEffect } from 'react';
function UseEffectDemo() {
const [counter, setCounter] = useState(0);
useEffect(() => {
document.title = "Counter" + counter;
});
return (
Counter: {counter}
);
}
export default UseEffectDemo;
useEffect的清除：
在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除：
- 比如我们之前的事件总线或Redux中手动调用subscribe；
- 都需要在componentWillUnmount有对应的取消订阅；
- Effect Hook通过什么方式来模拟componentWillUnmount呢？
useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：
为什么要在 effect 中返回一个函数？
这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数；
- 如此可以将添加和移除订阅的逻辑放在一起；
- 它们都属于 effect 的一部分；
React 何时清除 effect？
- React 会在组件更新和卸载的时候执行清除操作；
- 正如之前学到的，effect 在每次渲染的时候都会执行；
useEffect实际上有两个参数：
- 参数一：执行的回调函数；
- 参数二：该useEffect在哪些state发生变化时，才重新执行；（受谁的影响）
16.2 useContext
Context Hook允许我们通过Hook来直接获取某个Context的值；
App.js定义共享
export const userContext = createContext();
export const ThemContext = createContext();
App.js还是需要包裹
function App() {
return (
{/*
);
}
使用(超简单)
import React, { useContext } from 'react'
import { userContext } from './App'
export default function UserContextDemo() {
const { name } = useContext(userContext);
return 用户名：{name}
}
16.3 useReducer
useReducer仅仅是useState的一种替代方案：
- 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
- 或者这次修改的state需要依赖之前的state时，也可以使用；
使用计数来举个例子：
import React, { PureComponent, useReducer } from 'react'
// 定义reducer函数，接收state和action，根据action.type返回新的state
function reducer(state, action) {
switch (action.type) {
case 'INCRESE': // 增加
return { count: state.count + 1 };
case 'DECRESE': // 减少
return { count: state.count - 1 };
default:
throw new Error(); // 未知action抛出错误
}
}
export default function UseReducer() {
// 定义初始状态
const initialState = {
count: 0
}
// useReducer返回当前state和dispatch方法
const [state, dispatch] = useReducer(reducer, initialState);
return (
{/* 显示当前count */}
number{state.count}
{/* 点击按钮派发INCRESE和DECRESE action */}
)
}
16.4 useCallBack
useCallback实际的目的是为了进行性能的优化。
如何进行性能的优化呢？
- useCallback会返回一个函数的 memoized（记忆的） 值；
- 在依赖不变的情况下，多次定义的时候，返回的值是相同的；
16.5 useMemo
useMemo返回的也是一个 memoized（记忆的） 值；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；
16.1 useEffect
Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
- 事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
- 所以对于完成这些功能的Hook被称之为 Effect Hook；
import React, { useState, useEffect } from 'react';
function UseEffectDemo() {
const [counter, setCounter] = useState(0);
useEffect(() => {
document.title = "Counter" + counter;
});
return (
Counter: {counter}
);
}
export default UseEffectDemo;
useEffect的清除：
在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除：
- 比如我们之前的事件总线或Redux中手动调用subscribe；
- 都需要在componentWillUnmount有对应的取消订阅；
- Effect Hook通过什么方式来模拟componentWillUnmount呢？
useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：
为什么要在 effect 中返回一个函数？
这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数；
- 如此可以将添加和移除订阅的逻辑放在一起；
- 它们都属于 effect 的一部分；
React 何时清除 effect？
- React 会在组件更新和卸载的时候执行清除操作；
- 正如之前学到的，effect 在每次渲染的时候都会执行；
useEffect实际上有两个参数：
- 参数一：执行的回调函数；
- 参数二：该useEffect在哪些state发生变化时，才重新执行；（受谁的影响）
16.2 useContext
Context Hook允许我们通过Hook来直接获取某个Context的值；
App.js定义共享
export const userContext = createContext();
export const ThemContext = createContext();
App.js还是需要包裹
function App() {
return (
{/*
);
}
使用(超简单)
import React, { useContext } from 'react'
import { userContext } from './App'
export default function UserContextDemo() {
const { name } = useContext(userContext);
return 用户名：{name}
}
16.3 useReducer
useReducer仅仅是useState的一种替代方案：
- 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
- 或者这次修改的state需要依赖之前的state时，也可以使用；
使用计数来举个例子：
import React, { PureComponent, useReducer } from 'react'
// 定义reducer函数，接收state和action，根据action.type返回新的state
function reducer(state, action) {
switch (action.type) {
case 'INCRESE': // 增加
return { count: state.count + 1 };
case 'DECRESE': // 减少
return { count: state.count - 1 };
default:
throw new Error(); // 未知action抛出错误
}
}
export default function UseReducer() {
// 定义初始状态
const initialState = {
count: 0
}
// useReducer返回当前state和dispatch方法
const [state, dispatch] = useReducer(reducer, initialState);
return (
{/* 显示当前count */}
number{state.count}
{/* 点击按钮派发INCRESE和DECRESE action */}
)
}
16.4 useCallBack
useCallback实际的目的是为了进行性能的优化。
如何进行性能的优化呢？
- useCallback会返回一个函数的 memoized（记忆的） 值；
- 在依赖不变的情况下，多次定义的时候，返回的值是相同的；
16.5 useMemo
useMemo返回的也是一个 memoized（记忆的） 值；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；