<small id='WyVU5MglJ'></small> <noframes id='VvrQKD'>

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

      <legend id='v1y3LIN'><style id='HxlCdv'><dir id='gWuVySRC'><q id='e6y7lobYN'></q></dir></style></legend>
      <i id='qKaY'><tr id='cU1saDfHwL'><dt id='o9Ilafb'><q id='Skjw'><span id='VmL3H6Fq'><b id='9VpE67MN'><form id='rhJ4'><ins id='SGAH9Bgk'></ins><ul id='P8qwR4'></ul><sub id='1BUFo'></sub></form><legend id='H3JX2Qql0S'></legend><bdo id='1b8em9NAq0'><pre id='73YgKT90z'><center id='LMF6ikqncQ'></center></pre></bdo></b><th id='olhL'></th></span></q></dt></tr></i><div id='TMypj'><tfoot id='o6qt2bgJ'></tfoot><dl id='JucTFVIs'><fieldset id='Wc9qPh'></fieldset></dl></div>

          <bdo id='im2PaSl3'></bdo><ul id='hJxeF'></ul>

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

            useContext Hook 是怎么作业的

            admin 2019-11-05 116人围观 ,发现0个评论

            一切这些新的 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 (

            {value =>
            TuseContext Hook 是怎么作业的he 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 =>

            useContext Hook 是怎么作业的{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 {notificationsuseContext Hook 是怎么作业的.length} notifications.

            );
            }

            ​总结

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

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

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

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

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

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

            参阅:

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

            沟通

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


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