React Hooks 学习感悟

学习React的同志们，相信一定都听过React Hooks的大名，或者已经在熟练使用它了。今天我将总结下学习hooks后的感受和理解，帮助即将使用hooks的年轻同志。

hooks的出现

根据官方说法hooks的出现主要在于解决重用有状态逻辑困难、复杂组件不好理解、混淆this指向等问题。此外，hooks允许我们不使用类的情况下使用更多的react功能。这些全都要感谢大佬设计支持的100%向后兼容的想法。

hooks的理解

hooks拥抱函数式编程，使得组件更像是函数。但又不影响内部jsx的使用，这种设计，简直就是神了。此外，hooks api很大程度帮助我们完成业务的同时，也提供了我们对hooks的理解。之前有看到过一种比喻，说hooks本身是自变量和因变量的解决方案。比如useState、useReducer、useContext是自变量，因为他们是用来声明变量。相反，useEffect、useCallback、useMemo就是因变量。所以大家也就理解为什么使用时候后面要有数组，放依赖数据。而有人会问useRef是属于哪一个呢，不好意思，它是一个例外，它是为了给组件增加灵活性使用的，因此并不在这个范围之内。也可以把它想成介于两者之间吧。

hooks的应用

hooks由于100%向后兼容，所以只要使用react类能做的,它都能用。并且建议大家以后就用hooks替换掉类组件开发。就是说今后只用hooksk开发。

实战

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

export default function demo() {
    const [title, setTitle] = useState('我是组件标题');

    const content = useMemo(() => {
        return `我是标题${title}下的内容`;
    }, [title])

    useEffect(() => {
        document.title = title;
    }, [title])

    return <div>
        {title}
        <div>{content}</div>
        <button onClick={setTitle(`${我是组件标题}${new Date().getTime()}`)}></button>
    </div>
}
           

结束语