React+TS 从零开始教程(3):useState

源码链接:下载

在开始今天的内容之前呢,我们需要先看一个上一节遗留的问题,就是给属性设置默认值。

我们不难发现,这个defaultProps已经被废弃了,说明官方并不推荐这样做。其实,这个写法是之前类组件的时候常用的,但现在都是函数式组件了,就不推荐这样写了。

我们在编写参数的时候,完全可以直接设置默认值,即传参的时候就解构,并初始化。

const Hello : React.FC <IProps> = ({message = 'Hello world~'}) => {
    return <h2>{message}</h2>
}

当然了,如果你非要用defaultProps,也不是不可以。

好了,这一节我们来讲讲Hook。

首先呢,第一个问题,我们要弄清楚hook是什么?

hook是一个特殊的函数,React Hooks 是 React 16.8 版本中引入的一个新特性,它允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 的主要目的是在不增加组件复杂性的前提下,增强函数组件的功能。

如果你在编写这个函数组件的时候,想要设置一些组件的变量(状态),以前的做法,我们是必须把组件转化成一个class,然后用setState去做。

现在有了hook,就只需要引入一个useState即可。

小需求

来一个小需求,我要完成一个组件,用于提供一个开关变量,只有一个布尔类型的状态。

import React, { useState } from "react";

const Switch = () => {
  //每一个变量都要单独做一个State
  //useState解构出两个变量,一个是变量名,一个是赋值这个变量的函数
  const [on,setOn] = useState(false)
  return (
    <>
    <h2 onClick={ () => {setOn(!on)}}>
    {on?'关闭':'开启'}
    </h2>
    </>
  )
}

export default Switch;

效果就是点击一次就会自动切换:

State变量一定是写在函数内部的,接下来详细说明、

const [on,setOn] = useState(false)

1)useState(false): 设置第一个参数,也就是on的初始值为false

2)on: 解构出来的第一个参数,我们可以在render中直接使用

3)setOn: 解构出来的第二个参数,是一个函数,用来给on赋值

模态窗体

useState的应用很广泛,任何需要状态管理的组件,都会用到,下面我们再来一个模态窗体的例子。

import React, { useState } from 'react';  
  
const ModalExample = () => {  
  const [isOpen, setIsOpen] = useState(false);  
  
  const handleOpenModal = () => {  
    setIsOpen(true);  
  };  
  
  const handleCloseModal = () => {  
    setIsOpen(false);  
  };  
  
  return (  
    <>  
      <button onClick={handleOpenModal}>打开模态框</button>  
      {isOpen && (  
        <div className="modal">  
          <h2>模态框内容</h2>  
          <button onClick={handleCloseModal}>关闭模态框</button>  
        </div>  
      )}  
    </>  
  );  
}

export default ModalExample;

这个例子比较简单,大家看看就行。

筛选列表

import React, { useState } from 'react';  
import '../style/FilterableList.css'
  
const FilterableList = () => {  
  const [filterText, setFilterText] = useState('');  
  const [items, setItems] = useState(['华为mate60', '小米14 proMax', '荣耀Magic6']);  
  
  const filteredItems = items.filter(item =>  
    item.toLowerCase().includes(filterText.toLowerCase())  
  );  
  
  const handleFilterChange = (event:any) => {  
    setFilterText(event.target.value);  
  };  
  
  return (  
    <div className="filterable-list-container">  
      <div className="filter-input">  
        <input  
          type="text"  
          value={filterText}  
          onChange={handleFilterChange}  
          placeholder="过滤列表..."  
        />  
      </div>  
      <ul className="filtered-list">  
        {filteredItems.map(item => (  
          <li key={item} className="list-item">  
            {item}  
          </li>  
        ))}  
      </ul>  
    </div>  
  );  
}



export default FilterableList

css省略,详见源码。

页面效果:

在 React 中,useState Hook 使得函数组件具有状态管理能力。当状态(在这个例子中是 filterText)更新时,React 会重新渲染该组件及其子组件。在组件的渲染过程中,React 会 重新计算所有 依赖于该状态的表达式。

所以,当filterText发生改变,由于

  const filteredItems = items.filter(item =>  
    item.toLowerCase().includes(filterText.toLowerCase())  
  );  

filteredItems是依赖于filterText的,所以是这样的顺序。

1)filterText改变

2)开始触发DOM更新(还未更新)

3)重新计算所有依赖filterTextstate

4)DOM成功更新

这个小节,我们主要讲解了useState的用法。

相关推荐
gqkmiss13 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃19 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰23 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye30 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm32 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js