我正在学习反应,并遇到了这个" usestate"。
使用它代替状态的班级有什么利弊?
它可以替换其他生命周期钩吗?像componentDidMount
,componentDidUpdate
等?
usestate作为反应钩的一部分释放。基本上,随着钩子的引入,您不再被迫使用类,只是为了能够使用诸如状态的React Core功能。现在,您可以使用基于功能的组件来操纵状态。
单击状态将被修改为吉米。
是的,您也可以访问Prevstate并进行API调用。
const User = () => {
const [userInfo, setUserInfo] = React.useState({
firstName: 'John', lastName: 'Doe',
});
return (
<div>
<p>userInfo: {JSON.stringify(userInfo)}</p>
<button onClick={() => setUserInfo({ firstName: 'Jimmy' })}>Update name to Jimmy</button>
</div>
);
}
import React, {useState} from "react";
const [count,setCount]=useState(0)
这是一个破坏性的阵列。Usestate(0)返回一个带有两个元素的数组。第一个元素称为当前值。该数组的第二个元素是设置器函数。这是一个允许我们更新此状态的价值的函数。它等效于在基于类的组件中调用SetState()。在右侧,我们具有USESTATE功能,然后在其中为此状态提供了一个初始值。我们的基于同类的组件的内部状态是一个对象,其中有很多不同的值。当我们使用usestate()挂钩时,我们通常只是存储我们关心的单个值。我们有点从包含我们所有状态的对象转移到个人价值观本身。这样做的原因是我们可以将USESTATE()称为我们想要的多数。
一般而言,React希望您多次致电州以跟踪的多件事。但是您的状态也可以是对象。
const [state, setState] = useState({
count: props.count,
text: "" });
您必须在这里小心。因为,每当我们尝试通过调用setState函数来更改状态时,它就不会合并这些对象。取而代之的是,它完全用新状态代替了旧状态。
imagine you have a button with this onClick method
const decrement = () => {
setState({ count: state.count - 1 }); };
单击按钮时,"计数"属性将会更改,但"文本"属性将消失。我们与传播操作员一起工作。
const decrement = () => {
setState({...state, count: state.count - 1 })
};
We spread state object first. since "count" property is already a part of the state object, setstate() will just change the "count" property inside the state object.
这是一个react钩子的概念。在useState
的帮助下,我们也可以在功能组件中定义和更新状态。它被认为是React钩子的主要优势。
这是一个示例:
//using class component
import React from 'react'
//using Class component
export default class App extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
this.increment = this.increment.bind(this);
}
increment = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<div>
<button onClick={this.increment}>click</button>
<h1>count:{this.state.count}</h1>
<Counter />
</div>
)
}
}
//using reacthook
export default function Counter() {
const [count, setState] = useState(0);
return (
<div>
<button onClick={() => setState(count + 1)}>Click</button>
<h1>count:{count}</h1>
</div>
);
}
从示例中,我们可以通过使用功能组件中的状态和设置状态来找到React Hooks简化了代码,并克服了使用此关键字复杂性的问题。
React Usestate是React Hook,它允许您在功能组件中管理状态。
例如:
import React, { useState } from 'react'
const Example = () => {
// create the "counter" state
const [count, setCount] = useState(0)
return (
<div>
<p>Button clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Count + 1
</button>
</div>
)
}
export default Example
使用Usestate,您可以轻松地创建状态功能组件。使用Component
类和setState
的类组件是:
import React, { Component } from 'react'
class Example extends Component {
constructor(props) {
super(props)
this.state = { count: 0 }
}
render() {
const { count } = this.state
return (
<div>
<p>Button clicked {count} times</p>
<button onClick={() => this.setState({ count: count + 1 })}>
Count + 1
</button>
</div>
)
}
}
export default Example
要替换诸如componentDidMount
或componentDidUpdate
之类的生命周期钩子,您需要将useEffect
钩用于功能组件。
来源:
- 反应usestate钩子:什么是新事物并使用它
链接:
- React Hooks文档
- 使用效果文档
'usestate;React中的功能与其状态系统有关。状态系统有点像反应世界中的变量。我们利用状态来存储随着用户与数据交互,单击事物,在事物上输入等方面进行更改的数据。
。每当我们更新状态时,React都会更新屏幕上的内容。如果您查看下面的示例:
export default function App() {
const [language, setLanguage] = useState("es");
const [text, setText] = useState("");
return (
<div>
<Field onChange={setText} />
<Languages language={language} onLanguageChange={setLanguage} />
<hr />
<Translate text={text} language={language} />
</div>
);
}
上面的数据有三个变化:1。用户输入文本输入的文本。2.用户想将文本翻译成和3.的语言。
的结果。因此,我们可以找到对useState()
函数的单个调用以设置每个数据。
所以这个:
const [language, setLanguage] = useState("es");
说我们将拥有某种选择的语言,这些语言会随着时间而改变。
这个:
const [text, setText] = useState("");
与用户在输入中添加的文本相关,然后第三个调用在翻译文件中的另一个组件内,该文件将具有自己的useState
调用。
这可能有点混乱,但这就是练习的全部。