我目前正在学习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>
让我们用简单的方式很容易地了解我们的用法
假设我们有react代码:-
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Test from './components/Test.jsx'
ReactDOM.render(
<div>
<Test />
</div>
,
document.getElementById('root')
);
Test.jsx
import React from "react";
function Test() {
var x = 5;
function update() {
console.log(x);
return x++;
}
return (
<div>
<h1>{x}</h1>
<button onClick={update}>click</button>
</div>
);
}
export default Test;
在这里，页面会显示5，虽然我们通过点击按钮调用更新功能，因为我们更新了x，但不是在h1标签之间，但在实际中，x是不断变化的，每当我们点击，但它可以在控制台看到
点击此链接查看结果和检查控制台
在这里usState神奇地工作，
测试。jsx，使用useState
import React, { useState } from "react";
function Test() {
var x = 5;
const [value, setValue] = useState(x);
function update() {
setValue(value + 1);
}
return (
<div>
<h1>{value}</h1>
<button onClick={update}>click</button>
</div>
);
}
export default Test;
点击此链接查看结果
在这里，通过点击按钮，值将不断更新，因为这里我们使用useState，它是一个函数，它返回两件事，一个是当前状态值，另一个是函数，如果我们传递任何值给这个函数，它将更新当前状态值，当前状态值更新它的值在所有地方，无论它使用，而无需编写任何额外的代码。
让我们用简单的方式很容易地了解我们的用法
假设我们有react代码:-
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Test from './components/Test.jsx'
ReactDOM.render(
<div>
<Test />
</div>
,
document.getElementById('root')
);
Test.jsx
import React from "react";
function Test() {
var x = 5;
function update() {
console.log(x);
return x++;
}
return (
<div>
<h1>{x}</h1>
<button onClick={update}>click</button>
</div>
);
}
export default Test;
在这里，页面会显示5，虽然我们通过点击按钮调用更新功能，因为我们更新了x，但不是在h1标签之间，但在实际中，x是不断变化的，每当我们点击，但它可以在控制台看到
点击此链接查看结果和检查控制台
在这里usState神奇地工作，
测试。jsx，使用useState
import React, { useState } from "react";
function Test() {
var x = 5;
const [value, setValue] = useState(x);
function update() {
setValue(value + 1);
}
return (
<div>
<h1>{value}</h1>
<button onClick={update}>click</button>
</div>
);
}
export default Test;
点击此链接查看结果
在这里，通过点击按钮，值将不断更新，因为这里我们使用useState，它是一个函数，它返回两件事，一个是当前状态值，另一个是函数，如果我们传递任何值给这个函数，它将更新当前状态值，当前状态值更新它的值在所有地方，无论它使用，而无需编写任何额外的代码。
基本上React.useState(0)神奇地看到它应该返回元组计数和setCount(一个改变计数的方法)。参数useState用于设置count的初始值。
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>
);
基于Enmanuel Duran的示例，但显示了两个计数器，并将lambda函数作为普通函数编写，因此有些人可能更容易理解。
