react教程,函数式组件如何使用state?useState范例
发布于 作者:苏南大叔 来源:程序如此灵动~在前几天的文章里面,在叙述 react 的组件式编程的路由传参问题的时候,曾经使用过useParams
。那么,在本文中,将要使用的useState
来解决state
的问题。值得特别说明的是:本篇文章是在函数式组件里面使用state
,所以会和传统的 react 中的状态机制有所不同。
大家好,这里是苏南大叔的“程序如此灵动”博客,这里记录苏南大叔和计算机代码的故事。在本文中,您将学习到react
的函数式组件的state
的使用方法。测试环境:win10
,node@16.14.2
,npm@8.3.0
,react@18.1.0
,react-dom@18.1.0
。
基本使用方式
本文的范例,是通过create-react-app
创建的,然后简单的对 app 函数式组件进行了修改。
import './App.css';
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0)
function incr() {
setCount(count + 1)
}
return (
<div className="App">
<header className="App-header">
{count}
<button onClick={incr}>+1</button>
</header>
</div>
);
}
export default App;
代码说明如下:
引入useState
:
import React, { useState } from 'react';
然后,定义一个useState
,是个非常奇怪的使用方式,
const [返回值,函数名] = useState(初始值)
如果需要控制的变量比较多的话,就需要多次定义useState()
。
const [count, setCount] = useState(0)
const [str, setStrByApi] = useState("")
如果翻译成大家能够接受的代码的话,就是:
const count = setCount(0)
const str = setStrByApi("")
使用ajax获取数据
因为在日常的使用过程中,都是使用ajax
的方式来获取数据的。目前的浏览器都内置fetch
的支持,react
又属于前端的范畴,所以也是默认可以使用fetch
函数的。
涉及到接口服务代码,见下面这篇文章:
代码如下:
const [str, setStrByApi] = useState("")
const [str2, setStr2ByApi] = useState("")
async function ajax() {
const response = await fetch('http://127.0.0.1:3222/hi/');
const str = await response.text();
setStrByApi(str);
fetch("http://127.0.0.1:3222/hello?f=me").then(function(response) {
return response.json();
}).then(function(data) {
setStr2ByApi(data["f"]);
})
.catch(function(e) {
});
}
在render
的时候,使用{str}
和{str2}
来显示变量。
这里需要注意的是:
如果使用await
方式的话,这里可能需要两个await
,然后还需要把对应函数设置为async
。当然还可以使用.then
的方式。
最终代码
react
最常见的情况,使用props
和state
,而props
就是组件的第一个参数,state
需要引入useState
,路由传参的话,需要引入useParams
。
最终代码如下:index.js
:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App pre="服务器端返回:" />
</React.StrictMode>
);
app.js
:
import './App.css';
import React, { useState } from 'react';
function App(props) {
const [count, setCount] = useState(0)
const [str, setStrByApi] = useState("")
const [str2, setStr2ByApi] = useState("")
async function ajax() {
// 双await
const response = await fetch('http://127.0.0.1:3222/hi/');
const str = await response.text();
setStrByApi(str);
// 或者.then方式
fetch("http://127.0.0.1:3222/hello?f=me").then(function(response) {
return response.json();
}).then(function(data) {
setStr2ByApi(data["f"]);
})
.catch(function(e) {
});
}
function incr() {
setCount(count + 1)
}
var pre = props.pre;
return (
<div className="App">
<header className="App-header">
{count},{pre}{str} {str2}
<button onClick={incr}>+1</button>
<button onClick={ajax}>ajax</button>
</header>
</div>
);
}
export default App;
运行效果:
参考文献
综述
本文描述,在react
的函数式组件里面,如何使用state
以及props
。state
需要引入useState
,而props
需要调用函数式组件的第一个参数。



【服务】 一切外联事宜,授权管家处理。微信号:tudoumart
【苹果】苹果生态程序员QQ群【787907940】,等您来加入
【加群】加入QQ群【175454274】和大家一起讨论这个问题
【绝密】秘籍文章入口,仅传授于有缘之人
react