千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版

使用hooks的理由

1、高阶组件为了复用，导致代码层级复杂

2、生命周期复杂

3、写成functional组件，无状态组件，因为需要状态，又改成class，成本高

useState

引用useState

import React, { useState } from 'react'

创建

const [text, settext] = useState('马达啦')

input框获取添加到数组展示

<input style={{ marginTop: 30 }} onChange={(e) => hiderinp(e)} value={text} />

hiderinp事件修改settext值

 const hiderinp = (e) => {

        settext(e.target.value)

    }

先创建数组

const [list, setlist] = useState(['哈希喇嘛'])

添加到数组中

<button onClick={hiderbtn}>获取input值加到list中</button>

const hiderbtn = () => {

        console.log(text);

        setlist([...list, text])

        settext('')

    }

删除数组

<button onClick={() => del(index)}>删除</button>

const del = (index) => {

        let arr = list

        arr.splice(index, 1)

        setlist([...arr])

    }

有数组就不显示，没有就展示

<div style={{display:list.length?'none':'block'}}>暂无数据</div>