react基础知识（二）

表单处理

受控组件：input框自己的状态被React组件状态控制

非受控组件：通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值

类组件生命周期

钩子 函数	触发时机	作用
constructor	创建组件时，最先执行，初始化的时候只执行一次	1. 初始化state  2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render	每次组件渲染都会触发	渲染UI（注意： 不能在里面调用setState() ）
componentDidMount	组件挂载（完成DOM渲染）后执行，初始化的时候执行一次	1. 发送网络请求   2.DOM操作
componentDidUpdate	组件更新后（DOM渲染完毕）	DOM操作，可以获取到更新后的DOM内容，不要直接调用setState
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）

常用hook

useState

为函数提供状态

import { useState } from 'react'
function App() {
  // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
  // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
  const [count, setCount] = useState(0)
  // 初始值需要计算后得到
  const [name, setName] = useState(()=>{   
  // 编写计算逻辑    return '计算之后的初始值'
})
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

useEffect

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（例如:手动修改DOM、数据请求、localstorage操作）

import { useEffect, useState } from "react"
const App = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    const timerId = setInterval(() => {
      setCount(count + 1)
    }, 1000)
    return () => {
      // 清除副作用
      clearInterval(timerId)
    }
  }, [count])
  return (
    <div>
      {count}
    </div>
  )
}

export default App

在useEffect中发送网络请求，并且封装同步 async await操作

// 不可以直接在useEffect的回调函数外层直接包裹 await ，因为异步会导致清理函数无法立即返回
useEffect(async ()=>{    
    const res = await axios.get('http://geek.itheima.net/v1_0/channels')   
    console.log(res)
},[])
// 正确写法：在内部单独定义一个函数，然后把这个函数包装成同步
useEffect(()=>{   
    async function fetchData(){      
       const res = await axios.get('http://geek.itheima.net/v1_0/channels')                            console.log(res)   
    } 
},[])

useRef

在函数组件中获取真实的dom元素对象或者是组件对象

import { useEffect, useRef } from 'react'
function App() {  
    const h1Ref = useRef(null)  
    useEffect(() => {    
        console.log(h1Ref)  
    },[])  
    return (    
        <div>      
            <h1 ref={ h1Ref }>this is h1</h1>    
        </div>  
    )
}
export default App

useContext

import { createContext, useContext } from 'react'
// 创建Context对象
const Context = createContext()

function Foo() {  
    return <div>Foo <Bar/></div>
}

function Bar() {  
    // 底层组件通过useContext函数获取数据  
    const name = useContext(Context)  
    return <div>Bar {name}</div>
}

function App() {  
    return (    
        // 顶层组件通过Provider 提供数据    
        <Context.Provider value={'this is name'}>     
            <div><Foo/></div>    
        </Context.Provider>  
    )
}

export default App