React学习总结part2：react-hooks的useState，useContext ，useReducer，useEffect

useState

• useState的优点：便于管理数据的状态，多次声明状态的方式更加方便
• useState的缺点：处理多层嵌套数据逻辑，比较吃力

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Routers from './project/router.js';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <Routers />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

router.js

import React from 'react';
import {BrowserRouter as Router,Route,Redirect} from 'react-router-dom';
import Hello from './pages/useState'

class Routers extends React.Component{
    render(){
        return(
            <div>
                <Router>
                    <Route path='/useState' component={Hello}></Route>
                    <Redirect from='*' to='/useState'></Redirect>
                </Router>
            </div>
        )
    }
}

export default Routers;

pages/useState.js

方法一：

import React,{useState} from 'react';
const Hello=()=>{
    const [age,setAge] = useState(1);
    const [name,setName] = useState('Lisa');
    const handelChange=(e)=>{
       let {value} = e.target;
       setAge(value);
    }
    const handelChangeName=(e)=>{
        let {value} = e.target;
        setName(value)
    }
    return(
        <div>
            <div><span>年龄{age}</span><input name='age' onChange={handelChange}/></div>
            <div><span>姓名{name}</span><input name='name' onChange={handelChangeName}/></div>
        </div>
    )
 }

export default Hello;

方法二

import React,{useState} from 'react';
function Hello(){  
    //count 计数结果  setCount方法 用来计算结果，更新  useState(0)设定的一个默认值
   const [count,setCount] = useState(10);
   return(
    <div>
        {count}
        <button onClick={()=>setCount(count+1)}>+</button>
        <button onClick={()=>setCount(count-1)}>-</button>
    </div>
   )
}

方法三

import React,{useState} from 'react';
function Hello(){  
    //count 计数结果  setCount方法 用来计算结果，更新  useState(0)设定的一个默认值
   const [count,setCount] = useState(10)
   const handleAdd=()=>{
       let newCount = count
       setCount(newCount+1)
   }
   const handelDel=()=>{
        let newCount = count
        setCount(newCount-1)
        //this.setState({count})
   }
   return(
    <div>
        {count}
        <button onClick={handleAdd}>+</button>
        <button onClick={handelDel}>-</button>
    </div>
   )
}

useReducer

useReducer：接收第一个参数是reducer函数，第二个参数是默认值（count 相当于state  dispatch函数）

 方式一

import React,{useReducer} from 'react';

const reducer=function(state,action){
    switch(action){
        case 'add':
            return state+1;
        case 'del':
            return state-1;
    }
}
function Hello(){
    // useReducer接收第一个参数是reducer函数，第二个参数是默认值
    // count 相当于state  dispatch函数
    const [count,dispatch] = useReducer(reducer,0)
    return(
        <div>
            <span>{count}</span>
            <button onClick={()=>dispatch('add')}>+</button>
            <button onClick={()=>dispatch('del')}>-</button>
        </div>
    )
}
export default Hello;

方式二

import React,{useReducer} from 'react';
const reducer=function(state,action){
    switch(action){
        case 'add':
            return {count:state.count+1};
        case 'del':
            return {count:state.count-1};
    }
}
function Hello(){
    const [state,dispatch] = useReducer(reducer,{count:0}); 
    const {count} = state;
    return(
        <div>
            <span>{count}</span>
            <button onClick={()=>dispatch('add')}>+</button>
            <button onClick={()=>dispatch('del')}>-</button>
        </div>
    )
}
export default Hello;

方式三

import React,{useReducer} from 'react';
const reducer=function(state,action){
    switch(action){  
        case 'add':
            return {count:state.count+1};
        case 'del':
            return {count:state.count-1};
    }
}
function Hello(){
    const [state,dispatch] = useReducer(reducer,{count:0}); 
    const {count} = state;
    return(
        <div>
            <span>{count}</span>
            <button onClick={()=>dispatch('add')}>+</button>
            <button onClick={()=>dispatch('del')}>-</button>
        </div>
    )
}
export default Hello;

useEffect

方式一

import React,{useState,useEffect} from 'react';
// 存在本地储存
function Hello(){
    //useState里的初始值来自于本地储存里的值
    const [value,setValue] = useState(
        localStorage&&localStorage.getItem('username')
    )
    useEffect(()=>{
        // 将Lisa存在本地储存里
        localStorage&&localStorage.setItem('username','Lisa')
    },[value,setValue]) 

    return (
        <div>
            <p>本地储存里的值:{value}</p>
        </div>
    );
}

export default Hello;

方式二

import React,{useState,useEffect} from 'react';

function Hello(){
    const [count,setCount] = useState(0);
    useEffect(()=>{
        console.log('componentDidMount');  //组件完成挂载
        console.log('componentDidUpdate');  //组件完成更新
        // 销毁
        return ()=>{console.log('componentWillUnMount');}
    }); 
    return(
        <div>
            <p>{count}</p>
            <button onClick={()=>{setCount(count+1)}}>点击按钮</button>
        </div>
    )  
}
export default Hello;