在前几天的文章里面,在叙述 react 的组件式编程的路由传参问题的时候,曾经使用过useParams。那么,在本文中,将要使用的useState来解决state的问题。值得特别说明的是:本篇文章是在函数式组件里面使用state,所以会和传统的 react 中的状态机制有所不同。

苏南大叔:react教程,函数式组件如何使用state?useState范例 - 函数式组件state
react教程,函数式组件如何使用state?useState范例(图6-1)

大家好,这里是苏南大叔的“程序如此灵动”博客,这里记录苏南大叔和计算机代码的故事。在本文中,您将学习到react的函数式组件的state的使用方法。测试环境:win10node@16.14.2npm@8.3.0react@18.1.0react-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;

苏南大叔:react教程,函数式组件如何使用state?useState范例 - usestate代码范例
react教程,函数式组件如何使用state?useState范例(图6-2)

代码说明如下:
引入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}来显示变量。

苏南大叔:react教程,函数式组件如何使用state?useState范例 - usestate代码范例2
react教程,函数式组件如何使用state?useState范例(图6-3)

这里需要注意的是:
如果使用await方式的话,这里可能需要两个await,然后还需要把对应函数设置为async。当然还可以使用.then的方式。

最终代码

react最常见的情况,使用propsstate,而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>
);

苏南大叔:react教程,函数式组件如何使用state?useState范例 - react-props
react教程,函数式组件如何使用state?useState范例(图6-4)

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?useState范例 - react-render
react教程,函数式组件如何使用state?useState范例(图6-5)

运行效果:

苏南大叔:react教程,函数式组件如何使用state?useState范例 - 显示效果
react教程,函数式组件如何使用state?useState范例(图6-6)

参考文献

综述

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

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