首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

createContext()和useReducer()会收到相同的'initialState‘对象吗?

createContext()和useReducer()不会收到相同的'initialState'对象。

createContext()是React中的一个API,用于创建一个上下文对象,该对象可以在组件树中的任何地方被访问。它接受一个参数作为初始值,这个初始值会被传递给所有使用该上下文对象的组件。每个组件可以通过调用useContext()来获取该上下文对象的值。

useReducer()是React中的一个Hook,用于管理组件的状态。它接受一个reducer函数和一个初始状态作为参数,并返回一个包含当前状态和dispatch函数的数组。reducer函数接收当前状态和一个action对象作为参数,并返回新的状态。

由于createContext()和useReducer()是两个独立的API,它们之间没有直接的联系。因此,它们不会收到相同的'initialState'对象。在使用它们时,需要分别提供相应的初始值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

「不容错过」手摸手带你实现 React Hooks

": 'warn' // 检查 effect 依赖 } } useState useState 返回一个数组:一个 state,一个更新 state 函数。...它跟 class 组件中 componentDidMount、componentDidUpdate componentWillUnmount 具有相同用途,只不过被合并成了一个 API 与 componentDidMount...ref 对象,其 current 属性被初始化为传入参数 useRef 返回 ref 对象在组件整个生命周期内保持不变,也就是说每次重新渲染函数组件时,返回 ref 对象都是同一个(注意使用 React.createRef...useReducer redux 中 reducer 很像 useState 内部就是靠 useReducer 来实现 // 保存状态数组 let hookStates =...改写 function useState(initialState) { return useReducer(null, initialState); } 参考 Hook

