我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔: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

本文说的是函数式组件,如果想了解类式组件中state的用法,请参考:
https://newsn.net/say/react-state.html

基本使用方式

本文的范例,是通过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("")

或者把需要控制的变量,放到一个object里面。(不推荐,因为改写就比较麻烦)。

let [info, setinfo] = useState({
  name: '苏南大叔',
  city: 'beijing'
})
setinfo({ ...info, city: 'tangshan' });

如果翻译成大家能够接受的代码的话【仅仅是个通俗的理解而已】,就是:

let state = {};
let count;
function setCountDefault(cnt){
  if(!state.count){
    setCount(cnt);
  }
}
function setCount(cnt){
  count = state.count = cnt;
}
setCountDefault(0);  //第一次定义传入默认值
setCount(9);         //第二次调用设置合适的值

这里传递的参数是初始值,也就是说:当已经有数据定义在state里面的话,就不修改了。

题外话:使用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)

三种写法

第一种情况写法简单,但是特殊情况下失效。

setCount(count + 1);

后面的两种方式,一直可用,特殊情况下有奇效。

setCount(count => count + 1);
setCount((count) =>{return count + 1;});

至于特殊情况,目前已知有setInterval(),暂时留后续文章讨论。

参考文献

综述

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

助理微信

微信打赏码

微信公众号

微信小程序

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react