React学习笔记整理

1、高频场景

yarn global add create-react-app （全局安装一次）

create-react-app my-app 构建react项目

const count = 100

// 定义函数

function getName(){

  return "jack"

}

function App () {

  return (

    <div className="App">

        {/*1、 {使用引号传递字符串} */}

        {'this is message'}

        {/* 2、识别js变量 */}

        {count}

        {/* 3、{函数调用} */}

        {getName()}

        {/*4、 {方法调用} */}

        {new Date().getDate()}

        {/*5、使用javaScript对象 */}

        <div style={{color:'red'}}>this is color</div>

    </div>

  )

}

 

2、JSX实现列表渲染

const list = [

  {id:1001,name:"Vue"},

  {id:1002,name:"React"},

  {id:1003,name:"Java"},

]

function App () {

  return (

    <div className="App">

       {/* {渲染列表} */}

       <ul>

        {list.map(item=><li key={item.id}>{item.name}</li>)}

       </ul>

    </div>

  )

}

3、JSX中实现条件渲染

const isLogin = true

function App () {

  return (

    <div className="App">

     {/* {逻辑与&&} 控制元素的显示隐藏：true显示*/}

     {isLogin && <span>this is span</span>}

     {/* 三元运算 */}

     {isLogin ? <span>jack</span> : <span>loading...</span>}

    </div>

  )

}

4、JSX中实现复杂条件渲染

const articleType = 1 //0,1,2

// 定义核心函数（根据文章类型返回不通的JSX模板

function getArticleTem(){

  if(articleType===0){

    return <div>我是无图文章</div>

  }else if(articleType===1){

    return <div>我是单图模式</div>

  }else{

    return <div>我是三图模式</div>

  }

}

function App () {

  return (

    <div className="App">

     {/* {调用函数渲染不同模板} */}

     {getArticleTem()}

    </div>

  )

}

5、React基础事件绑定

语法：on+事件名称={事件处理程序}

function App () {

  // 事件处理函数/拿到事件函数参数e

  // const handleClick = (e)=>{

  //   console.log('button被点击了',e)

  // }

  // 传递自定义参数

  const handleClick = (name，e)=>{

    console.log('button被点击了',name)

  }

  return (

    <div className="App">

      {/* 绑定事件 */}

      <button  onClick={handleClick}>click me</button>

      <button  onClick={(e)=>handleClick('jack',e)}>click me</button>

    </div>

  )

}

 6、自定义组件

// 定义组件
function Button(){
  // 业务逻辑组件逻辑
  return <button>click me!</button>
}
// 箭头函数
const Button = ()=>{
  return <button>click me</button>
}
function App () {
  return (
    <div className="App">
     {/* 使用 自闭合 */}
     <Button/>
    </div>
  )
}

 7、useState基础使用（修改对象）

1. useState是一个函数，返回值是一个数组
2. 数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3. useState的参数将作为count的初始值

import {useState} from 'react'
function App () {
  // 1、调用useState添加一个状态变量
  // count状态变量；setCount修改状态变量方法
  const [count,setCount] = useState(0)
  // 2、点击事件回调函数
  const handleClick = ()=>{
//修改count值，重新渲染count值
    setCount(count+1)
  }
  return (
    <div className="App">
      {/* 绑定事件 */}
     <button onClick={handleClick}>{count}</button>
    </div>
  )
}
 // 修改对象状态
  const [from,setForm] =useState({name:'jack'})
  const changeForm=()=>{
    setForm({
      name:'zhangsan'
    })
  }
  return (
    <div className="App">
      {/* 绑定事件 */}
     <button onClick={changeForm}>修改{from.name}</button>
    </div>
  )
}

 8、组件基础样式方案

1. 行内样式
2. Class类名控制

 9、表单双向绑定

// 表单受控（双向绑定）
// 1、声明一个react状态=useState
import { useState } from "react"
// 2、核心绑定流程
// （1）通过value属性绑定react状态
// （2）绑定onChange事件，通过事件参数e拿到输入框最新值 反向修改到react状态
function App () {
  const [value,setValue] = useState('')
  return (
    <div> 
      {/* 表单输入框 并绑定vlaue和注册事件onchange */}
      
      <input value={value} type="text" onChange={(e)=>setValue(e.target.value)}></input>
    </div>
  )
}

 10、React中获取/操作DOM元素

