React学习_day02

1.受控表单绑定

通过使用react组件的状态useState控制表单的状态

import { useState } from "react";
//2.核心绑定思想
//2.1.通过value属性绑定react状态
//2.2.绑定onChange事件，通过事件参数e拿到输入框最新的值，反向修改到react状态

function App(){
    //1.申明一个react状态 -UseState
    const [value,setValue]=useState('')

    return(
        <div>
            <input
            value={value}
            onChange={(e)=>setValue(e.target.value)}
            type="text"/>
        </div>
    )
}
export default App;

2.如何在React中获取DOM

在React组件中获取或者操作DOM，需要使用useRef钩子函数，分为两步

• （1）使用useRef创建ref对象，并与JSX绑定
• （2）在DOM可用时，通过inputRef.current拿到DOM对象

import { useRef } from "react";
//React中获取DOM
function App(){
//1.useRef生成ref对象，绑定在DOM标签上
//2.DOM可用时，ref.current获取DOM
//需要组件渲染完毕之后DOM生成之后才可用
const inputRef=useRef(null)
const showDom=()=>{
    console.log(inputRef.current)
    //展示显示有哪些属性或者方法
    console.dir(inputRef.current)
}
    return(
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick={showDom}>获取DOM</button>
        </div>
    )
}
export default App;

3.组件通信

概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法

3.1 父子通信

3.1.1父传子（A-B）

父传子通信-将父组件中的数据传递给子组件。

实现步骤：

• （1）父组件传递数据：在子组件标签上绑定属性
• （2）子组件接收数据：子组件通过props参数接收数据

//父传子
//2.子组件接收数据 props的参数
function Son(props){
    console.log(props)
    return(
        // {//props是一个对象，包括父组件中传过来的所有数据}
      <div>this is Son,{props.name}</div>  
    )
}
function App(){
    const name='this is app name'
    return(
        <div>
        {/*//1.父组件传递数据 子组件标签身上绑定属性 */}
        <Son name={name}/>
        </div>
    )
}
export default App;

props说明：

• （1）props可传递任意的数据，比如数字，字符串，数组，对象，函数，JSX
• （2）props是只读对象：子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件进行修改

        name={name}
        age={20}
        isTrue={false}
        list={['vue','react']}
        obj={{name:'jack'}}
        cb={()=>console.log(123)}
        child={<span>this is span</span>}

3.1.2子传父（B-A）

核心思路：在子组件中调用父组件中的函数并传递参数

import { useState } from "react"
//子传父
//核心思路：在子组件中调用父组件中的函数并且传递参数
function Son({onGetSonMsg}){
    const sonMsg='this is son msg'
    return(
        // {//props是一个对象，包括父组件中传过来的所有数据}
      <div>this is Son,
        <button onClick={()=>onGetSonMsg(sonMsg)}>send</button>
      </div>  
    )
}
function App(){
    const [msg,setMsg]=useState('')
    const getMsg=(msg)=>{
        console.log(msg)
        setMsg(msg)
        }
    return(
        <div>
        this is App,{msg}
        <Son onGetSonMsg={getMsg}

        />
        </div>
    )
}
export default App;

3.2 兄弟通信（B-C）

使用状态提升实现兄弟组件通信

实现思路：借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递

先B-A后A-C，即可实现B-C

import { useState } from "react"
//1.通过子传父将A的值传到父组件
//2.通过父传子将父组件中的值传入B
function A({onGetAName}){
    const name='this is A name'
    return(
        <div>
            this is A compnent,
            <button onClick={()=>onGetAName(name)}>send</button>
        </div>
    )
}
function B({name}){
    return(
        <div>
            this is B compnent,{name}
        </div>
    )
}


function App(){
    const [name,setName]=useState('')
    const getName=(name)=>{
        console.log(name)
        setName(name)
    }
    return(
        <div>
            <A onGetAName={getName}/>
            <B name={name}/>
        </div>
    )
}
export default App;

3.3 跨层通信（A-E）

使用context机制跨层级组件通信

实现步骤：

• （1）使用createContext方法创建一个上下文对象Ctx
• （2）在顶层组件App中通过Ctx.Provider组件提供数据
• （3）在底层组件（B）中通过useContext钩子函数获取消费数据

//App -> A -> B

import { createContext, useContext } from "react"

//1.使用createContext方法创建一个上下文对象
const MsgContext=createContext()
//2.在顶层组件 通过provider组件提供数据

//3.在底层组件 通过useContext钩子函数使用数据
function A(){
    return(
        <div>
            this is A compnent
            <B />
        </div>
    )
}

function B(){
    const msg=useContext(MsgContext)
    return(
        <div>
            this is B compnent,{msg}
        </div>
    )
}
function App(){
    const msg='this is app msg'
    return(
        <div>
            <MsgContext.Provider value={msg}>
            <h1>this is App</h1>
            <A />
            </MsgContext.Provider>
        </div>
    )
}
export default App;

4.useEffect的使用

概念：useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送AJAX请求，更改DOM等等

import { useEffect, useState } from "react";
const URL='http://geek.itheima.net/v1_0/channels'

function App(){
    const [list,setList]=useState([])
    useEffect(()=>{
        //额外的操作 获取频道列表
        //自定义一个函数getList
        async function getList(){
        const res=await fetch(URL)
        const jsonRes=await res.json()
        console.log(jsonRes)
        setList(jsonRes.data.channels)
        }
        getList()
    },[])
    return(
        <div>
            this is App
            <ul>
                {list.map(item=><li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    )
}
export default App;

5.useEffect--清除副作用

        return()=>{
            //清除副作用(组件卸载时)
            clearInterval(timer)
        }

function Son(){
    //1.渲染时开启一个定时器
    useEffect(()=>{
        const timer=setInterval(()=>{
            console.log('定时器执行中......')
        },1000)
        return()=>{
            //清除副作用(组件卸载时)
            clearInterval(timer)
        }
    },[])
}

6.自定义Hook函数

概念：自定义Hook是以use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用

function useToggle(){
    //可复用的逻辑代码
    const[value,setValue]=useState(true)
    const toggle=()=>setValue(!value)
    //哪些状态和回调函数需要在其他组件中使用， return
    return{
        value,
        toggle
    }
}

 在App组件中接收

const {value,toggle}=useToggle()

React Hooks使用规则：

使用规则：

• （1）只能在组件中或者其他自定义Hook函数中调用
• （2）只能在组件的顶层调用，不能嵌套在if、for、其他函数中