React的Hooks

Hooks是react16.8一個新增項，它能夠在你不編寫class的狀況下使用state以及其餘的React特性

Hooks的特色:
使你在無需修改組件結構的狀況下複用狀態邏輯
可將組件中相互關聯的部分拆分紅更小的函數，複雜組件將變得更容易理解
更簡潔，更易理解的代碼

狀態鉤子 State Hook

/*
 * @Author: yang
 * @Date: 2020-09-03 18:04:27
 * @LastEditors: yang
 * @LastEditTime: 2020-09-06 13:01:06
 * @FilePath: \reacty\src\ContextText.js
 */
import React, { Component,useState } from 'react'
function FruitList({fruits,setFruit}){
    return (
    fruits.map( f => <li key={f} onClick={()=> setFruit(f)}>{f}</li>))
}
function FriutAdd(props){
    const [pname,setPname] = useState("")
    const onAddFruit = (e)=> {
        if (e.key === "Enter") {
            props.onAddFruit(pname)
            setPname("")
        }
    }
    return (
        <input 
        type="text" 
        value={pname} 
        onChange={e=>setPname(e.target.value)} 
        onKeyDown={onAddFruit}
        />
    )
}
export default function HookText(){
    // useState參數是狀態初始值
    // 返回一個數組，第一個元素是狀態變量，第二個元素是狀態變動函數
    const [fruit,setFruit] = useState('草莓')
    const [fruits,setFruits] = useState(['草莓','蘋果'])
    return(
        <div>
            <p>{fruit===''?'請選擇喜好的水果':`你選擇的水果是${fruit}`}</p>
            <FriutAdd onAddFruit={pname => setFruits([...fruits,pname])}/>
            <FruitList fruits={fruits} setFruit={setFruit}/>
        </div>
    )
}

反作用鉤子Effect Hook

useEffect給函數組件增長了執行反作用操做的能力
數據獲取，設置訂閱以及手動更改React組件中的DOM都屬於
反作用

/*
 * @Author: yang
 * @Date: 2020-09-03 18:04:27
 * @LastEditors: yang
 * @LastEditTime: 2020-09-06 13:32:26
 * @FilePath: \reacty\src\ContextText.js
 */
import React, { Component,useState,useEffect, } from 'react'
function FruitList({fruits,setFruit}){
    return (
    fruits.map( f => <li key={f} onClick={()=> setFruit(f)}>{f}</li>))
}
function FriutAdd(props){
    const [pname,setPname] = useState("")
    const onAddFruit = (e)=> {
        if (e.key === "Enter") {
            props.onAddFruit(pname)
            setPname("")
        }
    }
    return (
        <input 
        type="text" 
        value={pname} 
        onChange={e=>setPname(e.target.value)} 
        onKeyDown={onAddFruit}
        />
    )
}
export default function HookText(){
    // useState參數是狀態初始值
    // 返回一個數組，第一個元素是狀態變量，第二個元素是狀態變動函數
    const [fruit,setFruit] = useState('草莓')
    const [fruits,setFruits] = useState([''])
    // 使用useEffect操做反作用
    //請務必設置依賴選項，若是沒有則設置空數組 表示僅執行一次
    useEffect(()=>{
        console.log('get Fruit')
        setTimeout(()=>{
            setFruits(['草莓','蘋果'])
        },1000)
    },[])
    useEffect(()=>{
        document.title = fruit
    },[fruit])
    useEffect(()=>{
        const timer = setInterval(() => {
            console.log('應用啓動了')
        }, 1000);
        // 返回清除函數
        return function(){
            clearInterval(timer)
        }
    },[])
    return(
        <div>
            <p>{fruit===''?'請選擇喜好的水果':`你選擇的水果是${fruit}`}</p>
            <FriutAdd onAddFruit={pname => setFruits([...fruits,pname])}/>
            <FruitList fruits={fruits} setFruit={setFruit}/>
        </div>
    )
}

useReducer

