React Hooks

官网：https://zh-hans.reactjs.org/docs/hooks-state.html#gatsby-focus-wrapper

Hook 是什么？ 

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

　　Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。

什么时候我会用 Hook？ 

　　如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其转化为 class。现在你可以在现有的函数组件中使用 Hook。

使用Hook的限制：

• 只能写在函数组件和自定义Hook
• 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们

一、useState

　　1.声明

　　以往在class中声明一个变量count

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

　　使用useState声明一个count

import React, { useState } from 'react';

function Example() {
    // 声明一个叫 “count” 的 state 变量
    const [count, setCount] = useState(0);

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

　　count：自定义state变量名，这里等同于this.state.count

　　setCount：自定义函数名，等同于this.setSate

　　useState只有一个参数，即为count的初始值，这里意为count初始值为0

　　2.读取

　　class

<p>You clicked {this.state.count} times</p>

　　函数

<p>You clicked {count} times</p>

　　3.更新

　　class

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

　　函数

  <button onClick={() => setCount(count + 1)}>
    Click me
  </button>

二、useEffect

　　Effect Hook 可以让你在函数组件中执行副作用操作

　　如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

　　1.使用

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

function Example() {
    const [count, setCount] = useState(0);
    // 异步，第一次渲染和每次更新完毕后执行 Effect 内操作
    useEffect(() => {
        console.log(`You clicked ${count} times`)
    });

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

　　2.清除

　　React 何时清除 effect？ React 会在组件卸载的时候执行清除操作。

　　effect 在每次渲染的时候都会执行，所以 React 会在执行当前 effect 之前对上一个 effect 进行清除。

　　effect 如果返回一个函数，React 将会在执行清除操作时调用它

    useEffect(() => {
        console.log(`You clicked ${count} times`)
        return function(){
            console.log('清除 effect')
        }
    });

　　3.跳过 Effect 进行性能优化

    useEffect(() => {
        console.log(`You clicked ${count} times`)
        return function(){
            console.log('清除 effect')
        }
    }, [count]); // 仅在 count 更改时更新

　　如果数组中有多个元素，即使只有一个元素发生变化，React 也会执行 effect
　　如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）

　　如果你传入了一个空数组（[]），effect 内部的 props 和 state 就会一直拥有其初始值

三、useContext

　　Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性

import React, { createContext, useContext } from 'react';

const themes = {
    light: {
        foreground: "#000000",
        background: "#eeeeee"
    },
    dark: {
        foreground: "#ffffff",
        background: "#222222"
    }
};
// 通过createContext在组件外创建 Context 对象，createContext(defaultValue)
// 使用 Context 对象的组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值
// 只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效
const ThemeContext = createContext(themes.light);

function App() {
    return (
        // ThemeContext.Provider提供了一个Context对象，这个对象是可以被子组件共享的。
        <ThemeContext.Provider value={themes.dark}>
            {/* Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据 */}
            {/* 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染 */}
            <Toolbar />
        </ThemeContext.Provider>
    );
}

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}

function ThemedButton() {
    // useContext 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值
    // useContext 的参数必须是 context 对象本身
    const theme = useContext(ThemeContext);
    // 当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定
    return (
        <button style={{ background: theme.background, color: theme.foreground }}>
            I am styled by theme context!
        </button>
    );
}

 四、useReducer（可以先熟悉 Redux ）

// 指定初始state
const [state, dispatch] = useReducer(reducer, {count: initialCount});
const [参数名，dispatch]= useReducer(reducer, 初始值);
// 惰性初始化
const [state, dispatch] = useReducer(reducer, initialArg, init);
const [参数名，dispatch]= useReducer(reducer, 初始函数传入值, init初始函数);

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

// 计数器示例
import React, { useReducer } from 'react';

// init函数
function init(initialCount) {
    return { count: initialCount };
}

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

function Counter() {
    // useReducer(reducer, 传入init的初始值, init)
    const [state, dispatch] = useReducer(reducer, 0, init);
    return (
        <>
            Count: {state.count}
            <button
                onClick={() => dispatch({ type: 'reset', payload: 0 })}>
                Reset
        </button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        </>
    );
}

五、useRef

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

// 示例：输入框聚焦
import React, { useRef } from 'react';

function TextInputWithFocusButton() {
    const inputEl = useRef(null);
    const onButtonClick = () => {
        // `current` 指向已挂载到 DOM 上的文本输入元素
        inputEl.current.focus();
    };
    return (
        <>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </>
    );
}

　　useRef() 和自建一个 {current: ...} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象

　　当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。

六、自定义Hook

　　自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook

　　共享逻辑，代码封装

　　自定义useReducer示例：

import React, { useState } from 'react';

// 自定义 useReducer ，命名用 "use"
function useReducer(reducer, initialState) {
    const [state, setState] = useState(initialState);

    function dispatch(action) {
        const nextState = reducer(state, action);
        setState(nextState);
    }

    // 返回state 和 dispatch
    return [state, dispatch];
}

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

function App() {
    // 使用自定义 Hook
    const [state, dispatch] = useReducer(reducer, 0);

    function handleIncrement() {
        dispatch({ type: 'increment' });
    }

    function handleDecrement() {
        dispatch({ type: 'decrement' });
    }
    return (
        <div>
            {state}
            <button onClick={() => handleIncrement()}>按钮+</button>
            <button onClick={() => handleDecrement()}>按钮-</button>
        </div>
    )
}