Question

我正在学习React，并遇到了这个“ useState”。

用它代替带状态的类有什么利弊？

它可以代替其他生命周期挂钩吗？例如vector，unlist(sapply(vars, function(x) names(x[x == "ano"])))等？

Answer 1

UseState被发布为react-hook的一部分。基本上，随着钩子的引入，您不再被迫仅仅为了能够利用反应核心功能（例如状态）而使用类。现在，您可以使用基于功能的组件来操纵状态。

点击后状态将被修改为吉米。

是的，您也可以访问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>
  );
}

Answer 2

import React, {useState} from "react";

const [count,setCount]=useState(0)

这是一个数组解构。 useState（0）返回一个数组，其中包含两个元素。第一个元素称为当前值。该数组的第二个元素是setter函数。此功能使我们能够更新此状态的值。这等效于在基于类的组件内部调用setState（）。在右侧，我们具有useState函数，然后在其中提供该状态的初始值。在基于类的组件内部，状态是一个对象，内部具有许多不同的值。当我们使用useState（）挂钩时，我们通常只存储我们关心的单个值。我们有点远离包含我们所有状态的对象，而只是单个值本身。原因是我们可以随意调用useState（）。

通常，React希望您为要跟踪的多个事物多次调用状态。但是您的状态也可以是对象。

const [state, setState] = useState({
   count: props.count,
   text: "" });

这里必须要小心。因为只要使用useState（），只要我们尝试通过调用setState函数来更改状态，它就不会合并这些对象。相反，它是用新状态完全替换旧状态。

imagine you have a button with this onClick method
const decrement = () => {
   setState({ count: state.count - 1 }); };

当您单击按钮时，“ count”属性将更改，但“ text”属性将消失。我们通过传播算子解决此问题。

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.

Answer 3

这是React Hook的概念。借助useState，我们也可以在功能组件中定义和更新状态。这被认为是React Hooks的主要优势。

这里是一个例子：

//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通过在功能组件中使用状态和设置状态来简化代码，并且还克服了使用这种关键字复杂性的问题。

Answer 4

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 挂钩。

来源：

React useState Hook: what’s new and to use it

链接：

React中的useState是什么？

4 个答案: