源码链接:下载
在开始今天的内容之前呢,我们需要先看一个上一节遗留的问题,就是给属性设置默认值。
我们不难发现,这个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的用法。