用React.js设置useContext和useState的正确方法？

基础概念

useContext 和 useState 是 React.js 中的两个重要的 Hooks API。

useContext: 用于访问 React 的上下文（Context）API，允许组件订阅全局状态的变化。
useState: 用于在函数组件中添加状态管理。

正确设置方法

1. 创建 Context

首先，你需要创建一个 Context 对象。

import React from 'react';

const MyContext = React.createContext();

2. 提供 Context

然后，在组件树的顶层提供这个 Context。

import React, { useState } from 'react';
import MyContext from './MyContext';
import MyComponent from './MyComponent';

function App() {
  const [value, setValue] = useState('Hello World');

  return (
    <MyContext.Provider value={value}>
      <MyComponent />
    </MyContext.Provider>
  );
}

export default App;

3. 使用 useContext 和 useState

在子组件中使用 useContext 来访问全局状态，并使用 useState 来管理本地状态。

import React, { useContext, useState } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const globalValue = useContext(MyContext);
  const [localValue, setLocalValue] = useState('Initial Local Value');

  return (
    <div>
      <p>Global Value: {globalValue}</p>
      <p>Local Value: {localValue}</p>
      <button onClick={() => setLocalValue('Updated Local Value')}>
        Update Local Value
      </button>
    </div>
  );
}

export default MyComponent;

应用场景

useContext: 适用于需要在多个组件之间共享状态的场景，例如主题切换、用户认证状态等。
useState: 适用于需要在单个组件内部管理状态的场景，例如表单输入、开关状态等。

常见问题及解决方法

1. `useContext` 未找到 Context

问题: 使用 useContext 时，可能会遇到 useContext 未找到对应的 Context。

原因: 可能是因为 Context 没有正确提供或者导入。

解决方法: 确保在组件树的顶层正确提供了 Context，并且在需要使用 Context 的组件中正确导入了 Context。

// 确保在 App.js 中正确提供了 Context
<MyContext.Provider value={value}>
  <MyComponent />
</MyContext.Provider>

// 确保在 MyComponent.js 中正确导入了 Context
import MyContext from './MyContext';

2. `useState` 初始值问题

问题: 使用 useState 时，可能会遇到初始值不生效的问题。

原因: 可能是因为初始值是一个函数，而这个函数没有被正确调用。

解决方法: 确保初始值是一个有效的值，或者是一个返回有效值的函数。

// 正确的初始值
const [value, setValue] = useState('Hello World');

// 如果初始值是一个函数，确保它被正确调用
const [value, setValue] = useState(() => 'Hello World');

参考链接

希望这些信息对你有所帮助！如果有更多问题，欢迎继续提问。

相关·内容

基于 LeanCloud 的无后端评论库 Nexment，于任何 Web 应用或前端项目使用

