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）重新计算所有依赖filterText的state

4）DOM成功更新

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