React hooks组件状态

useState(保存组件状态)

        用法：const [state,setState] = useState([]);

useEffect(处理副作用)

        Function Component 不存在生命周期，所以不要把Class Component的生命周期概念搬过来试图对号入座。

        用法：useEffect(() => {

                 // effect

                     return () => {

                            // cleanup

                      }

                }

        ),[依赖的状态，空数组表示不依赖]

       不要对Dependencies撒谎，如果你明明使用了某个变量，却没有申明在依赖中，等同于向React撒了谎，后果就是当依赖的变量改变时，useEffect也不会再次执行，eslint会报警告。

useCallback(记忆函数)

        防止因为组件重新渲染，导致方法被重新创建 ，起到缓存作用; 只有第二个参数 变化了，才重新声明一次

        用法：

        var handleClick = useCallback (() => {

                console . log ( name )

        },[ name ])

        < button onClick = {() => handleClick ()} > hello < /button>

useMemo(记忆组件)

        

        useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以的。

        用法：  useCallback ( fn , inputs ) is equivalent to useMemo (() => fn , inputs ).

唯一的区别是： useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并

且将函数执行结果返回给你。 所以在前面的例子中，可以返回 handleClick 来达到存储函数的目的。

所以 useCallback 常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而 useMemo 更适合经过函数

计算得到一个确定的值，比如记忆组件。

useRef(保存引用值)

        

        用法：

                const myswiper = useRef ( null );

                < Swiper ref = { myswiper } />

useReducer 和 useContext( 减少组件层级 )

        useReducer 与 useContext 连用。

       

自定义 hooks

当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。

        

        必须以“use” 开头吗？必须如此。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则