2、react学习： react hooks简单使用

import React,{ useState,useEffect } from 'react'
function User(){
    const [date,setDate] = useState(new Date());
    const [date2,setDate2] = useState(new Date());//多个变量写多个useState
    useEffect(()=>{
        const timerId = setInterval(() => {
            setDate(new Date());
            setDate2(new Date())
        }, 1000);
        return ()=>clearInterval(timerId);//组件卸载就执行return方法
    })
    return(
        <React.Fragment>
            <h1>user</h1>
            <div>時間：{date.toLocaleTimeString()}</div>
            <div>時間2：{date2.toLocaleTimeString()}</div>
        </React.Fragment>
    )
}

export default User;

 Hooks版todolist：

官方文档：https://reactjs.org/docs/hooks-overview.html

使你在⽆需修改组件结构的情况下复⽤状态逻辑 可将组件中相互关联的部分拆分成更⼩的函数，

复杂组件将变得 更容易理解 更简洁、更易理解的代码

import React,{useState, useEffect} from 'react'
import { userInfo } from 'os'

function Hookspages(props){
    const [fruits, setFruits] =  useState(['苹果','栗子'])
    return (<div>
             Hookspages
             <AddFruits addFruit={ item=> setFruits([...fruits, item])}/>
             <FruitsList fruits={fruits} setFruits={setFruits}/>
           </div>)
}


function AddFruits({addFruit}){
    const [name, setName] = useState("");
    return(
        <div>
            <input value={name} onChange={(e)=>setName(e.target.value)} />
            <button onClick={()=>addFruit(name)}>点击增加</button>
        </div>
    )
}


function FruitsList({fruits,setFruits}){

    const delcur = delIndx=>{
        const tem = [...fruits];
        tem.splice(delIndx,1);
        setFruits(tem)
    }

    return(
        <div>
        <ul>
        {fruits.map((item,index)=>{
          return <li key={`fruits${index}`} onClick={()=>delcur(index)}>{item}</li>
        })}
        </ul>
        </div>
    )
}

export default Hookspages;