使用useRef钩子函数，步骤：

Const inputRef = useRef(null)

<input type=”text” ref={inputRef}/>

// React 中获取Dom
// 1、useRef生成ref对象，绑定到dom标签身上去
// 2、dom可用时，ref.current获取dom(渲染完毕之后dom生成之后才可用)
import { useState } from "react"
function App () {
  const inputRef = useRef(null)
  // 声明点击事件
  const showDom=()=>{
    console.dir(ref.current)
  }
  return (
    <div> 
      <input type="text"  ref={inputRef}></input>
      <button  onClick={showDom}>获取到dom</button>
    </div>
  )
}

11、组件通信

// 父传子
// 定义son组件
// 1、子组件标签上绑定数据
// 2、子组件接受参数，props
function Son(props){
  // props是一个对象
  return <div>this is Son {props.name}</div>
}

function App () {
  const name='this app name'
  return (
    <div> 
      {/* 父组件中引入子组件 */}
     <Son name={name}></Son>
    </div>
  )
}

// 子传父
function Son({onGetSonMsg}){
  const sonMsg="this is son msg"
  return (
  <div>
    this is Son
    <button onClick={()=>onGetSonMsg(sonMsg)}>sendMsg</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}></Son>
    </div>
  )
}

 12、Context机制跨层级组件通信

步骤：1、使用createContext方法创建一个上下文对象Ctx

1. 在顶层组件App中通过Ctx.Provider组件提供数据
2. 在底层组件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 component
      <B />
    </div>
  )
}
function B() {
  // 3. 在底层组件 通过useContext钩子函数使用数据
  const msg = useContext(MsgContext)
  return (
    <div>
      this is B compnent,{msg}
    </div>
  )
}

function App() {
  const msg = 'this is app msg'
  return (
    <div>
      // 2. 在顶层组件 通过Provider组件提供数据
      {/* value属性提供数据 */}
      <MsgContext.Provider value={msg}>
        this is App
        <A />
      </MsgContext.Provider>

    </div>
  )
}

13、useEffect,用于react不是由事件引起而是由渲染本身引起的操作。比如发送Ajax，操作DOM

import { useEffect, useState } from "react"

const URL = 'http://geek.itheima.net/v1_0/channels'

function App () {
  // 创建状态数据
  const [list,setList]=useState('')
 useEffect(()=>{
  // 额外操作 获取频道列表
   async function getList(){
    // 调用后端接口
     const res= await fetch(URL)
    //  转json对象
    const jsonRes = await res.json()
    console.log(list)
    setList(jsonRes.data.channels)
    }
    // 调用函数发送请求
    getList()
 },[])
  return (
    <div>
      this is app
      <ul>
        {list.map(item=><li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}



useEffect(()=>{
    // 实现副作用操作逻辑
    return ()=>{
      // 清除副作用逻辑
    }
  },[])
例子：
import { useEffect, useState } from "react"
function Son() {
  //  1、在渲染时开启定时器
  useEffect(() => {
    const timer=setInterval(() => {
      console.log("定时器执行中。。。。")
    }, 1000)
    // 清除副作用(组件卸载时)
    return ()=>{
      clearInterval(timer)
    }
  }, [])
  return <div>this is son</div>
}

function App() {
  // 通过条件渲染模拟组件卸载
  const [show, setShow] = useState(true)
  return (
    <div>
      {show && <Son />}
      <button onClick={() => setShow(false)}>卸载Son组件</button>
    </div>
  )
}

 13、自定义Hook函数

注意：useState不能在组件外使用、在if、for、组件内部函数

/ 封装自定义Hook
// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用
// 解决思路: 自定义hook
import { useState } from "react"
// 封装自定义hook通用思路
function useToggle (){
  // 可复用逻辑代码
  const [value,setValue] = useState(true)
  const toggle = ()=>setValue(!value)
  // 把组件中用到的状态或者回调return出去（以对象或者数组）
  return {
    value,
    toggle,
  }
}
// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
// 4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用
function App () {
  // 调用函数解构数据
  const {value,toggle} = useToggle()
  return (
    <div>
      {value &&  <div>this is div</div>}
      <button  onClick={toggle}>toggle</button>
    </div>
  )
}