0.什么是 React Hooks

1.为什么有 React Hooks

• 在组件之间复用状态逻辑很难

• 复杂组件变得难以理解

• 难以理解的 class

2.怎么用 React Hooks

1.基础

• Basic Hooks
• useState
• useEffect
• useContext

• Additional Hooks
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

• Custom Hooks

2.进阶：

useState:

1. 陈旧闭包（ stale closure https://leewarrick.com/blog/react-use-effect-explained/, https://zh-hans.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function ）

function Counter() {  
	const [count, setCount] = useState(0);  
	
	function handleAlertClick() {    
		setTimeout(() => {      
			alert('You clicked on: ' + count);    
		}, 3000);  
	}  
	
	useEffect(() => {    
		console.log(`You clicked ${count} times`);    
		document.title = `You clicked ${count} times`;  
	}, []);  
	
	return (    
		<div>      
			<p>You clicked {count} times</p>      
			<button onClick={() => setCount(count + 1)}>Click me</button>      
			<button onClick={handleAlertClick}>Show alert</button>    
		</div>  
	);
}

function Timer() {  
	const [count, setCount] = useState(0);  
	const [randomNum, setRandomNum] = useState(0);  

	useEffect(() => {    
		const intervalId = setInterval(() => {      
			setCount(count + 1);      
			setRandomNum(Math.random());    
		}, 1000);    

		return () => clearInterval(intervalId);  
	}, []);  
	
	return (    
		<div>      
			<p>The count is: {count}</p>      
			<p>RandomNum is {randomNum}</p>    
		</div>  
	);
}

1. 太多的 useState， state 写成对象可不可以：可以，但需自己手动合并更新对象 https://zh-hans.reactjs.org/docs/hooks-reference.html#functional-updates

setState(
	prevState => {  
		// 也可以使用 Object.assign  
		return { ...prevState, ...updatedValues };
	}
);

useEffect:

1. componentDidMount

componentDidMount() {   
	fn()
}

useEffect(() => fn(), []);

1. componentWillUnmount

componentWillUnmount() {   
	fn2()
}

useEffect(() => fn2, []);

// 结合看看
componentDidMount() {   
	fn()
}

componentWillUnmount() {   
	fn2()
}

useEffect(() => {    
	fn()    
	return () => fn2()
}, []);

1. componentDidUpdate

const mounting = useRef(true);

useEffect(() => {  
	if (mounting.current) {    
		mounting.current = false;  
	} else {    
		fn();  
	}
});

1. 每次 Render 都有自己的 Props 与 State

2. 每次 Render 都有自己的事件处理

3. 每次 Render 都有自己的 Effects

useLayoutEffect

useMemo 与 useCallback:

1. 作用演示

2. 使用 useMemo 实现 useCallback

useRef

1. useRef 解决 stale closure 问题

function Timer() {  
	const [count, setCount] = React.useState(0);  
	const countRef = React.useRef(0);  
	
	React.useEffect(() => {    
		const intervalId = setInterval(() => {      
			countRef.current = countRef.current + 1;      
			setCount(countRef.current);    
		}, 1000);    
		
		return () => clearInterval(intervalId);  
	}, []);  
	
	return <div>The count is: {count}</div>;
}

1. 但不能没有 useState

// This won’t work:
function Timer() {  
	const count = React.useRef(0);  
	React.useEffect(() => {    
		const intervalId = setInterval(() => {      
			count.current = count.current + 1;      
			//console.log('Ref example count: ' + count.current)    
		}, 1000);    
		
		return () => clearInterval(intervalId);  
	}, []);  

	return <div>The count is: {count.current}</div>;
}

有了 useReducer 是不是不需要 redux 了？

3.React Hooks 原理

“手写 Hooks”

import React from 'react';
import ReactDOM from 'react-dom';

let Hook = [];
let currentHook = 0;

function useState(initVal) {
  Hook[currentHook] = Hook[currentHook] || [, initVal];
  const cursor = currentHook;
  function setVal(newVal) {
    Hook[cursor] = [, newVal];
    render();
  }
  // 返回state 然后 currentHook+1
  return [Hook[currentHook++][1], setVal];
}
function useEffect(fn, watch) {
  const hasWatchChange = Hook[currentHook] ? !watch.every((val, i) => val === Hook[currentHook][1][i]) : true;
  if (hasWatchChange) {
    fn();
    Hook[currentHook] = [, watch];
  }
  currentHook++; // 累加 currentHook
}
function useMemo(fn, watch) {
  const hasWatchChange = Hook[currentHook] ? !watch.every((val, i) => val === Hook[currentHook][1][i]) : true;
  if (Hook[currentHook] && !hasWatchChange) {
    const prev = Hook[currentHook][0];
    currentHook++;
    return prev;
  }
  const r = fn();
  Hook[currentHook] = [r, watch];
  currentHook++; // 累加 currentHook
  return r;
}

function App() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(1);

  useEffect(() => {
    document.title = `You clicked count ${count} times`;
  }, [count]);
  useEffect(() => {
    document.title = `You clicked data ${data} times`;
  }, [data]);

  const dataPlus = useMemo(() => {
    console.log('data cal');
    return data;
  }, [data]);

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >{`当前点击次数：${count}`}</button>
      <button
        onClick={() => {
          setData(data + 2);
        }}
      >{`当前点击次数+2：${data}`}</button>
      <button
        onClick={() => {
          setData(5);
        }}
      >
        set data = 5
      </button>
      <div>dataPlus(data + 1): {dataPlus}</div>
    </div>
  );
}
render(); // 首次渲染
function render() {
  currentHook = 0; // 重新render时需要设置为 0
  ReactDOM.render(<App />, document.getElementById('root'));
  console.log(Hook); // 执行hook后 数组的变化
}

1. “setState”（useState 中的第二个返回值统称）才会更新

2. 维护一个存储所有 Hooks 的数据结构，一个一个 Hook 处理，处理完递增

3. 对依赖的存储和比较

1. 数据结构：数组 vs 链表

2. render()部分的具体实现：如何与当前 FC 绑定而不是 Render All？获取当前 fiber

Memoization

function memoize(fn) {  
	return function() {    
		var args = Array.prototype.slice.call(arguments);    
		fn.cache = fn.cache || {};    
		return fn.cache[args] ? fn.cache[args] : (fn.cache[args] = fn.apply(this, args));  
	};
}

4.React Hooks 不足

1. 暂时不能取代的 API:

1. 难维护？ https://weibo.com/1400854834/I6psH4P6Q?filter=hot&root_comment_id=0&type=comment

6.参考

• 官网：https://zh-hans.reactjs.org/docs/hooks-intro.html

• 丹·阿布莫夫博客：https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/

7.实例