react基础react hooks的基本使用

React16.8的新增特性，可以让你在不写class的情况下使用state等react特性；

hooks是对函数式组件的极大加强，3个基础的hook：状态、作用和上下文

状态(State)： useState，状态和它隐藏的行为，构成UI

import React, { useState } from 'react'

export default () => {

    const [count, setCount] = useState(0)
    //     状态 ， 行为         hooks的api

return (
    <div>
        Your count: { count }
        <button onClick={ () => setCount(count+1)}>添加</button>
    </div>
)
}

作用（Effect）：useEffect，客观存在输入和输出之外的东西（改变URL、改变环境）

客观的情况下有url、计时器、logger等做不到王没而存精的functional的视图渲染

相同（或类似）的作用进行复用，useEffect

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

export default () => {

    const [count, setCount] = useState(0)
    //     状态 ， 行为         hooks的api
    // useEffect依赖的[]发生改变，就执行，如果[]为空，则执行一次；这里就是依赖count发生改变时要行
    useEffect(() => {
        console.log(count)
    }, [count])
return (
    <div>
        Your count: { count }
        <button onClick={ () => setCount(count+1)}>添加</button>
    </div>
)
}

上下文(Context)：理解事物需要了解的背景知识

userReducer：

import React, { userReducer } from 'react'

function reducer(state, action) {
    // 和reducer.js处理的方式一致
    if(action.type === 'test'){
        
        return state
    }
}

export default () => {

    const [count, dispatch] = useReducer(reducer,0)
return (
    <div>
        Your count: { count }
        // 派送action
        <button onClick={ () => dipatch({type: 'test'})}>添加</button>
    </div>
)
}

userRef：引用React管理以外的对象，需要在React之外做一些事情，列如： focus、媒体对象等, 通常搭配useEffect，同时还可以用于 方便的保存值

拿去到对应的dom对象

import React, { useRef } from 'react'

export default function UseRefExample() {
    const refTnput = useRef()
    return (
        <div>
            <input ref={refInput}/>
            <button onClick={() => {refInput.current.focus()}}>Focus</button>
        </div>
    )
}

useRef保存值