美文网首页
react Hooks —— 用法

react Hooks —— 用法

作者: sweetylulu | 来源:发表于2022-10-13 17:45 被阅读0次

    概念:

    接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider>value prop 决定。

    当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memoshouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染。

    调用了 useContext 的组件总会在 context 值变化时重新渲染。如果重渲染组件的开销较大,你可以 通过使用 memoization 来优化

    用法

    组件目录结构


    组件结构

    Home.js

    import React from "react";
    import { ThemeContext } from "../../contexts/theme";
    import P from "../P";
    
    const Home = () => {
      return (
        <div>
          <ThemeContext.Provider value="dark">
            <P />
          </ThemeContext.Provider>
        </div>
      );
    };
    
    export default Home;
    

    P.js

    import React from "react";
    import F from "./F";
    
    const P = () => {
      return (
        <div>
          <F />
        </div>
      );
    };
    
    export default P;
    

    F.js

    import React from "react";
    import S from "./S";
    
    const P = () => {
      return (
        <div>
          <S />
        </div>
      );
    };
    
    export default F;
    

    S.js

    import React, { useContext } from "react";
    import { ThemeContext } from "../contexts/theme";
    
    const S = () => {
      const theme = useContext(ThemeContext);
      return <div>{theme}</div>;
    };
    
    export default S;
    
    

    页面展示


    页面显示dark

    相关文章

      网友评论

          本文标题:react Hooks —— 用法

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