Javascript React中的useState（）是什么？

我目前正在学习React中的hooks概念，并试图理解下面的示例

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>
  );
}

从'react'导入{useState}；
函数示例（）{
//声明一个新的状态变量，我们称之为“count”
const[count，setCount]=useState（0）；
返回(
您单击了{count}次

设置计数（计数+1）}>
点击我
);
}

上面的示例增加处理程序函数参数本身的计数器。如果我想修改事件处理程序函数中的计数值，该怎么办

考虑以下示例：

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>

setCount=（）=>{
//如何在此处修改计数值。不确定是否可以使用setState修改其值
//我还想在这里修改其他状态值。我该怎么做
}
setCount（）}>
点击我
钩子是
React v16.7.0-alpha中的一项新功能
useState
是“钩子”
useState（）
设置任何变量的默认值并管理函数组件（PureComponent函数）<代码>ex:const[count，setCount]=useState（0）设置计数0的默认值。u可以使用
setCount
来
递增
或
递减
该值
onClick={（）=>setCount（count+1）}
增加计数值。
useState
hook的语法很简单

const[value，setValue]=useState（defaultValue）

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

我建议你阅读这本书。书中有很多很好的解释和大量的例子


从'react'导入{useState}；
函数示例（）{
//声明一个新的状态变量，我们称之为“count”
const[count，setCount]=useState（0）；
//这取决于你怎么做
const buttonClickHandler=e=>{
//增量
//设置计数（计数+1）
//减量
//设置计数（计数-1）
//任何事
//设置计数（0）
}
返回(
您单击了{count}次

点击我
);
}
是一种访问react的核心功能（如
状态
）的新方法（仍在开发中），无需使用类。在您的示例中，如果您希望直接在处理函数中增加计数器，而无需在
onClick
属性中直接指定它，您可以执行以下操作：

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

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

和onClick：

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

useState（0）
返回一个元组，其中第一个参数
count
是计数器的当前状态，
setCounter
是允许我们更新计数器状态的方法。我们可以使用
setCounter
方法在任何地方更新
count
的状态-在这种情况下，我们在
setCount
函数中使用它，在这里我们可以做更多的事情；使用钩子的想法是，如果不希望/不需要，我们可以使代码更具功能性，并避免使用基于类的组件

（包括计数器）例如，我使用了
useState
、
useffect
、
useContext
和自定义挂钩。我可以更详细地了解钩子是如何在这个答案上工作的，但是文档非常详细地解释了钩子和其他钩子，希望能有所帮助

更新：，由于版本16.8现在可以使用，React网站上有一个部分回答了一些问题。
useState
是React v16.8.0中可用的挂钩之一。它基本上允许您将非状态/功能组件转换为具有自己状态的组件

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

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

然后，您可以调用
setLoading
传递布尔值。
拥有“有状态”功能组件是一种很酷的方式。
useState（）是一个内置的React钩子示例，它允许您在功能组件中使用状态。这在React 16.7之前是不可能的

useState函数是一个内置的钩子，可以从react包导入。它允许您向功能组件添加状态。使用函数组件内的useState钩子，您可以创建一段状态，而无需切换到类组件。
useState
是
0.16.7
版本中可用的内置react钩子之一

useState
只能在功能组件内部使用<如果我们需要一个内部状态，而不需要实现更复杂的逻辑，比如生命周期方法，那么code>useState

就是一种方法

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

返回一个有状态值，以及一个更新该值的函数

在初始渲染期间，返回的状态（state）与 作为第一个参数传递的值（initialState）

setState函数用于更新状态。它接受一个新的 状态值并使组件的重新呈现排队

请注意

useState

hook callback用于更新状态的行为与组件

this.setState

的行为不同。为了向您展示差异，我准备了两个示例

class用户信息类扩展了React.Component{
州={firstName:'John'，lastName:'Doe'}；
render（）{
返回
userInfo:{JSON.stringify（this.state）}

这个.setState（{
名字：“杰森”
})}>将姓名更新为Jason
;
}
}
//请注意，使用setUserInfo回调时会创建新对象
函数UserInfoFunction（）{
const[userInfo，setUserInfo]=React.useState（{
姓：“约翰”，姓“多伊”，
});
返回(
userInfo:{JSON.stringify（userInfo）}

setUserInfo（{firstName:'Jason'}）}>将名称更新为Jason
);
}
ReactDOM.render(
，document.querySelector（“#app”）

useState（）
是一个React钩子。钩子使得在内部使用状态和可变性成为可能
const [state, setState] = useState(initialState);

import React, {useState} from react    

function HookCounter {    
  const [count, stateCount]= useState(0)    
    return(    
      <div>     
        <button onClick{( ) => setCount(count+1)}> count{count}</button>    
      </div>    
    )   
 }

  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(0);

  // increments count by 1 when first button clicked
  function handleClick(){
    setCount(count + 1);
  } 

  // increments count2 by 1 when second button clicked
  function handleClick2(){
    setCount2(count2 + 1);
  } 

  return (
    <div>
      <h2>A React counter made with the useState Hook!</h2>
      <p>You clicked {count} times</p>
      <p>You clicked {count2} times</p>
      <button onClick={handleClick}>
        Click me
      </button> 
      <button onClick={handleClick2}>
        Click me2
      </button>
  );

import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      // passing a callback to useState to update count
      <button onClick={() => setCount(count => count + 1)}>
        Click me
      </button>
    </div>
  );
}

class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
  message: ‘’    
 };
}

componentDidMount() {
/* ... */
 }

render() {
return <div>{this.state.message}</div>;
  }
}

function Message(props) {
  return <div>{props.message}</div>
 }
// Or as an arrow function
const Message = (props) =>  <div>{props.message}</div>