<small id='BU39'></small> <noframes id='VJyo'>

  • <tfoot id='sQjiP'></tfoot>

      <legend id='8AiBwV'><style id='2A6vV'><dir id='Q86n'><q id='eLjtdFKNg'></q></dir></style></legend>
      <i id='rEfN'><tr id='n56jYxaGU'><dt id='foC9vPRe'><q id='cFLDz'><span id='umMDW5dfT'><b id='LNTb3'><form id='CK4T2mZfA'><ins id='FZLkn'></ins><ul id='u8xYeq'></ul><sub id='dFqs'></sub></form><legend id='pcBXda7u41'></legend><bdo id='smQVXtL'><pre id='BwJUmnci0t'><center id='2uPp'></center></pre></bdo></b><th id='Y4nyeF81'></th></span></q></dt></tr></i><div id='JTsq'><tfoot id='m4ZY'></tfoot><dl id='E51bW'><fieldset id='ODTPdtWv'></fieldset></dl></div>

          <bdo id='0EXvl45I'></bdo><ul id='SW48'></ul>

          1. <li id='TJY2uiLUKN'></li>
            登陆

            useContext Hook 是怎么作业的

            admin 2019-11-06 136人围观 ,发现0个评论

            一useContext Hook 是怎么作业的切这些新的 React Hook之间都有一个主旨:便是为了使函数组件像类组件相同强壮。

            useContext hook 与其它几个有点不相同,但它在特定场景下仍是很有用的。

            React 的 Context API 是一种在应用程序中深化传递数据的办法,而无需手动一个一个在多个父后代之间传递 prop。当我们需求的仅仅传递数据时,它能够作为像Redux这样的东西的一个很好的代替。

            运用 Context ,首要顶层先声明 Provier 组件,并声明 value 特点,接着在后代组件中声明 Consumer 组件,这个 Consumer 子组件,只能是仅有的一个函数,函数参数便是 Context 的负载。假如有多个 Context ,Provider 和 Consumer 恣意的次序嵌套即可。

            此外我们还能够针对恣意一个 Context 运用 contextType 来简化对这个 Context 负载的获取。但在一个组件中,即便消费多个 Context,contextType 也只能指向其间一个。

            在 Hooks 环境中,仍旧能够运用 Consumer,可是 ContextType 作为类静态成员肯定是用不了。Hooks 供给了 useContext,不光处理了 Consumer 难用的问题一起也处理了 contextType 只能运用一个 context 的问题。

            规范办法

            运用 API的典型办法如下所示:

            import React from "react";
            import ReactDOM from "react-dom";
            // 创立 Context
            const NumberContext = React.createContext();
            // 它回来一个具有两个值的目标
            // { Provider, Consumer }
            function App() {
            // 运用 Provider 为一切后代代供给 value 值
            return (





            );
            }
            function Display() {
            // 运用 Consumer 从上下文中获取 value
            return (

            {useContext Hook 是怎么作业的value =>
            The answer is {value}.
            }

            );
            }
            ReactDOM.render(, document.querySelector("#root"));

            能够 CodeSandbox上看看运转作用。

            运用 useContext 办法

            运用 useContext hook 来重写上面的示例

            import React, { useContext } from 'react';
            // ...
            function Display() {
            const value = useContext(NumberContext);
            return
            The answer is {value}.
            ;
            }

            调用useContext,传入从React.createContext获取的上下文目标。

            仅有需求留意的是你有必要将整个上下文目标传递给useContext - 而不仅仅是Consumer, 当然假如忘记了,React会给出正告。

            嵌套的 Consumers

            你或许遇到这样的状况,我们的组件需求从多个父级上下文中接纳数据,然后导致这样的代码

            function HeaderBar() {
            return (

            {user =>

            {notifications =>

            Welcome back, {user.name}!
            You have {notifications.length} notifications.

            }
            }

            );
            }

            这种很多嵌套仅仅为了接纳两个值。下面是运用useContext时的作用:

            function HeaderBar() {
            const user = useContext(CurrentUser);
            const notifications = useContext(Notifications);
            return (

            Welcome back, {user.name}!
            You have {notifications.length} notifications.

            );
            }

            ​总结

            useContext 接纳一个 context 目标(React.createContext 的回来值)并回来该 context 的当时值。当时的 context 值由上层组件中距离当时组件最近的 的 value prop 决议。

            当组件上层最近的 更新时,该 existHook 会触发重烘托,并运用最新传递给 CountContext provider 的 context value 值。

            别忘记 useContext 的参数有必要是 context 目标自身:

            • 正确:useContext(MyContext)
            • 过错:useContext(MyContext.Consumer)
            • 过错:useContext(MyContext.Provider)

            调用了 useContexuseContext Hook 是怎么作业的t 的组件总会在 context 值变化时从头烘托。假如重烘托组件的开支较大,你能够 经过运用 memoization 来优化。

            代码布置后或许存在的BUG无法实时知道,过后为了处理useContext Hook 是怎么作业的这些BUG,花了很多的时刻进行log 调试,这边顺便给我们引荐一个好用的BUG监控东西 Fundebug。

            参阅:

            https://daveceddia.com/usecontext-hook/

            沟通

            重视大众号,后台回复福利,即可看到福利,你懂的。


            请关注微信公众号
            微信二维码
            不容错过
            Powered By Z-BlogPHP