This website requires JavaScript.
en
hb

react-hook入门指南

学习react hook

最近着手react项目,那么第一步肯定是了解成型的最优解,我了解到写react最优解就是装饰器+hook+一些函数式编程,所以一步步实践,先把基础知识梳理下来方便后续遗忘翻阅

useState

可以传入值作为state的默认值,返回一个数组,数组的第一项是对应的状态(默认值会赋予状态),数组的第二项是更新状态的函数。

import React, { useState } from "react";
const Greeting = () => {
    const [count, setCount] = useState(0);      //第一次使用
    const [istrue, setIstrue] = useState(true); //第二次使用
    return (
       <>
            {istrue ? <h1> {count} </h1> : void 0}
            <button onClick={ () => {setIstrue(!istrue)}}>change</button>
            <button onClick={() => {setCount(count + 1)}}> + </button>
       </>
    )
}
export default Greeting;

useEffect

useEffect 这个方法传入一个函数作为参数,在函数里面执行副作用代码,并且 useEffect 的第一个参数还支持返回值为一个函数,这个函数执行相当于组件更新和卸载。函数的返回值相当于 componentWillUnmount,在 componentDidMountcomponentDidUpdate 中执行副作用

useEffect 的第二个参数是一个数组,表示以来什么 stateprops 来执行副作用。

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

const EffectComponent = () => {
    const [width, setWidth] = useState(window.innerWidth);
    const resizeHandle = () => {
        setWidth(window.innerWidth);
    }
    useEffect(() => {
        window.addEventListener("resize", resizeHandle);
        return () => {
            window.removeEventListener("resize", resizeHandle)
        }
    })
    return (
        <h1>{width}</h1>
    );
}
export default EffectComponent

数组为空的时候, useEffect 就相当于 componentDidMoubtcomponentWillUnmount 这两个生命周期,只在首次渲染和卸载的时候执行。

当数组中值是状态的时候,就会只监听这一个状态的变化。当然数组中可以多个值,监听存放 state 的变化。

const EffectComponent = () => {
    const [count, setCount] = useState(1);
    const [num, setNum] = useState(2);
    useEffect(() => {
        console.log("count状态更新");
        return () => {
            console.log("count卸载")
        }
    },[count])
    useEffect(() => {
        console.log("num状态更新");
        return () => {
            console.log("num卸载")
        }
    },[num])
    return (
        <>
            <h1>{count}</h1>
            <button onClick={() => {setCount(count + 1)}}>+</button>
            <h1>{num}</h1>
            <button onClick={() => {setNum(num + 1)}}>+</button>
        </>
    );
}

useContext

useContext 主要用于组件的传值问题, useContext Hook 接受一个 context 对象(由 createContext 创建的对象)作为参数,并返回 Context.Consumer

使用方式
import React, { createContext,useContext } from 'react'
let stateContext = createContext()
const ContextComponent = () => {
  const value = useContext(stateContext)
  return (
    <>
      <h1>{value}</h1>
    </>
  )
}
export default () => (
  <stateContext.Provider value={'Hello React'}>