跟我一起学习 ReactJS | useState 钩子

Photo by 费伦茨·阿尔马西 on 不飞溅

大家好，今天我要写的是 React 中的 useState hook。

在 React 中，不允许改变 React props（这将在另一篇文章中讨论），因为它们只是将信息从父组件传递到子组件。

React state 有一个可变的数据结构，也称为 ** 有状态的值。**

这些已知的有状态值将在 React 组件中实例化为所谓的 ** 状态，** 也可以通过 props 传递给子组件。它也可以通过使用函数来修改状态来改变。

当状态发生突变时，具有状态的组件和所有子组件都将重新渲染。

props 和 state 是不同的概念 props 用于将信息从父级传递到组件层次结构，而 state 用于随时间更改信息。

例如：

假设我们有一个带有输入字段的 Search 组件，我们想在页面上显示输入：

常量搜索 = () => {

// searchTerm = 当前状态和 setSearchTerm = 更新这个状态的函数（状态更新函数）

1.) const [searchTerm, setSearchTerm] = 反应 .useState(' ');

常量句柄变化 = ( 事件 ) => {

2.) 设置搜索词（ 事件 。目标价值）

};

返回 （

搜索：

3.) <input ID =“搜索” 类型 =“文本” 改变 ={handleChange} />

4.)

{搜索词}

);

};

首先，我们导入 useState 钩子。

1. useState 方法将返回一个数组，其中包含两个条目（当前）状态（searchTerm）和一个更新状态的函数 （状态更新功能） (setSeachTerm)，我们还定义了一个初始值，在这种情况下是一个空字符串。

2. 定义更新状态的函数。

3.我们传递事件处理程序的输入字段

4. 这里我们调用searchTerm，在这种情况下用户输入将显示页面上的当前状态。

感谢您阅读我的文章。如果您有任何反馈，请告诉我。

~阿里夫

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/23064/24020913

标签：状态,钩子,ReactJS,React,searchTerm,useState,props,组件
来源： https://www.cnblogs.com/amboke/p/16672526.html