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 函数式组件进行了修改。

• https://newsn.net/say/react-scripts-action.html

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函数的。

• https://newsn.net/say/js-fetch.html

涉及到接口服务代码，见下面这篇文章：

• https://newsn.net/say/express.html

代码如下：

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;

运行效果：

参考文献

• https://newsn.net/say/react-component.html
• https://newsn.net/say/react-router-params.html

综述

本文描述，在react的函数式组件里面，如何使用state以及props。state需要引入useState，而props需要调用函数式组件的第一个参数。

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。