函数组件 hooks-useState| 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第5天

使用hooks理由

1. 高阶组件为了复用，导致代码层级复杂
2. 生命周期的复杂
3. 写成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，显示暂无数据