React 中的 useState() 是什么？

IT技术 javascript reactjs react-native react-hooks react-state
2021-01-28 04:46:55

我目前正在 React 中学习钩子概念并试图理解下面的例子。

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

上面的例子增加了处理函数参数本身的计数器。如果我想在事件处理函数中修改计数值怎么办

考虑下面的例子：

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. How can I do that
}

<button onClick={() => setCount()}>
  Click me
</button>
6个回答

React hooks是一种访问 react 核心功能的新方法（仍在开发中），例如state无需使用类，在您的示例中，如果您想直接在处理程序函数中增加计数器而不直接在onClickprop 中指定它，您可以做类似的事情：

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

和点击：

<button onClick={setCount}>
    Click me
</button>

让我们快速解释一下这一行发生了什么：

const [count, setCounter] = useState(0);

useState(0)返回一个元组，其中第一个参数count是计数器的当前状态，并且setCounter是允许我们更新计数器状态的方法。我们可以使用该setCounter方法来更新count任何地方的状态——在这种情况下，我们在setCount函数内部使用它，我们可以做更多的事情；使用钩子的想法是，我们能够让我们的代码更具功能性，并在不需要/不需要时避免基于类的组件。

我写了多个例子挂钩一个完整的文章（包括计数器）如本codepen，我利用了useState，useEffect，useContext，和自定义挂钩。我可以详细了解钩子如何在这个答案上工作，但文档很好地解释了状态钩子和其他钩子，希望它有所帮助。

更新： Hooks 不再是一个建议，因为它们现在可以使用16.8版，React 站点中有一个部分回答了一些常见问题。

好吧，解构赋值就像元组一样使用stackoverflow.com/a/4513061/6335029
2021-03-18 04:46:55
您能否还说明为什么我们与const一个肯定会改变的状态相关联？const count对我来说看起来很奇怪
2021-03-23 04:46:55
很好的类比，除了 JavaScript 在技术上没有元组数据类型
2021-03-30 04:46:55
在重新渲染组件之前，钩子不会在“设置值”调用后更新它的值。Hookstate ( hookstate.js.org ) 库增压 useState为您提供即时value更新和更多功能。免责声明：我是该库的作者。
2021-04-02 04:46:55
钩子是异步的吗？使用时setSomething，如果我之后something直接尝试使用，它似乎仍然具有旧值...
2021-04-13 04:46:55

useState是0.16.7版本中可用的内置react-hooks之一。

useState应该只在功能组件内部使用。useState如果我们需要一个内部状态并且不需要实现更复杂的逻辑（例如生命周期方法），这是一种方式。

const [state, setState] = useState(initialState);

返回一个有状态的值和一个更新它的函数。

在初始渲染期间，返回的状态 (state) 与作为第一个参数 (initialState) 传递的值相同。

setState 函数用于更新状态。它接受一个新的状态值并将组件的重新渲染排入队列。

请注意，useState用于更新状态的钩子回调的行为与组件不同this.setState。为了向您展示差异，我准备了两个示例。

class UserInfoClass extends React.Component {
  state = { firstName: 'John', lastName: 'Doe' };
  
  render() {
    return <div>
      <p>userInfo: {JSON.stringify(this.state)}</p>
      <button onClick={() => this.setState({ 
        firstName: 'Jason'
      })}>Update name to Jason</button>
    </div>;
  }
}

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <UserInfoClass />
    <UserInfoFunction />
  </div>
, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

setUserInfo使用回调时会创建新对象。注意我们丢失了lastName键值。为了修复我们可以在useState.

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

见示例：

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo(prevState => ({
        ...prevState, firstName: 'Jason' }))}>
        Update name to Jason
      </button>
    </div>
  );
}

ReactDOM.render(
    <UserInfoFunction />
, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

与类组件中的 setState 方法不同，useState 不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法相结合来复制此行为：

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

有关更多信息，useState请参阅官方文档。

您的比较示例帮助像我这样的新手了解使用 useState
2021-04-05 04:46:55
感谢您在示例中添加一个函数作为参数。
2021-04-07 04:46:55

useStatehook的语法很简单。

const [value, setValue] = useState(defaultValue)

如果您不熟悉此语法，请转到此处。

我建议你阅读文档。有很好的解释和大量的例子。

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
  
  // its up to you how you do it
  const buttonClickHandler = e => {
   // increment
   // setCount(count + 1)
   
   // decrement
   // setCount(count -1)
   
   // anything
   // setCount(0)
  }
  

  return (
       <div>
          <p>You clicked {count} times</p>
         <button onClick={buttonClickHandler}>
             Click me
         </button>
      </div>
   );
 }

这应该是公认的答案。简洁明了，具有良好的外部参考。
2021-04-03 04:46:55
是什么让你困惑我的朋友？很难找到比官方文档更好的解释。
2021-04-05 04:46:55
这是最糟糕的答案，基本上是文档页面的复制/粘贴。我来这里是因为文档页面令人困惑
2021-04-09 04:46:55

useState是 React v16.8.0 中可用的钩子之一。它基本上可以让您将其他无状态/功能组件转换为可以拥有自己状态的组件。

在最基本的层面上，它是这样使用的：

const [isLoading, setLoading] = useState(true);

这让您可以调用setLoading传递布尔值。这是拥有“有状态”功能组件的一种很酷的方式。

useState()是一个 React 钩子。钩子使在函数组件中使用状态和可变性成为可能。

虽然您不能在类中使用钩子，但您可以用函数 one 包装类组件并使用它的钩子。这是将组件从类迁移到函数形式的绝佳工具。这是一个完整的例子：

对于这个例子，我将使用一个计数器组件。就是这个：

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }
  
  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }
  
  render() {
    return <button onClick={() => this.inc()}>{this.state.count}</button>
  }
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

它是一个带有计数状态的简单类组件，状态更新是通过方法来完成的。这是类组件中非常常见的模式。首先是用一个同名的函数组件包装它，将它的所有属性委托给被包装的组件。您还需要在函数返回中呈现包装的组件。这里是：

function Hello(props) {
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => this.inc()}>{this.state.count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

这是完全相同的组件，具有相同的行为、相同的名称和相同的属性。现在让我们将计数状态提升到函数组件。事情是这样的：

function Hello(props) {
  const [count, setCount] = React.useState(0);
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => setCount(count+1)}>{count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>

注意方法inc还在，不会伤害任何人，实际上是死代码。这就是想法，只是保持提升状态。完成后，您可以删除类组件：

function Hello(props) {
  const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount(count+1)}>{count}</button>;
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

<div id='root'></div>

虽然这使得在类组件中使用钩子成为可能，但我不建议你这样做，除非你像我在这个例子中所做的那样迁移。混合使用函数和类组件会使状态管理变得一团糟。我希望这有帮助

最好的祝福

其它你可能感兴趣的问题
上一篇考虑将事件处理程序标记为“被动”以使页面更具响应性 下一篇如何使 Google Chrome JavaScript 控制台持久化？