Hooks [16.8]

作用：给函数组件添加了生命周期和state

1.useState() 状态钩子

作用：给函数组件添加状态。

语法：

  import React, { useState } from 'react'

  const [name, setName] = useState('妲己')

注意：

 const del=(index)=>{
     arr.splice(index,1)
     // 注意：修改引用类型，需要赋值一个拷贝后的数据。
     setArr([...arr])
 }

2.hooks必须在函数组件中才能使用，而且函数组件的名字首字母要大写。

2.useEffect()  副作用钩子函数

作用：给函数组件添加生命周期。

语法：

 useEffect(()=>{
     return ()=>{}
 },[])

情景1： componentDidMount+componentDidUpdate(所有数据变了)

 useEffect(() => {
     console.log("该函数执行了");
     document.title = '你点击了' + n + "次"
 })

情景2：componentDidMount+componentDidUpdate(只有依赖的n变了)

 useEffect(() => {
     console.log("该函数执行了");
     document.title = '你点击了' + n + "次"
 },[n])

情景3：componentDidMount

 useEffect(() => {
     console.log("该函数执行了");
     document.title = '你点击了' + n + "次"
 
 },[])

情景4：componentDidMount+componentWillUnmount

  useEffect(()=>{
         console.log("加载完成");
         let time=setInterval(()=>{
             setDate(new Date())
         },1000)
 
         //return 的函数就是componentWillUnmount
         return ()=>{
             console.log("销毁之前");
             clearInterval(time)
         }
     },[])

3.useReducer() action钩子函数

场景：如果一个组件状态很多，我们希望在组件之外管理状态，那么就需要useReducer.

reducer.js

export const initState = {
    name: "妲己",
    age: 20,
   
}

//修改state 
export const reducer = (state, action) => {
    switch (action.type) {
        case "changeName":
            //action={type:"changeName",name:'貂蝉'}
            return {
                ...state,
                name: action.name
            }
            break;
        case "changeAge":
            //action={type:"changeAge",age:200}
            return {
                ...state,
                age: action.age
            }
            break;
       
        default:
            return state;
    }
}

组件内通过useReducer() 初始化state和dispatch

import React, { useReducer } from 'react'
import { initState, reducer } from "./reducer"

const [state, dispatch] = useReducer(reducer, initState)

4.useContext() 共享钩子函数

场景：父组件有数据给后代的子组件，如果不用useContext(),我们需要父传子，子传子的子组件，一直下传递，不方便。如果使用useContext(),那么可以直接在父组件传递，子组件的子组件直接接收。

父组件

import React, { useState } from 'react'
import Child from './Child'
// 1.创建一个Context对象
export const MyContext = React.createContext()
export default function Context() {
    const [name, setName] = useState('妲己')
    const [age, setAge] = useState(20)
    const [num, setNum] = useState(0)
    return (
        <div className='box'>
            <h3>useContext</h3>
            <button onClick={()=>setName('貂蝉')}>貂蝉</button>
            {/* 2.传递数据  */}
            <MyContext.Provider value={{ name: name, age: age, num: num }}>
                <Child></Child>
            </MyContext.Provider>

        </div>
    )
}

子组件：什么都没有做

import React from 'react'
import ChildChild from './ChildChild'

export default function Child() {
    return (
        <div className='box'>
            <h3>child</h3>
            <ChildChild ></ChildChild>
        </div>
    )
}

子组件的子组件：接收数据

import React, { useContext } from 'react'
// 3.引入MyContext 
import { MyContext } from "./Context"
export default function ChildChild(props) {
    // 4.通过useContext 取出数据 
    const {name,age,num} = useContext(MyContext)
   
    return (
        <div className='box'>
            <h3>子组件的子组件</h3>
            <div>name:{name}</div>
            <div>age:{age}</div>
            <div>num:{num}</div>
        </div>
    )
}