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>
)

}