学习React的Hooks（钩子）（Day：8）

[XJQ124]

任务：学习React的Hooks

进度：25%

1、自定义hook useXXX

import { useState } from "react"
//自定义hook的demo
function useToggle() {
  //这个函数中放可复用的逻辑代码
  const [value, setvalue] = useState(true)
  const toggle = () => setvalue(!value)
  //哪些状态和回调函数需要在其他组件中使用 return
  return {
    value,
    toggle
  }
}
//封装自定义函数的思路
//1、声明一个以use打头的函数
//2、在函数体内封装可复用的逻辑（只要是可复用的逻辑）
//3、把组件中用到的状态或者回掉return出去
//4、在那个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用
function App(){
  const {value,toggle} = useToggle()

  return (
    <div>
      {value && <div> this is div</div>}
        <button onClick={toggle}>toggle</button>
      </div>
  )

}
export default App

2、使用useState让函数保存状态

//使用useState让函数组件保存状态
import { useState } from "react"

function App(){

  const[count,setCount] = useState(0); 
  const[person,setPerson] = useState({name:'谢健强',age:'22'})

  function handleCount(){
    setCount(()=>{
      return count+1  
    })
    document.title =  count
  }
  return (
    <div>
      <span>{count} {person.name} {person.age}</span>
      <button onClick={handleCount}>+1 </button>
      <button onClick={()=>setPerson({...person,name:'xjq'})}>setPerson</button>
    </div>
  )
}
export default App

其实这种方法在前两天的学习中也接触过了，今天只是更系统的再看了一下

3、useReducer,另一种函数组件保存界面

//useReducer另一种用函数组件保存界面
import { useReducer } from "react"
function App(){
  function reducer(state,action){
    switch(action.type){
      case 'increment':   
        return state + 1;
      case 'decrement':
        return state -1;
      default:
        return state;
    }

  }
  const [count , dispatch] = useReducer(reducer,0)
  return (
    <div>
      <button onClick={() => dispatch({ type: 'decrement'})}>-1</button>
      <span>{count}</span>
      <button onClick={() => dispatch({type:'increment'})}>+1</button>

    </div>
  )
}
export default App

4、useContext，这个和上一篇文章的组件通讯内容相似

//在跨组件层级获取数据时简化获取数据的代码，也可用于组件通讯
import { createContext,useContext} from "react"
const countContext = createContext()
function App(){
  return <countContext.Provider value={100}>
    <Foo />
  </countContext.Provider>

}
function Foo(){
  const value = useContext(countContext)
  return <div>Foo:{value}</div>

}
export default App

5、useEffect：让函数组件拥有处理副作用的能力，类似生命周期函数

//useEffect：让函数组件拥有处理副作用的能力，类似生命周期函数

import React,  { useState,useEffect } from "react"
import ReactDOM from "react-dom";
function App(){
  const [count,setCount] = useState(0);
  //组件挂载完成之后执行 组件数据更新完成之后执行
  // useEffect(()=>{
  //   console.log('123');
  // })
  //组件挂载完成之后执行
// useEffect(()=>{
//   console.log('123');

// },[])

//组件被卸载之前执行
useEffect(()=>{
  return () => {
    console.log('组件被卸载了');
  }
})

  return (
    <div>
      <span>{count}</span>
      <button onClick={()=>setCount(count+1)}>+1</button>
      <button onClick={() => ReactDOM.unmountComponentAtNode(document.getElementById('root'))}>卸载组件</button>
    </div>
  )

}
export default App

今天Hooks就暂时学到这里，然后5点开始在看html的一些内容