1.2K10
  • useContext

    当然在这里我们还是要额外讨论下是不是需要使用Context,使用Context可能带来一些性能问题,因为当Context数据更新时,导致所有消费Context组件以及子组件树中所有组件都发生re-render...但是这并不适用于每一个场景,这种将逻辑提升到组件树更高层次来处理,会使得这些高层组件变得更复杂,并且强行将低层组件适应这样形式,这可能不会是你想要。...在React 16.8之后,React提供了useContext来消费Context,useContext接收一个Context对象并返回该Context的当前值。...file=/src/store/context.tsx import React, { createContext, Dispatch, useReducer } from "react"; import...此外除了层级式按使用场景拆分Context,一个最佳实践是将多变不变Context分开,让不变Context在外层,多变Context在内层。

    97910

    React系列-自定义Hooks很简单

    并且,使用 useReducer 还能给那些触发深更新组件做性能优化,因为你可以向子组件传递 dispatch 而不是回调函数 。...React.createContext有关系,接收一个 context 对象(React.createContext 返回值)并返回该 context 的当前值。...可以看到即使props没有变化,一旦组件上层最近 更新时,该 Hook 触发重渲染,此时Memo就失效了 Hooks替代Redux 有了useReducer...useContext以及React.createContext API,我们可以实现自己状态管理来替换Redux 实现react-redux react-redux:React Redux is the...useLayoutEffect useLayoutEffectuseEffect一样也是处理副作用,其函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect。

    2.1K20

    React useReducer 终极使用教程

    强大 React 团队难道就不能自己实现一个全局状态管理 hook ,这不,useReducer 为了解决这个需求应运而生。...[count, dispatch] = useReducer(reducer, initialState); 前面提到过,这里reducer函数本身接受两个参数,第一个是state,第二个是action...前面的那个例子相比,除了多了不同case之外,在更新state通过对象赋值方式进行。initialState 对象中是有两个key,在更新时候针对指定key更新即可。...在本例子中,笔者将使用useContext useReducer 函数一起使用,看下面的代码: const CountContext = React.createContext(); const...当你需要一个更可预测状态 当你应用运行在不同环境中时,使用Redux可以使得state管理变得更稳定。同样stateaction传到reducer时候,返回相同结果。

    3.7K10

    React Hooks-useTypescript!

    这个set state函数是一个纯函数,指定了如何更新状态,并且总是返回一个相同类型值。 useState可以通过我们提供给函数类型推断出初始值跟返回值类型。...useContext函数接受一个Context 对象并且返回当前context值。当provider更新时候,这个 Hook带着当前context最新值触发重新渲染。...useReducer接受3个参数然后返回state对象跟dispatch函数。...这个hook返回一个ref对象(MutableRefObject类型) ,它.current 属性会用传递进来initialValue初始化。...这导致我们组件树变得很臃肿,也产生了一些难以阅读理解代码。而且,他们都是用类组件实现导致一些难以优化问题.

    4.2K40

    React框架 Hook API

    在初始渲染期间,返回状态 (state) 与传入第一个参数 (initialState) 值相同。 setState 函数用于更新 state。...如果你更新函数返回值与当前 state 完全相同,则随后重渲染会被完全跳过。 注意 与 class 组件中 setState 方法不同,useState 不会自动合并更新对象。...React 为此提供了一个额外 useLayoutEffect Hook 来处理这类 effect。它 useEffect 结构相同,区别只是调用时机不同。...useContext const value = useContext(MyContext); 接收一个 context 对象(React.createContext 返回值)并返回该 context...并且,使用 useReducer 还能给那些触发深更新组件做性能优化,因为你可以向子组件传递 dispatch 而不是回调函数 。

    15200

    React Hook | 必 学 9 个 钩子

    ] = useState(initialState) setState 为更新 satate 方法 useState(initialState) initialState 为初始值 ❞ 完整栗子 import...❝useRef 返回是一个可变ref对象,它属性current被初始化为传入参数(initialValue),「返回ref对象在组件整个生命周期内保持不变」。...网上对 useMemo useCallback 看法 ?...因为你想啊,即使不用 useCallback,假设这个回调函数也没有任何依赖状态,我直接把这个函数声明在组件外部不也可以?我直接使用 ref 不是更自由?...useMemo 本身名字就是和缓存有关联,本质上就为了解决一个事情,在 render 里面不要直接创建对象或者方法什么,因为组件每渲染一次,就会创建一次(比如 style 或者一些常量状态),造成不必要资源浪费

    1.1K20

    医疗数字阅片-医学影像-REACT-Hook API索引

    在初始渲染期间,返回状态 (state) 与传入第一个参数 (initialState) 值相同。 setState 函数用于更新 state。...如果你更新函数返回值与当前 state 完全相同,则随后重渲染会被完全跳过。 注意 与 class 组件中 setState 方法不同,useState 不会自动合并更新对象。...React 为此提供了一个额外 useLayoutEffect Hook 来处理这类 effect。它 useEffect 结构相同,区别只是调用时机不同。...useContext const value = useContext(MyContext); 接收一个 context 对象(React.createContext 返回值)并返回该 context...并且,使用 useReducer 还能给那些触发深更新组件做性能优化,因为你可以向子组件传递 dispatch 而不是回调函数 。

    2K30

    使用 React Hooks + Context 打造一个类vuex语法简单数据管理。

    ,利用useReducer去做一个简单store来统一操作模块数据。...基础用法 Context配合useReducer 先贴一个利用Context配合useReducer简单示例 定义Store const CountContext = React.createContext...更适用于小型模块,我们肯定不会每个模块每次使用store都去写这么一段重复Provider定义代码,所以我们要找出这个模式痛点,然后进行一些封装~ 基础用法不足 每次引入都要走 createContext...监听异步action起始结束 // 便于页面显示loading状态 // 需要传入对应actionkey值 // 数组内可以写多项同时监听多个action // 灵感来源于dva...(Count) 复制代码 适用场景 比较适用于单个比较复杂小模块,个人认为这也是 react 官方推荐 useReducer context 配合使用场景。

    96310

    React Hook丨用好这9个钩子,所向披靡

    useState 定义 / 使用 const [state, setState] = useState(initialState) setState 为更新 satate 方法 useState(initialState...useRef 返回是一个可变ref对象,它属性current被初始化为传入参数(initialValue),返回ref对象在组件整个生命周期内保持不变。...网上对 useMemo useCallback 看法 ?...因为你想啊,即使不用 useCallback,假设这个回调函数也没有任何依赖状态,我直接把这个函数声明在组件外部不也可以?我直接使用 ref 不是更自由?...useMemo 本身名字就是和缓存有关联,本质上就为了解决一个事情,在 render 里面不要直接创建对象或者方法什么,因为组件每渲染一次,就会创建一次(比如 style 或者一些常量状态),造成不必要资源浪费

    2.3K31
    领券