hooks

作者: ahappyone | 来源:发表于2018-12-07 21:07 被阅读0次

    定义Hooks are a new feature proposal that lets you use state and other React features without writing a class.

    作者们为了解决如下问题

    1、复用组件间的逻辑(之前通过 render props 和 高阶组件

    2、复杂的组件逻辑很难理解;

    3、class 阻碍了理解 react

    而提出了 hooks。

    所以 hooks 到底是什么呢?hooks 是一个可以 hook into react features 的函数。当你写一个函数组件,有需要用到 state 的时候就可以用 hooks。

    (1)useState:在组件函数内生命一个 state 变量,以及一个可以改变该 state 的函数(类似之前的 setState 函数)。

            定义 state:const [count, setCount] = useState();使用 state:直接在函数内部使用 count 即可;更新 state:通过调用 setCount 

            一个函数内可以用同样的方法定义多个 state。

    (2)useEffect :可以理解成是组件的生命周期函数,入参为函数,组件每次 render 完成就会执行该函数(可以解决需要在多个生命周期中写重复代码的问题)。在函数组件内部执行,可以直接访问函数内部的 state 变量。入参函数在每次 render 完成后都会重新赋值,重新执行,可以看成是 render 后的产物。effect 不会阻碍浏览器刷新页面,因为不是同步的。

            (a) Effects Without Cleanup

            (b) Effects with Cleanup:有时为了防止内存泄漏,入参函数需 return 一个回调函数来 cleanup。当组件 unmount 的时候就会触发该 cleanup 回调。

        tips:可以定义多个 effect;可以 skip effect 来提升性能:给 useEffect 传入第二个入参来过滤 监听的 state。

    rules(待实践中理解)

    (1)Only Call Hooks at the Top Level

    (2)Only Call Hooks from React Functions

    可通过 eslint-plugin-react-hooks 插件来控制,后期可能会融入 react 中。

    相关文章

      网友评论

          本文标题:hooks

          本文链接:https://www.haomeiwen.com/subject/pauxhqtx.html