【React】React Hooks

基础Hook

useState()

基本用法：

const [state, setState] = useState(initialState);

useState()的返回值：

1. 返回一个state
2. 更新state的函数。

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

setState(newState);

在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。

函数式更新：
如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。
该函数将接收先前的 state，并返回一个更新后的值。

eg：下面的计数器组件示例展示了 setState 的两种用法：

• setState()传递一个值时

import React,{useState} from 'react';

function Mydemo() {
    const [count,setCount] = useState(0);

    const add = function() {
        setCount(count+1);

        setCount(count+2);

        setCount(count+3);
    }

    const minus = function() {
        setCount(count-1);

        setCount(count-2);

        setCount(count-3);
    }

    return (
        <>
            Count: {count}  <br/>
            <button onClick={() => setCount(0)}>Reset</button> <br/>
            <button onClick={() => add()}>+</button> <br/>
            <button onClick={() => minus()}>-</button>
        </>
    )
}

export default Mydemo;

• setState()传递一个函数时

import React,{useState} from 'react';

function Mydemo() {
    const [count,setCount] = useState(0);

    const add = function() {
        setCount(pre => pre+1);

        setCount(pre => pre+2);

        setCount(pre => pre+3);
    }

    const minus = function() {
        setCount(pre => pre-1);

        setCount(pre => pre-2);

        setCount(pre => pre-3);
    }

    return (
        <>
            Count: {count}  <br/>
            <button onClick={() => setCount(0)}>Reset</button> <br/>
            <button onClick={() => add()}>+</button> <br/>
            <button onClick={() => minus()}>-</button>
        </>
    )
}

export default Mydemo;

注意比较两者执行出来的区别

---

useEffect()

基本用法：

useEffect(didUpdate);

该 Hook 接收一个包含命令式、且可能有副作用代码的函数。

在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。

使用 useEffect 完成副作用操作。
赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。
你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。

清除effect：

通常，组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。
要实现这一点，useEffect 函数需返回一个清除函数。

以下就是一个创建订阅的例子：

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除订阅
    subscription.unsubscribe();
  };
});

effect的执行机制：
与 componentDidMount、componentDidUpdate 不同的是，传给 useEffect 的函数会在浏览器完成布局与绘制之后，在一个延迟事件中被调用。
这使得它适用于许多常见的副作用场景，比如设置订阅和事件处理等情况，因为绝大多数操作不应阻塞浏览器对屏幕的更新。

effect的条件执行：
默认情况下，effect 会在每轮组件渲染完成后执行。这样的话，一旦 effect 的依赖发生变化，它就会被重新创建。

然而，在某些场景下这么做可能会矫枉过正。比如，在上一章节的订阅示例中，我们不需要在每次组件更新时都创建新的订阅，而是仅需要在 source prop 改变时重新创建。

要实现这一点，可以给 useEffect 传递第二个参数，它是 effect 所依赖的值数组。

更新后：

useEffect(() => {
	const subscription = props.source.subscribe();
	return () => {
		// 清除订阅
		subscription.unsubscribe();
	};
}, [props.source])

此时，只有当 props.source 改变后才会重新创建订阅。.

---

useContext()

const value = useContext(MyContext);

• 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。
• 当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。
• 当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。
• 即使祖先使用 React.memo 或 shouldComponentUpdate，也会在组件本身使用 useContext 时重新渲染。

import React,{useState,useEffect,useContext} from 'react';

const AppContext = React.createContext();

function Mydemo() {
    return (
        <AppContext.Provider value={{name: '南栀'}}>
            <A/>
            <B/>
        </AppContext.Provider>
    );
}

function A() {
    const {name} = useContext(AppContext);
    return (
        <p>
            我是A组件,我的名字是{name}
        </p>
    );
}

function B() {
    const {name} = useContext(AppContext);
    return (
        <p>
            我是B组件,我的名字是{name}
        </p>
    );
}

export default Mydemo;

---

额外的Hook

useRef

const refContainer = useRef(initialValue);

• useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。
• 返回的 ref 对象在组件的整个生命周期内持续存在。

import React,{useRef} from 'react';

function Mydemo() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
        // `current` 指向已挂载到 DOM 上的文本输入元素
        inputEl.current.focus();
    }

    return (
        <>
            <input type="text" ref={inputEl}/>
            <button onClick={onButtonClick}>Focus the input</button>
        </>
    )
}

export default Mydemo;

本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。

useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值。

这是因为它创建的是一个普通 Javascript 对象。而 useRef() 和自建一个 {current: …} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象。

---

useReducer

基本语法：

const [state, dispatch] = useReducer(reducer, initialArg, init);

• useState的替代方案。
• 它接收一个形如(state,action) => newState的reducer，并返回当前的state以及配套的dispatch方法。

适用场景：

• state逻辑较复杂且包含多个子值
• 下一个state依赖于之前的state等。
• 使用useReducer还能给触发深更新的组件做性能优化，向子组件传递dispatch而不是回调函数。

小例子：重写计数器

import {useReducer} from 'react';

const initialState = {count: 0};

function reducer(state,action){
    switch (action.type){
        case 'increment':
            return {count: state.count + 1};
        case 'decrement':
            return {count: state.count - 1};
        default:
            throw new Error();
    }
}

function Counter(){

    const [state,dispatch] = useReducer(reducer,initialState);
    return (
        <>
            Count: {state.count}
            <button onClick={() => dispatch({type:'decrement'})}>-</button>
            <button onClick={() => dispatch({type:'increment'})}>+</button>
        </>
    )
}

export default Counter;

指定初始state：(两种方式)

1. 将初始state作为第二个参数传入useReducer

const [state, dispatch] = useReducer(
	reducer,
	{count: initialCount}
);

2. 先声明一个初始state变量，在useReducer中的第二个参数中传入

const initialState = {count: 0};
const [state,dispatch] = useReducer(reducer,initialState);

惰性初始化：

• 可以选择惰性地创建初始state。
• 需要将init函数作为useReducer的第三个参数传入，这样初始state被设置为init(initialArg)。
• 可以将用于计算 state 的逻辑提取到 reducer 外部，这也为将来对重置 state 的 action 做处理提供了便利。

import {useReducer} from 'react';

function init(initialCount){
    return {count:initialCount};
}


function reducer(state,action){
    switch (action.type){
        case 'increment':
            return {count: state.count + 1};
        case 'decrement':
            return {count: state.count - 1};
        default:
            throw new Error();
    }
}


function Counter(){

    const [state,dispatch] = useReducer(reducer,0,init);
    return (
        <>
            Count: {state.count}
            <button onClick={() => dispatch({type:'decrement'})}>-</button>
            <button onClick={() => dispatch({type:'increment'})}>+</button>
        </>
    )
}

export default Counter;

---

参考文档：React官方文档