什么是反应中的情况



我正在学习反应,并遇到了这个" usestate"。

使用它代替状态的班级有什么利弊?

它可以替换其他生命周期钩吗?像componentDidMountcomponentDidUpdate等?

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

要替换诸如componentDidMountcomponentDidUpdate之类的生命周期钩子,您需要将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调用。

这可能有点混乱,但这就是练习的全部。

相关内容

  • 没有找到相关文章

最新更新