何时使用原生 React.useReducer Hook 以及它与 Redux 的区别
因此，从 React 16.8 开始可以使用 Hook.从他们的文档中可以看出，Hooks 是功能组件中状态的替代者.基本的钩子有:useState、useEffect、useContext，但也有一些额外的钩子，其中之一是useReducercode>，看起来它使用与 Redux 相同的 action-dispatch 架构. 问题是它是否会因为相似而取代 Redux? 它是否更适合
..
react-hooks相关内容
react-hooks:跳过 useEffect 中的第一次运行
如何在 useEffect 钩子中跳过第一次运行. useEffect(() => {常量第一 =//???如果(第一){//跳过} 别的 {//运行主代码}}， [ID]); 解决方案 useRef 钩子可用于存储任何可变值，因此您可以存储一个布尔值，指示是否是第一次运行效果. 示例 const { useState, useRef, useEffect } = React;函
..
使用 React 钩子处理输入
我发现有几种方法可以使用钩子处理用户的文本输入.用钩子处理输入的更可取或正确的方法是什么?你会用哪个? 1) 处理输入的最简单的钩子，但是你有更多的字段，你必须编写更多重复的代码. const [username, setUsername] = useState('');const [密码，setPassword] = useState(''); 事件: onChange={event
..
useRef、useMemo、useCallback 挂钩的生产用例是什么?
除了在许多 YouTube 教程视频中看到的 计数器 示例之外，useMemo 和 的实际/真实世界 用例是什么>useCallback? 另外，我只看到了 useRef 钩子的输入焦点示例. 请分享您为这些钩子找到的其他用例. 解决方案 useRef: 语法: const refObject = useRef(initialValue); 它只是返回一个普通的 J
..
限制选中的复选框数量并保存值
我正在构建一个送餐应用程序，我想知道如何限制选中的复选框数量.例如，在输入子公司时，它会显示产品列表.如果我选择比萨饼，则有一个附加部分限制您可以选择的附加数量，如果您想选择两个以上并且您的限制为两个，则不应允许您 所有这些都带有反应钩子，我附上了我的组件的一个片段 const ExtrasSelector = ({options = [{}], onPress = () => {}, l
..
FireStore - 使用新数据更新 UI，无需重新加载浏览器
我使用以下组件在 Google Cloud FireStore 集合中添加新数据: import React, { useState } from 'react';从 '../firebase' 导入 { db };const AddCard = ({ totalDoclNumbers }) =>{const [newOriginalText, setNewOriginalText] = use
..
useContext() 返回未定义
我遇到了一个非常令人沮丧的问题，我无法弄清楚发生了什么.我有一个简单的上下文，如下所示: import React, { useState, createContext } from "react";export const AppStateContext = createContext();const AppStateContextProvider = props =>{const [appS
..
反应错误边界不适用于反应
这是我的错误边界文件 - class ErrorHandling 扩展组件 {状态 = { hasError: false }componentDidCatch() {this.setState({ hasError: true })}使成为() {//调试器如果(this.state.hasError){返回
组件中的错误}返回 this.props.children}}
..
React 在 useEffect 中重写 componentWillReceiveProps
所以我正在用钩子重新编写一个组件，我遇到了一个有趣的挑战，我需要用 useEffect 钩子模仿 componentWillReceiveProps 的一些旧行为. 我的旧代码如下: componentWillReceiveProps(nextProps: Props) {const prevLateVal = get(`lateMinutes[${bookingId}].value`,
..
ReactJS:如何只调用一次 useEffect 钩子来获取 API 数据
使用 React，我有以下使用 useEffect() 的功能组件: import React, { useEffect } from 'react';从'react-redux'导入{连接}；const MessagingComponent = React.memo(({ loadMessages, messages, ...props }) => {useEffect(() => {加载消息
..
Hooks:使用useReducer 时组合多个reducer?
我想在作为第一个参数传递给 useReducer 的主减速器中使用嵌套的减速器，而不是嵌套的 switch 语句(你能做到吗?).这是因为我的reducer函数依赖于多个switch(第一个操作，然后是水果类型). 我查过“嵌套化简器"，但这些问题的解决方案似乎都与 redux 和 combineReducers 相关，其中没有与 Hooks 等效的. 演示代码(即使codesandb
..
我们还需要在 React 钩子中使用函数式 setState 方式吗?
const [count, setCount] = useState(0);const handleClick = () =>setCount(prevCount => {返回上一个计数 + 1；}); const [count, setCount] = useState(0);const handleClick = () =>设置计数(计数 + 1)； 来自基于类的组件背景，它成为我们使
..
如何从 useState Hook 访问 setState 中的回调
有没有人设法在 react 16.8 中为 useState 钩子的更新部分创建同步回调?我一直在寻找一个，以便我可以处理与 3rd 方库的同步操作，但我似乎无法满足我的需求. 如果有人提及已成功完成此操作的人员，请在此处添加. 干杯， 解决方案 使用钩子，您不再需要来自 setState 函数的回调.现在，您可以使用 useState 钩子设置状态，并使用 useEffect
..
为什么每次渲染都会调用来自 `useEffect` 的清理函数?
我一直在学习 React，我读到从 useEffect 返回的函数是为了进行清理，而 React 在组件卸载时执行清理. 所以我对它进行了一些试验，但在下面的示例中发现，每次组件重新渲染时都会调用该函数，而不是仅在从 DOM 卸载时调用该函数，即 console.log("unmount"); 每次组件重新渲染时. 这是为什么? function something({ setSho
..
使用 React-Redux Hooks 和 React-Redux Connect() 的主要区别是什么?
我即将开始一个使用 React-Redux 的项目.对于 API 参考，有 Hooks 和 connect().因为，钩子是连接 API 的替代品.使用钩子或连接到我的 React-Redux 项目有什么区别. 解决方案 使用钩子和 connect 到我的 React-Redux 项目有什么区别 有两个主要区别: 范围 connect 可以用于 React 类组件和函数组
..
UI 不会使用 React Hooks 和表单提交重新渲染状态更新
我正在尝试使用 React Hooks 和表单更新 UI.我有一个状态设置来监视表单上的值，当我单击提交时，我想将此值添加到一个数组(保持状态)并将其显示在 UI 上.我的问题是，当我提交值时，虽然它被添加到数组中(并且状态已更新)，但 UI 仅在我更改输入中的值时更新. 我的组件如下: const PushToArrayUpdateState = () =>{const [array,
..
仅当两个依赖项都发生变化时才运行 Effect 钩子
我有一个 React 组件，它使用 useEffect 钩子获取数据，如下所示: const cache = {key: "data-fetched-using-key"}功能配置({键，选项}){const [数据，setData] = useState();useEffect(() => {const fetchedData;//使用键和选项获取数据设置数据(获取数据)；缓存[键] = fe
..
React Hook useEffect 缺少依赖项:'list'
运行以下代码后，出现以下错误: React Hook useEffect 缺少依赖项:'list'.要么包括它要么删除依赖数组 react-hooks/exhaustive-deps 我找不到警告的原因. import React, { useState, useEffect } from 'react';从 'axios' 导入 axios；从'./Form'导入表单；const
..
带有 socket.io 状态的 UseEffect 钩子在套接字处理程序中不持久
我有以下反应组件 function ConferenceRoom() {const [参与者，setParticipants] = useState({})console.log('参与者 -> ', 参与者)useEffect(() => {//消息处理程序socket.on('message', message => {console.log('收到消息:' + message.event)
..
使用 useMemo 而不是 React.memo 语法问题
我需要演示一下如何使用 React Hooks useMemo.我有如下工作代码，可以满足我的要求: const SpeakerCardDetail = React.memo(({ID，... 我发现了一个 link 表明我可以使用更像这样的语法，但我完全搞不清楚. 这是我得到的: const SpeakerDetail = React.useMemo(() => {({ ID， 显
..