【React】函数组件 hooks-useState
使用hooks理由
- 高阶组件为了复用,导致代码层级复杂
- 生命周期的复杂
- 写成functional组件,无状态组件 ,因为需要状态,又改成了class,成本高
useState(保存组件状态)
useState的具体语法如下,我们用他来实现一个数值的切换和todolist
const [state, setstate] = useState(initialState)
切换数值
import React,{useState} from 'react'
export default function App() {
const [name, setName] = useState("小明")
const [age, setAge] = useState(18)
return (
<div>
<button onClick={()=>{
setName("小红")
setAge(100)
}}>click</button>
app-{name}-{age}
</div>
)
}
实现todolist增加和删除
1)整体思路,新建一个input 通过onChange={}调用方法获取input失焦之后输入框内的值,通过状态usestate的settext函数存储在text中,input后面新建button按钮触发数据传输,传输目标为list数组,因此新建一个存储数变量list,通过setlist([…list,text]),扩展运算符把数组list中的元素和text取到的元素组成新的数组,
2)list.map()渲染列表下的新数组,完成添加后的列表,每一个li列表元素后面新增一个button按钮del删除。onclick事件绑定buttonn,通过map的第二个元素拿到每个item的index值,拷贝数组之后,通过数组的splice()方法删除对应index的元素将得到的新数组通过setlist放入到变量list中,通过list.map()重新渲染列表页面
3)最后如果列表为空,即,列表的长度为0时,显示“暂无数据”
import React,{useState} from 'react'
export default function App() {
const [text, setText] = useState("")
const [list, setList] = useState(["aa","bb","cc"])
const handleChange = (evt) =>{
// console.log("handleChange",evt.target.value);
setText(evt.target.value)
}
const handleAdd = () =>{
console.log(text)
{text &&
setList([...list,text])
}
//清空
setText("")
}
const handleDel = (index)=>{
console.log(index);
var newList = [...list]
newList.splice(index,1)
setList(newList)
}
return (
<div>
{/* 要想清空,让input标签变成受控的 value */}
<input onChange={handleChange} value={text}/>
<button onClick={handleAdd}>增加</button>
<ul>
{
list.map((item,index)=>
<li key={item}>{item}
<button onClick={()=>{handleDel(index)}}>删除</button>
</li>
)
}
</ul>
{!list.length&& <div>暂无待办事项</div> }
</div>
)
}
最终结果
按del删除按钮后删除所有元素,list长度为0,显示暂无数据