React Hook

React Hook是React16.8.0引入的。使可以在不引入class的情况下，可以使用state和其他React特性。

hooks本质上是一些函数。

1. 为什么引入Hook?

1. hooks中的useEffect可以解决class中各逻辑在生命周期函数中管理混乱的问题。

2.hooks中的自定义Hook使得可以不修改组件的结构的基础上，灵活的复用组件逻辑。

3.class组件不能很好的压缩，并且热重载不稳定。不利于组件优化。使用Hook的函数组件不存在这些问题

2. Hook的规则

1. 只能在函数组件中使用hooks

    类组件中无效。

2. 只能在函数最外层使用

   不能用于if，for等语句中，也不能用于普通js函数中。因为ReactHook通过调用顺序确定对应的state等对应的hook方法。使用语句等会改变顺序。

3. 只能在以名字use开头的自定义Hook中使用

3. useState

接受一个参数作为初始值，参数可以是常量，也可以是一个返回值的函数。

初始值如果是一个函数，在初次渲染执行；如果是一个函数的执行，每次渲染都会执行

//  初始值是一个函数
const [count, setCount] = useState(function init(){......;return ..})
// 初始值是一个函数调用
const [count, setCount] = useState(init())

以数组形式返回两个值，第一个是状态值（初次渲染创建变量），一个是改变状态的函数。

例如：

const [count, setCount] = useState(0);
// 0是初始值

修改状态的函数（如setCount）和class中的setState类似，可以接受两种参数：

setCount(fn/exp)

1）表达式

可以是常量, 也可以是一个带state值的表达式

<button onClick={() => setCount(0)}>Reset</button>
<button onClick={() => setCount(count+1)}>-</button>

2）函数

<button onClick={() => setCount(prevCount => prevCount + 1)}>-</button>

⚠️如果修改后的状态不变，重复调用只会刷新一次。

<button onClick={() => setCount(count)}>+</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> 
<!-- 每次单击第一个按钮会渲染一次，继续单击不继续渲染；
       但是如果再单击第二个按钮，切换到第一个按钮，还是会渲染一次-->

模拟getDerivedStateFromProps

在render前进行setState更新

应用：在异步函数中获取state的值

在setTimeout等异步函数中获取的状态值，是调用setTimeout方法时的状态值，不是执行时的状态值。

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

  function handleAlertClick() {
    // count的取值形成了一个Example的闭包，每次刷新都是一个新的闭包
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 3000);
  }
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={handleAlertClick}>Show alert</button>
    </div>
  );
}
ReactDOM.render(<Example/>, window.root);

4. useEffect

它相当于是componentDidMount,componentDidUpdate,componentWillUnMount三个生命周期的合成体。

它接受两个参数， 第一个是一个函数（effect），第二个参数可选，是一个数组（第一个函数中用到的可变数据集合）。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新；每次渲染，第一个函数都相当于一个新生成的函数

1. 执行时机

和生命周期不同的是，componentDidMount,componentDidUpdate是DOM渲染完成，屏幕更新前触发执行，会阻碍屏幕渲染；useEffect中的effect函数（非变更DOM的操作）在浏览器完成布局和绘制后，会延迟执行（异步，但是肯定在下一次渲染前执行），不会阻碍屏幕更新。但是如果是变更DOM的操作，需要同步执行。

1) 如果只在初次加载的时候运行，模拟componentDIdMount

  useEffect(() => { 
    //TODO
  }, []);

2）想要只在更新的时候运行，模拟componentDidUpdata

//使用useRef()存储的实例变量作为是否是第一次执行的标识
  const [count, setCount] = useState(0);
  const first = useRef(true);
  useEffect(() => { 
    if (first.current) {
      first.current = false;
    } else {
      console.error(count);
      document.title = `You clicked ${count} times!`;
    }
  }, [count]);

2. 执行副作用

如果副作用需要取消，在传入useEffect的函数中返回一个函数，在返回的函数中执行取消操作，该返回函数会在组件卸载的时候执行。

 useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // 仅在 props.friend.id 发生变化时，重新订阅

3. 性能优化

第二个参数传入的变量，会作为比较的依据。如果变量值不变，就会跳过本次副作用的执行。

作为参数的值是在组件域（即函数组件对应的函数域）中的可变量（props/state），而且在useEffect中使用。

5. useContext

使函数组件可以具有和Class组件中的contextType属性（使可以通过this.context访问值）一样的功能。

用法和Class中contextType基本一致。接受一个context对象作为参数，返回最近的Provider提供的值。

示例代码：

const ThemeContext = React.createContext('dark');
function App() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Child />
      <button onClick={() => setTheme(preTheme => preTheme === 'dark' ? 'light' : 'dark')}>切换主题</button>
    </ThemeContext.Provider>
  );
}
function Child() {
  const value = useContext(ThemeContext);
  return (
    <div>{value}</div>
  );
}

6.useReducer

可以看做useState的复合版。当应用中需要多个状态时，一般需要调用多次useState（便于组合逻辑）。随着应用逐渐扩展，会越来越复杂，此时可以使用useReducer。

const [state, dispatch] = useReducer(reducer, initialArg, init);
// 第三个值可以不传，是一个接受第二个参数，返回一个初始值的函数

示例：

import React, { useReducer } from 'react';
import ReactDOM from 'react-dom';

function App() {
  function reducer(state, action) {
    switch(action.type) {
    case 'add':
      return state + 1;
    case 'minuse':
      return state - 1;
    case 'reset':
      return 0;
    default: 
      throw new Error('error');
    }
  }
  const [count, dispatch] = useReducer(reducer, 0);
  return (
    <div>
      <p>You clicked {count} times!</p>
      <button onClick={() => dispatch({type: 'reset'})}>Reset</button>
      <button onClick={() => dispatch({type: 'add'})}>+</button>
      <button onClick={() => dispatch({type: 'minuse'})}>-</button>    
    </div>
  );
}

