精华内容
下载资源
问答
  • 这个项目展示了一种使用React的useContext和useState钩子实现暗/亮模式切换的方法。 相关文件是src/ThemeProvider.tsx , src/index.tsx和src/App.tsx 。 该项目使用Typescript,但是通过删除类型可以在javascript...
  • usecontext-源码

    2021-03-26 05:52:11
    Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行该应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何...
  • useContext-源码

    2021-03-26 03:25:20
    Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行该应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何...
  • useContext

    2021-08-22 18:28:10
    简书文章 https://www.jianshu.com/p/b15e0c92d7c4
    展开全文
  • Contact Fox是一个全栈MERN应用程序,它使用Context API以及useContext和useReducer挂钩进行状态管理。 该应用程序还使用专用路由和JWT身份验证来授权单个用户,以便他们可以安全地注册,登录和注销该应用程序。 ...
  • 这些示例涵盖useReducer,useContext,IntersectionObserver的使用以及使用XState管理加载状态。 useReducer 视频: : useContext 视频: : 交叉口观察者 视频: : XState简介 视频: : XState数据加载器...
  • useContext()替代ReactRedux.connect()来useContext()性能。 # peer deps $ yarn add react react-dom redux react-redux $ yarn add use-react-redux-context # or npm install --save use-react-redux-context ...
  • react_Context_modals:切换使用react和useContext挂钩制作的侧边栏和模式
  • 状态管理库遵循redux和redux-thunk体系结构,但使用React的最新useContext和useReducer钩子。 安装 npm install --save resurrection 用法 // Higher Order Component (HOC) import React from "react" import { ...
  • Github用户查找器 这是一个易于启动React开发的简单应用程序。 它有什么作用? 它使用用户在表单中输入的文本搜索所有Github用户。 它以网格格式返回与字符串匹配的所有用户。 单击more选项卡会将用户带到具有重要...
  • useContext Hook 用法

    2021-05-11 23:01:07
    文章目录useContext Hook 介绍useContext Hook 实例 useContext Hook 介绍 一种组件间通信方式,常用于【祖宗组件】与【后代组件】之间的通信 useContext Hook 实例

    useContext Hook 介绍

    const value = React.useContext(MyContext)
    
    • 接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。
    • 当前的 context 值由上层组件中距离当前组件最近的<MyContext.Provider>valueprop决定
    • 当组件上层最近的<MyContext.Provider>更新时,该Hook 会触发重新渲染,并使用最新传递给MyContextproviderd的 context value
    • 即使祖先使用React.memo 或 shouldComponentUpdate ,也会在组件本身使用useContext是重新渲染
    • useContext的参数必须是 context 对象本身
    正确:useContext(MyContext)
    错误:useContext(MyContext.Consumer)
    错误:useContext(MyContext.Provider)
    
    • 调用useContext的组件总会在context值变化时重新渲染。
    • 如果重新渲染组件的开销较大,你可以通过使用memoization来优化
    • useContext(MyContext)相当于 class 组件中的static contextType = MyContext或者<MyContext.Consumer>
    • useContext(MyContext)只是让你能够读取 context 的值以及订阅 context 的变化。
    • 你依然需要在上层组件树中使用<MyContext.Provider>来为下层组件提供 context。

    useContext Hook 实例

    import React, {useContext } from 'react';
    //创建 context对象
    
    //createContext 参数  可以进行初始化操作
    const colorContext = React.createContext("green");
    
    //Child
    function Child() {
      //传递给 useContext 的是 context 而不是 consumer
      const color = useContext(colorContext);
      return <div>
        <h3>子页面</h3>
        颜色值是:{color}
      </div>
    }
    
    function App() {
      return (
        <colorContext.Provider value={"yellow"}>
          <div>
            <h2>useContext</h2>
            <Child />
          </div>
        </colorContext.Provider>
      )
    }
    export default App;
    

    在这里插入图片描述

    import React, {useContext } from 'react';
    //创建 context对象
    
    //createContext 参数  可以进行初始化操作
    const colorContext = React.createContext("green");
    const userContext = React.createContext({ "username": "lili" });
    
    //useContext 写多个context时,可以避免 组件多层级嵌套
    //Child
    function Child() {
      //传递给 useContext 的是 context 而不是 consumer
      const color = useContext(colorContext);
      const user = useContext(userContext);
      return <div>
        <h3>子页面</h3>
        颜色值:{color}<br/>
        名字:{user.username}
      </div>
    }
    
    function App() {
      return (
        <colorContext.Provider value={"yellow"}>
          <div>
            <h2>useContext</h2>
            <Child />
          </div>
        </colorContext.Provider>
      )
    }
    export default App;
    

    在这里插入图片描述

    展开全文
  • 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。...
  • 六、useContext深入学习

    2021-02-17 23:19:35
    useContext是React hooks三个最基础的hook函数之一。 const value = useContext(MyContext); useContext接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。 当前的 context 值由...

    一、介绍

    useContext是React hooks三个最基础的hook函数之一。

    const value = useContext(MyContext);
    

    useContext接收一个 context 对象React.createContext 的返回值)并返回该 context 的当前值

    当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider>value prop 决定。 当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。

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

    注意:useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context。

    二、Context的使用

    首先看看context的这几个api。

    1、React.createContext

    const MyContext = React.createContext(defaultValue);
    

    创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

    只有当组件所处的树中没有匹配到 Provider 时,其 defaultValue 参数才会生效。这有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意:将 undefined 传递给 Provider 的 value 时,消费组件的 defaultValue 不会生效。

    2、React.Provider

    <MyContext.Provider value={/* 某个值 */}>
    

    ​ 每个 Context 对象都会返回一个 Provider React 组件,它允许消费组件订阅 context 的变化

    ​ Provider 接收一个 value 属性,传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用,里层的会覆盖外层的数据。

    ​ 当 Provider 的 value 值发生变化时,它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数,因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

    通过新旧值检测来确定变化,使用了与 Object.is 相同的算法

    当传递对象给 value 时,检测变化的方式会导致一些问题:因为 context 会使用参考标识(reference identity)来决定何时进行渲染,这里可能会有一些陷阱,当 provider 的父组件进行重渲染时,可能会在 consumers 组件中触发意外的渲染。举个例子,当每一次 Provider 重渲染时,以下的代码会重渲染所有下面的 consumers 组件,因为 value 属性总是被赋值为新的对象:

    <MyContext.Provider value={{something: 'something'}}>       
      <Toolbar />
     </MyContext.Provider>
    

    为了防止这种情况,将 value 状态提升到父节点的 state 里

    3、React.Consumer

    <MyContext.Consumer>
      {value => /* 基于 context 值进行渲染*/}
    </MyContext.Consumer>
    

    ​ 这里,React 组件也可以订阅到 context 变更。这能让你在函数式组件中完成订阅 context

    ​ 这需要函数作为子元素(function as a child)这种做法。这个函数接收当前的 context 值,返回一个 React 节点传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value。如果没有对应的 Provider,value 参数等同于传递给 createContext()defaultValue

    context 对象接受一个名为 displayName 的 property,类型为字符串。React DevTools 使用该字符串来确定 context 要显示的内容。

    补充:

    如果只有一个consumer,那么就可以使用contextType来代替consumer

    // Context 可以让我们无须明确地传遍每一个组件,就能将值深入传递进组件树。
    // 为当前的 theme 创建一个 context(“light”为默认值)。
    const ThemeContext = React.createContext('light');
    class App extends React.Component {
      render() {
        // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。   
        // 无论多深,任何组件都能读取这个值。    
        // 在这个例子中,我们将 “dark” 作为当前的值传递下去。    
        return (
              <ThemeContext.Provider value="dark">        
                    <Toolbar />
              </ThemeContext.Provider>
            );
          }
    }
     
    // 中间的组件再也不必指明往下传递 theme 了。
    function Toolbar() {  return (
        <div>
          <ThemedButton />
        </div>
      );
    }
     
    class ThemedButton extends React.Component {
      // 指定 contextType 读取当前的 theme context。  
      // React 会往上找到最近的 theme Provider,然后使用它的值。  
      // 在这个例子中,当前的 theme 值为 “dark”。  
        static contextType = ThemeContext;
          render() {
            return <Button theme={this.context} />;  
        }
    }
    

    4、动态Context

    ​ 可以在React.createContext();绑定动态值。

    ​ 在嵌套组件中更新 Context:从一个在组件树中嵌套很深的组件中更新 context 是很有必要的。在这种场景下,你可以通过 context 传递一个函数,使得 consumers 组件更新 context。

    // 确保传递给 createContext 的默认值数据结构是调用的组件(consumers)所能匹配的!
    export const ThemeContext = React.createContext({
    theme: themes.dark,  toggleTheme: () => {},});
    
    //创建Context组件
    const ThemeContext = React.createContext({
      theme: 'dark',
      toggle: () => {}, //向上下文设定一个回调方法
    });
    
    //运行APP
    class App extends React.Component {
      constructor(props) {
        super(props);
    
        this.toggle = () => { //设定toggle方法,会作为context参数传递
          this.setState(state => ({
            theme:
              state.theme === themes.dark
                ? themes.light
                : themes.dark,
          }));
        };
    
        this.state = {
          theme: themes.light,
          toggle: this.toggle,
        };
      }
    
      render() {
        return (
          <ThemeContext.Provider value={this.state}> //state包含了toggle方法
            <Content />
          </ThemeContext.Provider>
        );
      }
    }
    
    //中间组件
    function Content() {
      return (
        <div>
          <Button />
        </div>
      );
    }
    
    //接收组件
    function Button() {
      return (
        <ThemeContext.Consumer>
          {({theme, toggle}) => (
            <button
              onClick={toggle} //调用回调
              style={{backgroundColor: theme}}>
              Toggle Theme
            </button>
          )}
        </ThemeContext.Consumer>
      );
    }
    

    context在如下的生命周期钩子中可以使用

    • constructor(props, context)
    • componentWillReceiveProps(nextProps, nextContext)
    • shouldComponentUpdate(nextProps, nextState, nextContext)
    • componentWillUpdate(nextProps, nextState, nextContext)
    • componentDidUpdate(prevProps, prevState, prevContext)

    React context的局限性

    1. 在组件树中,如果中间某一个组件 ShouldComponentUpdate 返回了 false ,会阻碍 context 的正常传值,导致子组件无法获取更新。
    2. 组件本身 extends React.PureComponent 也会阻碍 context 的更新。

    三、useContext的出现是为了解决什么问题

    ​ Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。如果我们在一个项目中只会出现一个context,那么consumer订阅provider的方式完全可以使用contextType来代替。但事实上,在一个项目势必会涉及到很多context,如果当前用户,国际化,主题颜色等。这么多的context,如果在某一个组件中同时使用了这三者,那么会造成很深的嵌套,不仅后期维护困难,而且开发体验也不会太好。

    ​ 所以为了解决这个问题,就有useContext的出现。useContext与useState、useEffect是react hooks的三大基本hooks。但是useContext与其他两者不一样,他并没有完全摒弃之前使Context的方式方法,而是在之前使用context的基础上做了一个优化。

    const ThemeContext = React.createContext('light');
    const localContext = React.createContext('zh');
    const App=()=>{
      return (
              <ThemeContext.Provider value="dark">        
                    <Toolbar />
              </ThemeContext.Provider>
            );
    	}
    }
    // 中间的组件再也不必指明往下传递 theme 了。
    function Toolbar() {  return (
        <div>
          <ThemedButton />
        </div>
      );
    }
     
    const ThemedButton()=>{
      const theme=useContext(ThemeContext);
      const local=useCOntext(localContext);
       return(
        	<Button theme={this.context}/>
    		)
    }
    

    四、Context的优缺点

    Context主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用,因为这会使得组件的复用性变差。
    

    如果你只是想避免层层传递一些属性,组件组合(component composition)有时候是一个比 context 更好的解决方案。

    我们考虑这样的场景:

    ​ 我们有一个Page组件,在Page组件中有一个Link组件,然后Link组件中有一个User组件,那么数据需要从Page组件传递到User组件,而中间的Link组件,不对数据做任何的处理。只是透传到User组件。但是当需要有需求变动的时候,还需要对Link组件作出更新,那么可以使用React.Children的方式,也就是slot的方式将组件组合在一起:

    const Page = () => {
        return (
            <div></div>
        )
    }
    const Link = () => {
        return (
            <div></div>
        )
    }
    const User = () => {
        return (
            <div></div>
        )
    }
    const data = {name: 'lee'}
    const App = () => {
        return (
            <Page>
                <Link user={data}>
                    <User user={data}></User>
                </Link>
            </Page>
        )
    }
    

    ​ 这种对组件的控制反转减少了在你的应用中要传递的 props 数量,这在很多场景下会使得你的代码更加干净,使你对根组件有更多的把控。但是,这并不适用于每一个场景:这种将逻辑提升到组件树的更高层次来处理,会使得这些高层组件变得更复杂,并且会强行将低层组件适应这样的形式,这可能不会是你想要的。而且你的组件并不限制于接收单个子组件。你可能会传递多个子组件,甚至会为这些子组件(children)封装多个单独的“接口(slots)”.

    ​ 这种模式足够覆盖很多场景了,在这些场景下你需要将子组件和直接关联的父组件解耦。如果子组件需要在渲染前和父组件进行一些交流,你可以进一步使用 render props

    ​ 但是,有的时候在组件树中很多不同层级的组件需要访问同样的一批数据。Context 能让你将这些数据向组件树下所有的组件进行“广播”,所有的组件都能访问到这些数据,也能访问到后续的数据更新。使用 context 的通用的场景包括管理当前的 locale,theme,或者一些缓存数据,这比替代方案要简单的多。

    展开全文
  • useContext 基础使用

    2021-10-09 11:54:21
    1.先创建一个reducer... const TestContext:React.FC = ()=>{ const { state ,dispatch} = useContext(myContext); return { state.name } { dispatch({ type: "name" }) }}>修改名称 } export default TestContext;

    1.先创建一个reducer文件,写action,以及写一个容器

    import React, { useReducer } from "react";
    const myContext = React.createContext({});
    function reducer(state, action){
    let newState = Object.assign(true,{},state);
    switch(action.type){
    case 'name': newState.name = "change name";break;
    case 'age': newState.age++;break;
    
    }
    return newState;
    }
    const ContextProvider = props => {
    const [state, dispatch] = useReducer(reducer, { age: 18,name: 'miss huang'});
    return (
    <myContext.Provider value={{ state, dispatch }}>
    {props.children}
    </myContext.Provider>
    );
    };
    export { reducer, myContext, ContextProvider };

    2.父组件

    import React from "react" ;
    import TestContext from "./testContext";
    import {ContextProvider} from './reducer';
    type AnalysisProps = {
    name: string,
    age: number
    }
    
    
    const Test:React.FC<AnalysisProps> = ()=>{
    return <div>
    <ContextProvider>
    <TestContext />
    </ContextProvider>
    </div>
    }
    
    export default Test;
    

    3.子组件内,可直接使用和修改内容,备注:(在任意孙子组件内,可以直接使用state和dispatch,用法和子组件一样)

    import React,{useContext} from "react" ;
    import { myContext } from "./reducer";
    import Test1 from './test1';
    const TestContext:React.FC = ()=>{
    const { state ,dispatch} = useContext(myContext);
    return <div>
    { state.name }
    <button onClick={()=>{
    dispatch({ type: "name" })
    }}>修改名称</button>
    <Test1 />
    </div>
    }
    
    export default TestContext;

    展开全文
  • 注意:即使祖先使用 React.memo或shouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染 别忘记 useContext 的参数必须是 context 对象本身: 正确: useContext(MyContext) 错误: useContext...
  • 多层级使用useContext

    2021-06-02 10:27:49
    useContext作用 Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。 Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言...
  • React Hook: useContext() , useState()和React.createContext()来切换App组件的主题颜色 先进CSS效果可模仿键盘单击 Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start ...
  • 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。...
  • useContext更佳实践

    2020-08-24 17:26:14
    return ( {children} ) } 同时,useCount也拆分为useCountState与useCountDispatch: // src/count-context.js function useCountState() { const context = React.useContext(CountStateContext);...
  • import React, { useContext } from 'react' // 主题颜色 const themes = { light: { foreground: '#000', background: '#eee', }, dark: { foreground: '#fff', background: '#222', }, } // 创建 Context const ...
  • useContext的使用

    2021-04-16 11:36:56
    useContext的使用 需要在组件之间共享状态,可以使用useContext() 使用方法如下: import React, { useContext } from "react"; import ReactDOM from "react-dom"; //父组件上使用React的Context API,在组件外部...
  • useContext学习随笔

    2020-10-21 18:31:55
    useContext是一个常用的Hooks 它的作用是传递数值给子组件 用法: 1.在主函数外面创建: const Info = React.createContext({}); 2.在主函数中使用Provider来进行传递,后面的values值为传递过去的数据 export ...
  • 在任意后代组件中,获取公共数据 import React, { useContext } from 'react' import { Context } from './某个文件' const 函数组件 = () => { const 公共数据 = useContext(Context) return ( 函数组件的内容 ) } ...
  • 用hooks来解决开发中的问题大大提升了我们日常工作的效率,本文是针对异步请求数据的一个案例,目前只针对useReducer、useContext、useEffect进行探讨,同时还需要使用过Redux进行过异步action添加。 分享每日一题...
  • react hooks--useContext

    2021-07-02 17:26:16
    在开发过程中,什么时候用到useContext呢?当我们需要跨组件层级进行数据传递,实现共享时,useContext就能派上用场了。 一、基础用法 1. 声明。使用createContext 方法创建一个 Context 对象,并设置初始值。 ...
  • useContext函数是React Hooks三大基础hooks函数之一。话不多说,我们先来看用法: const value = useContext(MyContext); 接收一个 context 对象(React.createContext的返回值)并返回该 context 的当前值。当前...
  • useState useState接收一个初始值,返回的是一个解构出来的数组,第一个是当前状态(似state),第二个是状态的更新函数(似setState),更新函数与react的setState不同的是,useState的更新函数会将状态替换(replace)...
  • React--useContext

    千次阅读 2019-10-16 12:50:30
    在出现useContext之前,使用context的方式主要是两种,第一种需要使用Consumer: class Component2 extends Component{ render(){ return ( <CountContext.Consumer> { count => <div>{count}&l...
  • useContext 初体验 App.js import React from 'react'; import Page_1 from './pages/Page_1'; // 自定义属性 const deafultContxt = { name: 'youwne', }; /* 创建上下文对象, 并导出上下文对象 */ export ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,558
精华内容 1,423
关键字:

usecontext