本站建立时便未使用 WordPress 自带评论系统，原因主要是在有比较多的功能需求需要适配和实现的情况下，二次开发比较耗时费劲。所以一直采用的是 Artalk (https://github.com/qwqcode/Artalk)，功能非常完善；支持 Markdown、评论折叠、管理员等贴心功能。但是美中不足的其一是有后端部署的要求；其二是与博客的引用出于某些不清楚还没深究的原因效果不佳。最后的妥协是通过 iFrame 引用然后通过强制同源在父页面获取子页面窗口高度来实现评论区高度匹配。同时，这样的部署有几个影响用户体验的问题：

对于React Hook的思考探索

React Hook

6个React Hook最佳实践技巧

在过去，像状态和生命周期函数这样的 React 特性只适用于基于类的组件。基于函数的组件被称为哑（dumb）、瘦（skinny）或表示（presentational）组件，因为它们无法访问状态和生命周期函数。

【React Conf 2018 回顾】React 的今天和明天 II —— React Hooks 提案

【2.5 万字长文预警】，如果没耐心看 Demo 代码，请一定要看最后一段 Dan 关于 React Hooks 的哲学思考。Dan 最后从 React 的 Logo 说起，将 React Hooks 的出现与电子的发现做了类比，升华到了一定高度：“我感觉 Hook 一直在我们的视线里面隐藏了四年。事实上，如果看看 React 的 Logo，可以看到电子的轨道，而 Hook 好像一直就在那里”。

Note·React Hook

React Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

react hooks api

hooks API是 React 16.8的"新增"功能（16.8更新于2年前）。官网是这么说的：

【愚公系列】2023年03月其他-Web前端基础面试题（react专项_35道）

组件之间复用状态逻辑很难，在hooks之前，实现组件复用，一般采用高阶组件和 Render Props，它们本质是将复用逻辑提升到父组件中，很容易产生很多包装组件，带来嵌套地域。

与 useState 无关的 React.js 服务

useState 是 React.js 中的一个关键函数，React.js 是一个用于构建交互式用户界面的 JavaScript 库。它在函数式组件中扮演着重要的角色，允许它们响应变化并动态更新界面。

为什么 React.js 中函数比类更好

在不断发展的web开发世界中，React.js 已成为构建用户界面的强大而流行的库。虽然 React 允许开发人员使用函数和类来创建组件，但近年来函数的使用越来越突出。在本文中，我们将探讨为什么在 React.js 开发中函数被认为优于类。我们将提供示例和见解来说明这种偏好发生转变的原因。

浅谈 Hooks

如果你很熟悉 vue 与 react ，兴许你也觉得 vue3.0 抄袭了react，这项react 在不久前发布的新技术，在 vue3.0 中被重新搬上了舞台。也使它重新活跃在了人们的视野中，我技术不深，与大家分享我的见解和猜测。

快速上手三大基础 React Hooks

20190313162354.png ? 快速上手三大基础 React Hooks Hooks 出了有段时间了，不知盆友们有在项目中开始使用了吗❓如果还没了解的童鞋，可以瞧瞧这篇文章，对比看下三大基础

react 基础操作-语法、特性、路由配置

在 React 函数组件中，组件的渲染是由状态（state）和属性（props）的变化触发的，而直接在函数组件中定义的变量并不会引起组件的重新渲染。

React 设计模式 0x3：Ract Hooks

React Hooks 是在函数式组件中使用的生命周期方法，React Hooks 在 React 16.8 中被引入。在类组件中的生命周期方法已被合并成 React Hooks，React Hooks 无法在类组件中使用。

谈谈 React 5种最流行的状态管理库

原文:sourl.cn/F95CrZ,代码仓库地址: https://github.com/dabit3/react-state-5-ways

React常见面试题

动态加载（异步组件）加载时会有延迟，在延迟期间可以将一些内容展示给用户，比如：loading

只需6步，就能让你的 React +Tailwind.css站点实现暗黑功能

本教程非常适合那些想要扩展技能并为他们的网站添加一项备受追捧的新功能的人。准备好尝试暗黑模式了吗？让我们开始吧！

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

[raect] React Hook 指南什么是 Hook ？ Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质上就是一个函数，它简洁了组件，有自己的状态管理，生命周期管理，状态共享。 useState useEffect useContext useReducer Hook 出现解决了什么？组件之间状态复用，例如：使用useContext 可以很好的解决状态复用问题，或者自定义Hook 来定制

React Hook | 必学的 9 个钩子

React Hook 指南什么是 Hook ？ ❝Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质上就是一个函数，它简洁了组件，有自己的状态管理，生命周期管理，状态共享。 useState useEffect useContext useReducer ❞ Hook 出现解决了什么？ ❝ [ ] 组件之间状态复用，例如：使用useContext 可以很好的解决状态复用问题，或者自定义Hook

React Hooks 中的属性详解

React Hooks 是 React 16.8 版本中新增的特性，允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks，并附有详细的用法和代码示例。

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

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文是一篇以实战为主的文章，主要讲解实际项目中如何使用hooks以及一些最佳实践，不会一步步再介绍一遍react hooks的由来和基本使用，因为写hooks的文章很多，而且官网对于react hooks的介绍也很详细，所以大家不熟悉的可以看一遍官网。

React Hooks 万字总结

每个 hook 都会有一个 next 指针，hook 对象之间以单向链表的形式相互串联，同时也能发现 useState 底层依然是 useReducer 再看看更新阶段发生了什么

useTypescript-React Hooks和TypeScript完全指南

React v16.8 引入了 Hooks，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用，从而易于共享逻辑。Hook 令人兴奋并迅速被采用，React 团队甚至想象它们最终将替换类组件。

快速上手 React Hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本篇文章将介绍React Hook相关知识。

React Hooks实战：从useState到useContext深度解析

React Hooks 彻底改变了React组件的状态管理和功能复用方式，使得函数组件也能拥有类组件的功能。

React框架 Hook API

如果你刚开始接触 Hook，那么可能需要先查阅 Hook 概览。你也可以在 Hooks FAQ 章节中获取有用的信息。

超性感的React Hooks（八）useContext

在context这个高级API出来之前，数据流向只能自上而下，从父组件一层一层的往下传递。如上图左。

前端一面react面试题（持续更新中）_2023-02-27

可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？

「React 进阶」 React 全部 Hooks 使用大全（包含 React v18 版本）

React hooks是react16.8 以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。本章节笔者将介绍目前 React 提供的所有 hooks ，介绍其功能类型和基本使用方法。

从react源码看hooks的原理_2023-03-01

其实hooks的定义都来自dispatcher，那我们根据Dispatcher依次去看看他们的实际实现。

React?设计模式？

大家好，我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。

React-hooks+TypeScript最佳实战

如果新的 state 需要通过使用先前的 state 计算得出，那么可以将回调函数当做参数传递给 setState。该回调函数将接收先前的 state，并返回一个更新后的值。

[OHIF-Viewers]医疗数字阅片-医学影像-REACT-Hook API索引

如果你刚开始接触 Hook，那么可能需要先查阅 Hook 概览。你也可以在 Hooks FAQ 章节中获取有用的信息。

在React项目中全量使用 Hooks

此方法会返回两个值：当期状态和更新状态的函数。效果同 this.state 与this.setState，区别是 useState 传入的值并不一定要对象，并且在更新的时候不会把当前的 state 与旧的 state 合并。

React Hooks 源码解析（3）：useState

React 源码版本: v16.11.0 源码注释笔记：airingursb/react 在写本文之前，事先阅读了网上了一些文章，关于 Hooks 的源码解析要么过于浅显、要么就不细致，所以本文着重讲解源码，由浅入深，争取一行代码也不放过。那本系列讲解第一个 Hooks 便是 useState，我们将从 useState 的用法开始，再阐述规则、讲解原理，再简单实现，最后源码解析。另外，在本篇开头，再补充一个 Hooks 的概述，前两篇限于篇幅问题一直没有写一块。注：距离上篇文章已经过去了两个月，这两

我在大厂写React学到了什么？性能优化篇

我工作中的技术栈主要是 React + TypeScript，这篇文章我想总结一下如何在项目中运用 React 的一些技巧去进行性能优化，或者更好的代码组织。

我在大厂写React学到了什么？性能优化篇

我工作中的技术栈主要是 React + TypeScript，这篇文章我想总结一下如何在项目中运用 React 的一些技巧去进行性能优化，或者更好的代码组织。

React Hooks

以前，React API 只有一套，现在有两套：类（class）API 和基于函数的钩子（hooks） API。

React的Reducer Hook让state有了状态！

useReducer 是 useState 的升级版本，对 setState 这个操作进行了拆分，可以根据不同类型，进行不同的逻辑计算，最后去改变 state 对象。

React Context中的性能优化

他将所有全局状态合并到一个大的对象中，得到一个'单一数据源'，并把它塞进provider。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

用React.js设置useContext和useState的正确方法？

基础概念

正确设置方法

1. 创建 Context

2. 提供 Context

3. 使用 useContext 和 useState

应用场景

常见问题及解决方法

1. useContext 未找到 Context

2. useState 初始值问题

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1. `useContext` 未找到 Context

2. `useState` 初始值问题