模拟forceUpdate()

function Example() {
  const [count, forceUpdate] = useReducer(x=>x+1, 0);
  return (
    <div>
      <button onClick={() => forceUpdate()}>Click me</button>
    </div>
  );
}

7. useMemo

本质上是memorization技术。用于优化在渲染阶段，计算数据的函数。

它接受一个计算函数作为第一参数；第二个是个依赖项数组。

返回一个值，该值是第一个计算函数的返回结果。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

示例：

import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import React, {useState, useMemo, useEffect} from 'react';

function App() {
  const inputRef = React.createRef();
  const [data, setData] = useState([]);
  useEffect(() => {
    inputRef.current.value = null;
  });
  return ( 
    <div>
      <input type='text' ref={inputRef}/>
      <button onClick={() => setData(data.concat(inputRef.current.value))}>添加</button>
      <Child data={data}/>
    </div>
  );
}
function Child(props) {
  const [filterText, setFilterText] = useState('');
  const lists = useMemo(() => props.data.filter(i => i && i.includes(filterText)), [filterText, props]);
  return(
    <div>
      <input onChange={(e) => setFilterText(e.target.value)} />
      <ul>
        {
          lists.map((i,inx) => <li key={inx}>{i}</li>)
        }
      </ul>
    </div>
  );
}
Child.propTypes = {
  data: PropTypes.array
};

ReactDOM.render(<App/>, window.root);

8. useCallback

和 useMemo基本相同；

不同点在于它返回一个函数，这个和'memorize-one'的功能相同。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

代码示例：

// 用useCallback替换上面useMemo的示例
  const listFilter = useCallback(() => props.data.filter(i => i && i.includes(filterText)), [filterText, props]);
  const lists = listFilter(filterText, props);

该方法比useRef的优点是，因为返回一个函数，它更容易抽取逻辑，形成自定义Hook

function MeasureDOM() {
  const [rect, measureRef] = useClientRec();
  return (
    <>
      <h1 ref={measureRef}>Hello, world</h1>
      {rect && <h2>The above header is {Math.round(rect.height)}px tall</h2>}
    </>
  );
}
function useClientRec() {
  const [rect, setRect] = useState();
  // 此时ref属性指向一个回调函数
  const ref = useCallback(node => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);
  return [rect, ref];
}

9 .useRef

useRef模拟的是Class组件中的实例属性。可以在函数组件中很方便的保存任何可变值，不引起渲染。

// initialValue是current属性的初始值
const refContainer = useRef(initialValue);

使用useRef和React.createRef的区别是：

1）useRef返回一个refContainer对象（{current: XXX}），并且重新渲染，访问的都是同一个对象。

2）React.createRef在函数组件中是每次重新渲染，相当于重新创建了一个对象，每次都是一个新对象。

示例：

// 单击一次后，inputRef1为1， inputRef2仍然为0
import React, {useState,useEffect, useRef} from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [count, setCount] = useState(0);
  const inputRef1 = useRef(null);
  const inputRef2 = React.createRef();
  useEffect(() => {
    if(count === 1) {
      inputRef1.current.value = count;
      inputRef2.current.value = count;
    }
  }, [count,inputRef1,inputRef2]);
  return (
    <div>
      <input ref={inputRef1} /><br/>
      <input ref={inputRef2} /><br/>
      inputRef1:{inputRef1.current && inputRef1.current.value || 0}<br/>
      inputRef2:{inputRef2.current && inputRef2.current.value || 0}<br/>
      <button onClick={() => setCount(count+1)}>Add</button>
    </div>
  );
}

ReactDOM.render(<App/>, window.root);

应用： 获取prevState或者prevProps

// 考虑到通用性，将其提取到自定义Hook中usePrevious
function App() {
  const [count, setCount] = useState(0);
  const previous = usePrevious(count);
  return (
    <div>
      <p>previous: {previous}</p>  
      <p>current: {count}</p>  
      <button onClick={() => {setCount(count+1);}}>Add</button>
    </div>
  );
}
// 自定义Hook-获取prevState/prevProps
function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

10. useImperativeHandle

该方法可以自定义（默认是DOM节点）子组件暴露给父组件的内容。

useImperativeHandle(ref, createHandle, [deps])

该方法基于Refs转发，需要和React.forwardRef结合使用。

示例：

import React, { useRef,useEffect, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const inputRef = useRef(null);
  useEffect(() => {
    // 在父组件查看获取到的子组件中传递的ref的内容
    console.log(inputRef); // {current: {focus: () => {...}}}
  });
  return (
    <div>
      <FancyInputWithRef ref={inputRef} />
    </div>
  );
}
// 子组件
function FancyInput(props, ref) {
  // 自定义ref暴露的内容
  useImperativeHandle(ref, () => ({
    focus: () => ref.current.focus()
  }), [ref]);
  return(
    <div>
      <input ref={ref} />
    </div>
  );
}
// 转发ref
var FancyInputWithRef = React.forwardRef(FancyInput);

ReactDOM.render(<App/>, window.root);

11. useLayoutEffect

和useEffect功能基本相同。

主要区别是它的执行时机和componentDidMount,componentDidUpdate相同，都在浏览器绘制之前执行。

建议： 先使用useEffect, 有问题再用useLayoutEffect

12. useDebugValue

用于调试时在自定义Hook中添加标签。

useDebugValue(date, date => date.toDateString());

示例：

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  // 在开发者工具中的这个 Hook 旁边显示标签
  // e.g. "FriendStatus: Online"
  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}