React Hooks速成学习笔记

1.useState状态钩子

useState()用于为函数组件引入状态（state）
纯函数不能有状态，所以把状态放在钩子里面

useState()的用法如下：

const [state, setState] = useState(initialState)

//useState状态钩子
import './App.css';
import React,{useState} from 'react';

function App() {
  // useState创造一个状态，赋值一个初始值，此时的初始值为0
  //数字第一个是一个变量，此变量指向当前状态的值，相当于this.state
  //数组第二个是一个函数，可以修改状态的值，相当于this.setState
  const [count,setCount]=useState(0);
  const addCount=()=>{
    setCount(count+10)
  }
  // const addCount=()=>{
  //   let newCount=count;
  //   setCount(newCount+=1)
  // }
  return (
    <div className="App">
      <div>{count}</div>
      <button onClick={addCount}>点击</button>
      
    </div>
  );
}

export default App;

2.useContext 共享状态钩子

//useContext 共享状态钩子
import './App.css';
import React,{useContext} from 'react';

function App() {
  const AppContext=React.createContext()
  //多个组件共享同一个组件可以用useContext
  const Achild=()=>{
    const {name}=useContext(AppContext);
    return (
    <div>这是组件A，name值为:{name}</div>
    )
  }
  const Bchild=()=>{
    const {name}=useContext(AppContext);
    return (
    <div>这是组件B，name值为:{name}</div>
    )
  }
  return (
    <AppContext.Provider value={{name:77}}>
      <Achild></Achild>
      <Bchild></Bchild>
    </AppContext.Provider>
  );
}

export default App;

3.useReducer action钩子

React 本身不提供状态管理功能，通常需要使用外部库(最常用的库是 Redux)
Redux 的核心概念是：组件发出 action 与状态管理器通信。状态管理器收到 action 以后，使用 Reducer 函数算出新的状态
Reducer 函数的形式是(state, action) => newState。
useReducers()钩子用来引入 Reducer 功能。

useReducer()的用法如下：

const [state, dispatch] = useReducer(reducer, initialState);
//它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。
//数组的第一个成员是状态的当前值，第二个成员是发送 action 的dispatch函数。

//useReducer action钩子
import './App.css';
import React,{useReducer} from 'react';

function App() {
  const reducer=(state,action)=>{
   const actionFn={
      add:function(){
        return{
          ...state,
          count:state.count+1
        }
      }
    }
    return actionFn[action.type]()
  }
  
  const [state,dispatch]=useReducer(reducer,{count:0})
  const addCount=()=>{
    dispatch({
      type:'add'
    })
  }

  return (
    <div>
      <div>{state.count}</div>
    <button onClick={addCount}>点击+1</button>
    </div>
  );
}

export default App;

4.useEffect 钩子函数

useEffect()的用法如下：

useEffect(()  =>  {
  // Async Action
}, [dependencies])

//useEffect 钩子函数
import './App.css';
import React,{useEffect,useState} from 'react';

function App() {
  const [loading,setLoading]=useState(true)
  //当有第二个参数数组时，回调函数会依据数组的发生变化而调用
  useEffect(()=>{
    setTimeout(() => {
      setLoading(false)
    }, 3000);
  },[])
  return (
    loading?<div>Loading......</div>:<div>加载完毕</div>
  )
}

export default App;

//useEffect 钩子函数
import './App.css';
import React,{useEffect,useState} from 'react';

function AsyncPage({name}){
  const[loading,setLoading]=useState(true)
  const[person,setPerson]=useState({})
  useEffect(()=>{
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      setPerson({name})
    }, 3000)
    //effect的返回函数可作为卸载的生命周期函数 
    return()=>{
      console.log("组件已卸载")
    }
  },[name])
    
  return (
  loading?<div>loading....</div>:<div>{person.name}</div>
  )
}

function App() {
  const[name,setName]=useState("曼曼")
  const[show,setShow]=useState(true)
  const changeName=(name)=>{
    setName(name)
  }

  return (
    <div>
      {show?<AsyncPage name={name} />:<div>组件已卸载</div>}
      <button onClick={()=>changeName("微微")}>将曼曼改成微微</button>
      <button onClick={()=>changeName("琪琪")}>将曼曼改成琪琪</button>
      <button onClick={()=>setShow(false)}>卸载组件</button>
    </div>
  
  )
}

export default App;

5.自定义钩子函数

//自定义钩子函数
import './App.css';
import React,{useEffect,useState} from 'react';

//封装自定义钩子函数
//根据业务需求，将自己组装的钩子函数封装成一个函数，返回对应需要的的状态和修改状态的方法即可
function usePerson(name){
  const[loading,setLoading]=useState(true)
  const[person,setPerson]=useState({})
  useEffect(()=>{
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      setPerson({name})
    }, 3000)
   
    return()=>{
      console.log("组件已卸载")
    }
  },[name])
  return [loading,person]
}
function AsyncPage({name}){
  const [loading,person]=usePerson(name)
  return (
  loading?<div>loading....</div>:<div>{person.name}</div>
  )
}

function App() {
  const[name,setName]=useState("曼曼")
  const[show,setShow]=useState(true)
  const changeName=(name)=>{
    setName(name)
  }

  return (
    <div>
      {show?<AsyncPage name={name} />:<div>组件已卸载</div>}
      <button onClick={()=>changeName("微微")}>将曼曼改成微微</button>
      <button onClick={()=>changeName("琪琪")}>将曼曼改成琪琪</button>
      <button onClick={()=>setShow(false)}>卸载组件</button>
    </div>
  
  )
}

export default App;