源码解析 React Hook 构建过程：没有设计就是最好的设计

class App extends React.Component{    constructor(props){        super(props);        this.state = {            //...        }    }    //...}

function Footer(links){    return (        <footer>            <ul>            {links.map(({href, title})=>{                return <li><a href={href}>{title}</a></li>            })}            </ul>        </footer>    )}

// 计数器function Counter(){    let state = {count:0}        function clickHandler(){        setState({count: state.count+1})       }        return (        <div>            <span>{count}</span>            <button onClick={clickHandler}>increment</button>        </div>    )}

class A(){    constructor(){        this.count = 0;    }    increment(){        return this.count ++;    }}const a = new A();a.increment();

const global = {count:0};
function increment(){    return global.count++;}

const count = 0;const $counter = $('#counter');$counter.data('count', count);
funciton increment(){    const newCount = parseInt($counter.data('count'), 10) + 1;    $counter.data('count',newCount);    return newCount;}

const Counter = function(){    let count = 0;    return {        increment: ()=>{            return count ++;        }    }}()
Counter.increment();

function Counter(){    const [count, dispatch] = useState(0)        return (        <div>            <span>{count}</span>            <button onClick={dispatch(count+1)}>increment</button>        </div>    )}

function useState(initialState){    let state = initialState;    function dispatch = (newState, action)=>{        state = newState;    }    return [state, dispatch]}

type Hook = {  memoizedState: any,   // 上一次完整更新之后的最终状态值  queue: UpdateQueue<any, any> | null, //更新队列};

function useState(initialState){    if(isMounting){        return mountState(initialState);    }        if(isUpdateing){        return updateState(initialState);    }}
// 第一次调用组件的useState时实际调用的方法function mountState(initialState){    let hook = createNewHook();    hook.memoizedState = initalState;    return [hook.memoizedState, dispatchAction]}
function dispatchAction(action){    // 使用数据结构存储所有的更新行为，以便在rerender流程中计算最新的状态值    storeUpdateActions(action);    // 执行fiber的渲染    scheduleWork();}
// 第一次之后每一次执行useState时实际调用的方法function updateState(initialState){    // 根据dispatchAction中存储的更新行为计算出新的状态值，并返回给组件    doReducerWork();        return [hook.memoizedState, dispatchAction];}   
function createNewHook(){    return {        memoizedState: null,        baseUpdate: null    }}

function Count(){    const [count, setCount] = useState(0);    const [countTime, setCountTime] = useState(null);        function clickHandler(){        // 调用多次dispatchAction        setCount(1);        setCount(2);        setCount(3);        //...        setCountTime(Date.now())    }        return (    <div>        <div>{count} in {countTime}</div>        <button onClick={clickHandler} >update counter</button>    </div>    )}

type Queue{    last: Update,   // 最后一次更新逻辑    dispatch: any,    lastRenderedState: any  // 最后一次渲染组件时的状态}
type Update{    action: any,    // 状态值    next: Update    // 下一次Update}

function mountState(initialState){    let hook = createNewHook();    hook.memoizedState = initalState;        // 新建一个队列    const queue = (hook.queue = {        last: null,        dispatch: null,        lastRenderedState:null    });        //通过闭包的方式，实现队列在不同函数中的共享。前提是每次用的dispatch函数是同一个    const dispatch = dispatchAction.bind(null, queue);    return [hook.memoizedState, dispatch]}

function dispatchAction(queue, action){    // 使用数据结构存储所有的更新行为，以便在rerender流程中计算最新的状态值    const update = {        action,        next: null    }        let last = queue.last;    if(last === null){        update.next = update;    }else{        // ... 更新循环链表    }        // 执行fiber的渲染    scheduleWork();}
function updateState(initialState){    // 获取当前正在工作中的hook    const hook = updateWorkInProgressHook();        // 根据dispatchAction中存储的更新行为计算出新的状态值，并返回给组件    (function doReducerWork(){        let newState = null;        do{            // 循环链表，执行每一次更新        }while(...)        hook.memoizedState = newState;    })();         return [hook.memoizedState, hook.queue.dispatch];} 

type FiberNode {    memoizedState:any  // 用来存放某个组件内所有的Hook状态}

resizeHandler(){    this.setState({        width: window.clientWidth,        height: window.clientHeight    });}
componentDidMount(){    window.addEventListener('resize', this.resizeHandler)}
componentWillUnmount(){    window.removeEventListener('resize', this.resizeHandler);}

const [firstName, setFirstName] = useState('James');const [secondName, setSecondName] = useState('Bond');
// 其他非state的Hook，比如提供一种更灵活更优雅的方式来书写副作用useEffect()

{    '1': hook1,    '2': hook2,    //...}

type Hook = {    memoizedState: any,                     // 上一次完整更新之后的最终状态值    queue: UpdateQueue<any, any> | null,    // 更新队列    next: any                               // 下一个hook}

const fiber = {    //...    memoizedState: {        memoizedState: 'James',         queue: {            last: {                action: 'Smith'            },              dispatch: dispatch,            lastRenderedState: 'Smith'        },        next: {            memoizedState: 'Bond',            queue: {                // ...            },            next: null        }    },    //...}

function Counter(){    const [count, setCount] = useState(0);    if(count >= 1){        const [countTime, setCountTime] = useState(Date.now());    }}
// mount 阶段构造的hook链为{    memoizedState: {        memoizedState: '0',         queue: {},        next: null}
// 调用setCount(1)之后的update 阶段，则会找不到对应的hook对象而出现异常

// 用来替代constructor初始化状态useState()
// 替代 componentDidMount和componentDidUpdate以及componentWillUnmount// 统一称为处理副作用useEffect()
// 替代shouldComponentuseMemo（）

componentDidMount(){    this.fetchData(this.props.userId).then(data=>{        //... setState    })        window.addEventListener('resize', this.onWindowResize);        this.counterTimer = setInterval(this.doCount, 1000);}
componentDidUpdate(prevProps){   if (this.props.userID !== prevProps.userID) {    this.fetchData(this.props.userID);  }}
componentWillUnmount(){    window.removeEventListener('resize', this.onWindowResize);    clearInterval(this.counterTimer);}

useEffect(()=>{    // do some effect work    return ()=>{        // clean the effect    }})

function useWindowSizeEffect(){    const [size, setSize] = useState({width: null, height: null});        function updateSize(){        setSize({width: window.innerWidth, height: window.innerHeight});    }        useEffect(()=>{        window.addEventListener('resize', updateSize);                return ()=>{            window.removeEventListener('resize', updateSize);        }    })        return size;}

useEffect(effectCreator: Function, deps: Array)
// democonst [firstName, setFirstName] = useState('James');const [count, setCount] = useState(0);
useEffect(()=>{    document.title = `${firstName}'s Blog`;}, [firstName])

type Effect{    tag: any,           // 用来标识effect的类型，    create: any,        // 副作用函数    destroy: any,       // 取消副作用的函数，    deps: Array,        // 依赖    next: Effect,       // 循环链表指针}
type EffectQueue{    lastEffect: Effect}
type FiberNode{    memoizedState:any  // 用来存放某个组件内所有的Hook状态    updateQueue: any  }

let componentUpdateQueue = null;function pushEffect(tag, create, deps){    // 构建更新队列    // ...}
function useEffect(create, deps){    if(isMount)(        mountEffect(create, deps)    )else{        updateEffect(create, deps)    }}
function mountEffect(create, deps){    const hook = createHook();    hook.memoizedState = pushEffect(xxxTag, create, deps);    }
function updateEffect(create, deps){    const hook = getHook();    if(currentHook!==null){        const prevEffect = currentHook.memoizedState;        if(deps!==null){            if(areHookInputsEqual(deps, prevEffect.deps)){                pushEffect(xxxTag, create, deps);                return;            }        }    }        hook.memoizedState = pushEffect(xxxTag, create, deps);}

function mountMemo(nextCreate,deps) {  const hook = mountWorkInProgressHook();  const nextDeps = deps === undefined ? null : deps;  const nextValue = nextCreate();  hook.memoizedState = [nextValue, nextDeps];  return nextValue;}
function updateMemo(nextCreate,deps){  const hook = updateWorkInProgressHook();  const nextDeps = deps === undefined ? null : deps;  // 上一次的缓存结果  const prevState = hook.memoizedState;  if (prevState !== null) {    if (nextDeps !== null) {      const prevDeps = prevState[1];      if (areHookInputsEqual(nextDeps, prevDeps)) {        return prevState[0];      }    }  }  const nextValue = nextCreate();  hook.memoizedState = [nextValue, nextDeps];  return nextValue;}

const result = useMemo(()=>{    return doSomeExpensiveWork(a,b);}, [a,b])

const Button = React.memo((props) => {  // 你的组件});

function ScrollView({row}) {  let [isScrollingDown, setIsScrollingDown] = useState(false);  let [prevRow, setPrevRow] = useState(null);
  if (row !== prevRow) {    // Row 自上次渲染以来发生过改变。更新 isScrollingDown。    setIsScrollingDown(prevRow !== null && row > prevRow);    setPrevRow(row);  }
  return `Scrolling down: ${isScrollingDown}`;}

const logMixin = {    componentWillMount: function(){        console.log('before mount:', Date.now());    }        componentDidMount: function(){        console.log('after mount:', Date.now())    }}
var createReactClass = require('create-react-class');const CompA = createReactClass({    mixins: [logMixin],    render: function(){        //...     }})
const CompB = createReactClass({    mixins: [logMixin],    render: function(){        //...     }})

class MyComp extends Component{    //...}export default connect(MyComp, //...)

function WithOptimizeLog(Comp){    return class extends Component{        constructor(props){            super(props);                   }                componentWillMount(){            console.log('before mount:', Date.now());        }                componentDidMount(){            console.log('after mount:', Date.now());        }                render(){            return (                <div>                    <Comp {...props} />                </div>            )        }    }} 
// CompAexport default WithOptimizeLog(CompA)
//CompBexport defaultWithOptimizeLog(CompB);

export default function Article() {    const [isLoading, setIsLoading] = useState(false);    const [content, setContent] = useState('origin content');        function handleClick() {        setIsLoading(true);        loadPaper().then(content=>{            setIsLoading(false);            setContent(content);        })    }
    return (        <div>            <button onClick={handleClick} disabled={isLoading} >                {isLoading ? 'loading...' : 'refresh'}            </button>            <article>{content}</article>        </div>    )}

function LoadingButton(props){    const [isLoading, setIsLoading] = useState(false);        function handleClick(){        props.onClick().finally(()=>{            setIsLoading(false);        });        }        return (        <button onClick={handleClick} disabled={isLoading} >            {isLoading ? 'loading...' : 'refresh'}        </button>    )}
// 使用function Article(){    const {content, setContent} = useState('');        clickHandler(){       return fetchArticle().then(data=>{           setContent(data);       })    }        return (        <div>            <LoadingButton onClick={this.clickHandler} />            <article>{content}</article>        </div>    )}

export default function Article() {    const [isLoading, setIsLoading] = useState(false);    const [content, setContent] = useState('origin content');        function handleClick() {        setIsLoading(true);        loadArticle().then(content=>{            setIsLoading(false);            setContent(content);        })    }
    return (        <div>            <button onClick={handleClick} disabled={isLoading} >                {isLoading ? 'loading...' : 'refresh'}            </button>            {                isLoading                    ? <img src={spinner}  alt="loading" />                    : <article>{content}</article>            }        </div>    )}

function LoadingButton(props){    const [isLoading, setIsLoading] = useState(false);        function handleClick(){        props.onClick().finally(()=>{            setIsLoading(false);        });        }        return (        <button onClick={handleClick} disabled={isLoading} >            {isLoading ? 'loading...' : 'refresh'}        </button>    )}
// 使用function Article(){    const {content, setContent} = useState('origin content');    const {isLoading, setIsLoading} = useState(false);        clickHandler(){       setIsLoading(true);       return fetchArticle().then(data=>{           setContent(data);           setIsLoading(false);       })    }        return (        <div>            <LoadingButton onClick={this.clickHandler} />            {                isLoading                    ? <img src={spinner}  alt="loading" />                    : <article>{content}</article>            }        </div>    )}

// 提供loading状态的抽象export function useIsLoading(initialValue, callback) {    const [isLoading, setIsLoading] = useState(initialValue);
    function onLoadingChange() {        setIsLoading(true);
        callback && callback().finally(() => {            setIsLoading(false);        })    }
    return {        value: isLoading,        disabled: isLoading,        onChange: onLoadingChange, // 适配其他组件        onClick: onLoadingChange,  // 适配按钮    }}
export default function Article() {    const loading = useIsLoading(false, fetch);    const [content, setContent] = useState('origin content');
    function fetch() {       return loadArticle().then(setContent);    }
    return (        <div>            <button {...loading}>                {loading.value ? 'loading...' : 'refresh'}            </button>                       {                loading.value ?                     <img src={spinner} alt="loading" />                    : <article>{content}</article>            }        </div>    )}

// 封装按钮function LoadingButton(props){    const {value, defaultText = '确定', loadingText='加载中...'} = props;    return (        <button {...props}>            {value ? loadingText: defaultText}        </button>    )}
// 封装loading动画function LoadingSpinner(props) {    return (        < >            { props.value && <img src={spinner} className="spinner" alt="loading" /> }        </>    )}// 使用
return (    <div>        <LoadingButton {...loading} />        <LoadingSpinner {...loading}/>        { loading.value || <article>{content}</article> }    </div>)