TypeError：[带有createContext的setState]不是函数- React - 腾讯云开发者社区

文章/答案/技术大牛

发布

React-setState函数必须掌握的pendingState状态

记录问题异步更新原则当然我们都清楚setState函数是react将对组件的state更改排入队列进行批量更新。...如果是传参只能使用箭头函数的方式了 private onBtnClick = () => { this.setState({ name: this.state.name + 2,...此时页面上展示this.state.name内容为2,并不是所期待的4。这很好理解，批量更新原则嘛，(react内部会对state的值进行缓存最终合并一次性更新)乍一看和Vue大同小异。...如果是传参只能使用箭头函数的方式了 private onBtnClick = () => { setTimeout(() => { this.setState({...怎么会这样，按照我的理解，不是说好了批量更新策略，即使在setTimeout之后，下一个队列中应该也是批量呀。这是什么操作，为什么会这样。不行我要翻出来看看！

1.4K1 0

React篇(026)-回调函数作为 `setState()` 参数的目的是什么?

当 setState 完成和组件渲染后，回调函数将会被调用。由于 `setState()` 是异步的，回调函数用于任何后续的操作。...**注意：** 建议使用生命周期方法而不是此回调函数。...setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered')) 阅读资源...[掘金 - 揭密React setState](https://juejin.im/post/5b87d14e6fb9a01a18268caf) 2. [setState 如何知道该做什么?]...(https://overreacted.io/zh-hans/how-does-setstate-know-what-to-do/)

1.4K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

React Hooks 深入系列 —— 设计模式

一: 多个组件间逻辑复用: 在 Class 中使用 React 不能将带有 state 的逻辑给单独抽离成 function, 其只能通过嵌套组件的方式来解决多个组件间逻辑复用的问题, 基于嵌套组件的思想存在...与 TypeScript 一起使用时, 需要对 defaultValue 做额外声明处理; 此外 React Team 表示 Class 在机器编译优化方面也不是很理想。...与 Hooks 之间 setState 是异步还是同步的表现进行对比, 可以先对以下 4 种情形 render 输出的个数进行观察分析: 是否能使用 React Hooks 替代 Redux 在 React...16.8 版本之后, 针对不是特别复杂的业务场景, 可以使用 React 提供的 useContext、useReducer 实现自定义简化版的 redux, 可见 todoList 中的运用。...核心代码如下: import React, { createContext, useContext, useReducer } from "react" // 创建 StoreContext const

2.1K2 0

react面试题

父组件可以向子组件传递props，props中带有初始化子组件的数据，还有回调函数子组件的state发生变化时，在子组件的事件处理函数中，手动触发父函数传递进来的回调函数，同时时将子组件的数据传递回去...在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。...在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。扩展1: setState的第一个参数除了对象,还能传什么？...$nextTick(),该函数会在setState函数调用完成并且组件重渲染后被调用扩展3: setState的时候如果两次state值没有发生变化,一定不会造成调用render吗?...在新版本的react中, 使用React.createContext进行创建context对象.其会返回Provider(提供数据的父组件)以及Consumer(消费数据的子组件)两个对象进行使用,react-redux

8052 0

React: JSX 、虚拟 DOM、组件配置（props、state、PropTypes、createContext、props.children）

多个上下文 9. state 在setState中使用函数，而不是对象 10. 无状态组件 11....上下文从 React 16.3.0 开始，可以指定通过组件树向下传递的变量，无需手动将变量从父组件传递到子组件 React.createContext 只接受一个参数，上下文提供的默认值相当于全局公开...中使用函数，而不是对象为什么？...下面是一个点击减少的按钮使用对象的方式赋值给 state，如果用户点击过快，计算机非常慢，而 setState 是异步的，如果碰到更高优先级的响应过载，这个减少按钮的点击响应还在队列中等待，那么用户可能点了...无状态组件 React 中只需要 render() 方法的组件无状态组件，它不是一个类，我们不会引用 this 这种函数式组件，性能更好 const Header = function(props

2.1K1 0

手写ReactHook核心原理，再也不怕面试官问我ReactHook原理

是不是so easy！！！ React.memo介绍看下面的代码！你发现什么问题？...当然，由于React.memo并不是react-hook的内容，所以这里并不会取讨论它是怎么实现的。...基本的使用方法： const MyContext = React.createContext() 如果要使用创建的上下文，需要通过 Context.Provider 最外层包装组件，并且需要显示的通过...'; let AppContext = React.createContext() function Counter() { let { state, setState } = useContext...，会发现，这个机制有点类似vue 中提供的provide和inject 原理原理非常简单，由于createContext，Provider 不是ReactHook的内容，所以这里值需要实现useContext

4.6K3 0

React+TypeScript使用规范

url} ); }; Good 直接使用createContext和useContext import React, { createContext } from "react...url} ); }; 封装createCtx函数要类型不要默认值 // create-ctx.ts import React, { createContext, useContext...boolean 值的函数，但 parameterName 必须是当前函数的参数名 // Button props type ButtonProps = React.ButtonHTMLAttributes...的类型会通过类型推断得到') }} /> ); 事件函数： Bad：没有声明e的类型，handleChange没有使用useCallback包裹 import React from 'react..., { useCallback } from 'react' const App = () => { // 根据 = 号右边的函数类型推断出handleChange的类型 const handleChange

5K2 0

130. 精读《unstated 与 unstated-next 源码》

但其实 React 提供的 createContext 与 useContext 已经能解决这个问题，只是使用起来稍显麻烦，而 unstated 系列就是为了解决这个问题。...相比直接抛出用法，笔者还原一下作者的思考过程：利用原生 createContext 实现数据流需要两个 UI 组件，且实现方式冗长： const Amount = React.createContext...很多时候，人们排斥一个新技术，并不是因为新技术不好，而是这可能让自己多年精通的老手艺带来的 “竞争优势” 完全消失。...API，按照 React 的 setState 结构实现了一遍。...onUpdate 生命周期由 Subscribe 函数提供，最终调用的是 this.setState，这个在 Subscribe 部分再说明。

1.1K1 0

快速上手三大基础 React Hooks

我们所指的三个基础 Hooks 是： useState 在函数式组件内维护 state useEffect 函数式组件内有副作用的调用与 componentDidMount、componentDidUpdate...处继承还需要初始化一个 state 初始化改变 state 的方法最后还要使用 render 函数返回 JSX ✅使用 useState： 1// 1 2import React, { useState...然后创建获取数据的 getData 方法创建事件处理函数 handleClick 使用 useEffect 处理副作用：改变页面的 title 如果使用传统的类组件的写法： 1import React...创建上下文不使用 useState：不使用 state hooks 的代码如下： 1import React, { createContext } from 'react' 2 3// 1....React, { createContext, useState } from 'react' 2 3// 1.

1.6K4 0

React修仙笔记，筑基初期之更新数据

在之前的一篇文章中我们有了解到react函数组件和class组件，以及react数据流，状态提升，以及react设计哲学，在我们了解了这些基本的知识后，我们需要了解react内部更深的一些知识在开始本文之前...1]跨组件通信正文开始... react是如何更新数据的我们在react中更新数据都是调用setState这个方法去更新的，这个更新也是批量异步更新的，在setState更新数据，主要发生了什么,我们看一个简单的栗子...{count: 1, price: 0, type: 0} 在这之前不是说setState是一个异步的操作吗？...'); }; 我们看到源码setState方法是挂载在Component的prototype上的，所以我们用this就能访问该组件上的setState,而Component就是一个构造函数 function...总结当我们更新state主要是依赖setState这个方法，这个方法修改值是异步调用的我们要知道setState的第一个参数可以是对象也可以是函数，当是函数时必须返回一个对象才行，第二个回调参数可以立即获取到修改后的

5852 0

React 新特性讲解及实例(一)

创建 Contect 方式如下： const MyContext = React.createContext(defaultValue?)...; 来个实例： import React, {createContext, Component} from 'react'; const BatteryContext = createContext(...挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。...如果你想订阅多个，就只能用较复杂的写法了。 lazy 和 Supense 的使用 React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。...它与 React.PureComponent 非常相似，但它适用于函数组件，但不适用于 class 组件。我们 Foo 组件并没有相关的状态，所以可以用函数组件来表示。

8793 0

使用 react Context API 的正确姿势

，里头定义一系列需要跨层级使用的 state 和 function 1import React, { createContext } from 'react' 2 3// 1....bind 因此需要写在上面；如果不喜欢这样的顺序则可以书写普通函数放在下面但记得 bind 13 handleToggle = () => { 14 this.setState({...会覆盖接下来创建 Provider 这里头维护真正的 state，并通过 render 函数里面的 Context.Provider 组件的 value 属性提供这些方法然后创建 Consumer...如果需要调用方法，则可调用 props 传递的函数 1import React from 'react'; 2import { ToggleProvider, ToggleConsumer } from...React, { createContext } from "react"; 2 3const { Provider, Consumer } = createContext("color"); /

1.8K2 0

为什么 React16 对开发人员来说是一种福音

Portal 的一个典型用例是这样的：当父组件带有 overflow:hidden 或 z-index 样式时，你希望子组件在视觉上能够“突破”它的容器。...null 避免重新渲染有时候我们需要通过函数来判断组件状态更新是否触发重新渲染，在 React 16 中，我们可以通过调用 setState 时传入 null 来避免组件重新渲染，这也就意味着，我们可以在...React.createContext const { Provider, Consumer } = React.createContext(defaultValue) 创建{Provider,Consumer...需要一个函数作为子组件。这个函数接收当前上下文值，并返回一个 React 节点。传给函数的 value 参数将等于树中最近的 Provider 的 value。...如果没有匹配的 Provider，则 value 参数将等于传给 createContext() 的 defaultValue。

1.6K3 0

精读《zustand 源码》

zustand 是一个非常时髦的状态管理库，也是 2021 年 Star 增长最快的 React 状态管理库。它的理念非常函数式，API 设计的很优雅，值得学习。...创建 store 通过 create 函数创建 store，回调可拿到 get set 就类似 Redux 的 getState 与 setState，可以获取 store 瞬时值与修改 store。...精读其实大部分使用特性都在利用 React 语法，所以可以说 50% 的特性属于 React 通用特性，只是写在了 zustand 文档里，看上去像是 zustand 的特性，所以这个库真的挺会借力的...对应代码就不贴了，很显然，subscribe 时注册的监听函数会作为 listener 添加到 listeners 队列中，当发生 setState 时便会被调用。...create 函数的实现上面我们说清楚了如何创建 store 实例，但这个实例是底层 API，使用文档介绍的 create 函数在 react.ts 文件定义，并调用了 createStore 创建框架无关数据流

1.5K3 0

深入浅出 React Hooks

React Hooks 提供了一种简洁的、函数式（FP）的程序风格，通过纯函数组件和可控的数据流来实现状态到 UI 的交互（MVVM）。...（通常是组件函数）和依赖状态列表，当依赖的状态发生改变时，才会触发计算函数的执行。...使用 createContext 创建上下文 const UserContext = new createContext(); // 2\....HOC 高阶组件源于函数式编程，由于 React 中的组件也可以视为函数（类），因此天生就可以通过 HOC 的方式来实现代码复用。...：函数式的 React 组件中、自定义的 Hook 函数里； Hook 必须写在函数的最外层，每一次 useState 都会改变其下标 (cursor)，React 根据其顺序来更新状态；尽管每一次渲染都会执行

2.6K4 0

React生命周期简单分析

onAgeChange函数, 但是在父元素中这里我们setState的修改后的age和修改之前prevState中age状态值是一样的,age都是18, 所以App的shouldComponentUpdate...React 16.3带来了正式版的context API 2.使用context import React, { createContext } from 'react'; const ctx = createContext...Provider 和 Consumer 必须来自同一次 React.createContext 调用。...也就是说 NameContext.Provider 和 AgeContext.Consumer 是无法搭配使用的。 4.2. React.createContext 方法接收一个默认值作为参数。...小结从整体的角度再来看一下 React 这次生命周期函数调整前后的异同, 以上的这些生命周期函数的改动, 一直要到 React 17.0 中才会实装, 这给广大的 React 开发者们预留了充足的时间去适应这次改动

1.4K1 0

10分钟教你手写8个常用的自定义hooks

我们在使用hooks和函数组件编写我们的组件时，第一个要考虑的就是渲染性能，我们知道如果在不做任何处理时，我们在函数组件中使用setState都会导致组件内部重新渲染，一个比较典型的场景： ?..., { useReducer, useContext, createContext } from 'react' import { init, reducer } from '....实现自定义的useState，支持类似class组件setState方法熟悉react的朋友都知道，我们使用class组件更新状态时，setState会支持两个参数，一个是更新后的state或者回调式更新的...state，另一个参数是更新后的回调函数，如下面的用法： this.setState({num: 1}, () => { console.log('updated') }) 但是hooks函数的...，当执行setXstate时，会传入和setState一模一样的参数，并且将回调赋值给useRef的current属性，这样在更新完成时，我们手动调用current即可实现更新后的回调这一功能，是不是很巧妙呢

4.5K2 1

React Hook实践指南

这里要注意的是state和setState这两个变量的命名不是固定的，应该根据你业务的实际情况选择不同的名字，可以是text和setText，也可以是width和setWidth这类的命名。...函数的一个重要区别是this.setState函数是将当前设置的state浅归并（shallowly merge）到旧state的操作。...为了解决上述问题，React允许我们使用useCallback来记住（memoize）当前定义的函数，并在下次组件渲染的时候返回之前定义的函数而不是使用新定义的函数。...（items），所以每次重渲染都是十分消耗性能的，因此我使用了React.memo函数来让该组件只有在onClick函数和items数组发生变化的时候才被渲染，如果大家对React.memo不是很熟悉的话...用法 const value = useContext(MyContext) useContext接收一个context对象为参数，该context对象是由React.createContext函数生成的

2.8K1 0

【译】ReactJS的五个必备技能点

来自 React 文档：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件反过头来看看 React 的 connect 方法，我们可以看到下列代码片段： const hoc...上面关于 setState 的代码也可以通过 CodePen进行访问。传递一个函数而不是一个对象有什么意义呢？因为 setState 是异步的，依赖它来创建一个新的值将有一些陷阱的里面。...的值是1而不是2。...在第二次尝试中，我们传递给 setState 一个方法，这将保证两个 setState 方法将按顺序执行。在这个基础上，它使用的是 state 的副本而不是当前的值（即未更新的状态）。...首先我们获取初始化的上下文状态，其实就是我们传递给 React.createContext() 的对象，然后将其设为我们包装组件的状态。接着我们定义了一些用于更新状态的方法。

1.3K1 0

React的组件通信方式

react因为组件化，使得组件间通信十分的重要。本文就来简单介绍一些常见的react组件间传递的内容。...使用方法React.createContext()方法我们可以使用createContext来创建一个context,它可以接收一个变量或者对象做为参数（当对象为参数的时候，react使用object.is...这个传入的值做为context的默认值 const PriceContext = React.createContext('price')这样就创建了一个ContextProvider组件Provider...这个函数会接收context传递的值，返回一个react的组件。Consumer组件必须包含在Provider里面。...图片参考 React面试题详细解答// 创建Contextconst PriceContext = React.createContext('price')// A组件中class ClassA extends

1.6K2 0

点击加载更多

React-setState函数必须掌握的pendingState状态

React篇(026)-回调函数作为 `setState()` 参数的目的是什么?

React Hooks 深入系列 —— 设计模式

react面试题

React: JSX 、虚拟 DOM、组件配置（props、state、PropTypes、createContext、props.children）

手写ReactHook核心原理，再也不怕面试官问我ReactHook原理

React+TypeScript使用规范

130. 精读《unstated 与 unstated-next 源码》

快速上手三大基础 React Hooks

React修仙笔记，筑基初期之更新数据

React 新特性讲解及实例(一)

使用 react Context API 的正确姿势

为什么 React16 对开发人员来说是一种福音

精读《zustand 源码》

深入浅出 React Hooks

React生命周期简单分析

10分钟教你手写8个常用的自定义hooks

React Hook实践指南

【译】ReactJS的五个必备技能点

React的组件通信方式

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