useReducer是useState的可選項，經常使用於組件的複雜狀態邏輯。相似於reducx中的reducer概念
`~~~~
/*

• @Author: yang
• @Date: 2020-09-03 18:04:27
• @LastEditors: yang
• @LastEditTime: 2020-09-06 16:04:13
• @FilePath: reactysrcContextText.js

*/
import React, { Component,useState,useEffect,useReducer } from 'react'
function FruitList({fruits,setFruit}){

return (
fruits.map( f => <li key={f} onClick={()=> setFruit(f)}>{f}</li>))

}
// 將狀態移至全局
function fruitReducer(state,action){

switch(action.type){
    case "init":
        return action.payload;
    case "add":
        return [...state,action.payload];
        default:
        return state;
}

}
function FriutAdd(props){

const [pname,setPname] = useState("")
const onAddFruit = (e)=> {
    if (e.key === "Enter") {
        props.onAddFruit(pname)
        setPname("")
    }
}
return (
    <input 
    type="text" 
    value={pname} 
    onChange={e=>setPname(e.target.value)} 
    onKeyDown={onAddFruit}
    />
)

}
export default function HookText(){

// useState參數是狀態初始值
// 返回一個數組，第一個元素是狀態變量，第二個元素是狀態變動函數
const [fruit,setFruit] = useState('草莓')
// const [fruits,setFruits] = useState([''])
// 參數一是相關的Reducer  參數二是初始值
const [fruits,dispatch] = useReducer(fruitReducer,[])
// 使用useEffect操做反作用
//請務必設置依賴選項，若是沒有則設置空數組 表示僅執行一次
useEffect(()=>{
    console.log('get Fruit')
    setTimeout(()=>{
        // setFruits(['草莓','蘋果'])
        dispatch({type:"init",payload:['草莓','蘋果']})
    },1000)
},[])
useEffect(()=>{
    document.title = fruit
},[fruit])
useEffect(()=>{
    const timer = setInterval(() => {
        console.log('應用啓動了')
    }, 1000);
    // 返回清除函數
    return function(){
        clearInterval(timer)
    }
},[])
return(
    <div>
        <p>{fruit===''?'請選擇喜好的水果':`你選擇的水果是${fruit}`}</p>
        {/* <FriutAdd onAddFruit={pname => setFruits([...fruits,pname])}/> */}
        <FriutAdd onAddFruit={pname => dispatch({type:"add",payload:pname})}/>
        <FruitList fruits={fruits} setFruit={setFruit}/>
    </div>
)

}

### useContext
useContext用於快速在函數組件中導入上下文

import React, { Component,useState,useEffect,useReducer,useContext } from 'react'
const Context = React.createContext()
function FruitList({fruits,setFruit}){

return (
fruits.map( f => <li key={f} onClick={()=> setFruit(f)}>{f}</li>))

}
// 將狀態移至全局
function fruitReducer(state,action){

switch(action.type){
    case "init":
        return action.payload;
    case "add":
        return [...state,action.payload];
        default:
        return state;
}

}
function FriutAdd(props){

const [pname,setPname] = useState("");

const {dispatch} = useContext(Context);//拿到傳入的value
const onAddFruit = (e)=> {
    if (e.key === "Enter") {
        dispatch({type:"add",payload:pname})
        // props.onAddFruit(pname)
        setPname("")
    }
}
return (
    <input 
    type="text" 
    value={pname}
    onChange={e=>setPname(e.target.value)}
    onKeyDown={onAddFruit}
    />
)

}
export default function HookText(){

// useState參數是狀態初始值
// 返回一個數組，第一個元素是狀態變量，第二個元素是狀態變動函數
const [fruit,setFruit] = useState('草莓')
// const [fruits,setFruits] = useState([''])
// 參數一是相關的Reducer  參數二是初始值
const [fruits,dispatch] = useReducer(fruitReducer,[])
// 使用useEffect操做反作用
//請務必設置依賴選項，若是沒有則設置空數組 表示僅執行一次
useEffect(()=>{
    console.log('get Fruit')
    setTimeout(()=>{
        // setFruits(['草莓','蘋果'])
        dispatch({type:"init",payload:['草莓','蘋果']})
    },1000)
},[])
useEffect(()=>{
    document.title = fruit
},[fruit])
useEffect(()=>{
    const timer = setInterval(() => {
        console.log('應用啓動了')
    }, 1000);
    // 返回清除函數
    return function(){
        clearInterval(timer)
    }
},[])
return(
    <Context.Provider value={{fruits,dispatch}}>
    <div>
        <p>{fruit===''?'請選擇喜好的水果':`你選擇的水果是${fruit}`}</p>
        {/* <FriutAdd onAddFruit={pname => setFruits([...fruits,pname])}/> */}
        <FriutAdd />
        <FruitList fruits={fruits} setFruit={setFruit}/>
    </div>~~~~
    </Context.Provider>
)

}