与react的初定情素

在这里插入图片描述
前要：

努力打好基础才能学好它！由于我使用vue已经3年了！来学习react，所以我写的只要我自己看得懂的就行！学这我自己会与vue的语法做对比的！

目录概览

- 基本表达式{}
- 列表渲染
- 条件渲染
- 事件的绑定
- 组件
- useState Hook函数
- 样式
- classnames工具化类名控制
- 获取DOM
- 工具库
- 组件通信
- useEffect
- 封装自定义Hook函数
- Redux

基本表达式{}

{'aaa'}
{count}
{getName()}
{new Date().getDate()}
<div style={{ color:"red"}}>ssss</div>

列表渲染

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

条件渲染

{flag && <span>111</span>}
{flag ? <span>111</span>:<span>222</span>}

const flag = 0;
function getFlag(){
  if(flag === 0){
    return <div>111</div>
  }else if(flag === 1){
    return <div>222</div>
  }else{
    return <div>333</div>
  }
}

function App() {
  return (
    <div className="App">
      {getFlag()}
    </div>
  )
}

export default App

事件的绑定

function App() {
  const clickItem = (name,e) =>{
    console.log(e,name)
  }
  return (
    <div className="App">
      <button onClick={(e) => clickItem('参数',e)}>点击</button>
    </div>
  )
}

export default App

组件

// function Button(){
const Button = () => {
  return <button>点击</button>
}

function App() {
  return (
    <div className="App">
      <Button/>
    </div>
  )
}

export default App

useState Hook函数

import {useState} from 'react'

function App() {
  // state的视图值与setstate是相互绑定的，两个是可以自定义的
  const [state, setstate] = useState(0);
  const handeClick = () =>{
    setstate(state + 1)
  }
  return (
    <div className="App">
      <button onClick={handeClick}>{state}</button>
    </div>
  )
}

export default App

在这里插入图片描述

样式

const commstyle = {
  color:"red",
  fontSize:'10px'
}

function App() {
  return (
    <div className="App">
      <div style={{ color:"red",fontSize:'10px'}}>ssss</div>
      <div style={commstyle}>ssss</div>

      <div className="foot">ssss</div>
    </div>
  )
}

export default App

classnames工具化类名控制

npm install classnames

import className from 'classnames'

function App() {
  return (
    <div className="App">
      <div>
        {list.map(item => 
          <span
             key={item.id}
             onClick={() => hangClick(item.id)}
             className={className('nav-item',{active: type === item.type})}>
             {item.text}</span>)}
      </div>
    </div>
  )
}

export default App

获取DOM

import { useRef } from 'react'

function App() {
  const refInput = useRef(null)
  const getDome = () =>{
    console.log(refInput.current)
  }
  return (
    <div className="App">
      <input ref={refInput} type="text"></input>
      <button onClick={getDome}>获取dome</button>
    </div>
  )
}

export default App

工具库

dayjs
uuid

组件通信

// 父传子
function Son(props){
  return <div>{props.name}{props.list[0].text}</div>
}

function App() {
  const name = '111'
  const list = [{text:88},{text:2}]
  return (
    <div className="App">
      <Son
        list={list} 
        name={name}/>
    </div>
  )
}

export default App

// 子传父
import { useState } from 'react'

function Son({onSetSonMsg}){
  const sonMsg = '88888'
  return <div>
    <button onClick = { () => onSetSonMsg(sonMsg)}>点击传值</button>
  </div>
}

function App() {
  const [ msg , setMsg ] = useState('')
  const getMsg = (msg) =>{
    console.log(msg)
    setMsg(msg)
  }
  return (
    <div className = "App">
      {msg}
      <Son onSetSonMsg = {getMsg}/>
    </div>
  )
}

export default App

// "状态提升"兄弟组件之间通讯
import { useState } from 'react'

function A({onGetAName}){
  const name = '88888'
  return <div>A组件：
    <button onClick = { () => onGetAName(name)}>点击传值</button>
  </div>
}

function B({name}){
  return <div>B组件：{name}</div>
}

function App() {
  const [ name , setName] = useState('')
  const getAName = (name) =>{
    console.log(name)
    setName(name)
  }
  return (
    <div className = "App">
      <A onGetAName = {getAName}/>
      <B name = {name}/>
    </div>
  )
}

export default App

// Context机制跨层级组件通信
//App -> A -> B
import { useState,createContext, useContext } from 'react'
const MsgContext = createContext();

function A(){
  return <div>A组件：<B /> </div>
}

function B(){
  const msg = useContext(MsgContext)
  return <div>B组件：{msg}</div>
}

function App() {
  const msg = "88888"

  return (
    <div className = "App">
      <MsgContext.Provider value={msg}>
        App组件：
        <A />
      </MsgContext.Provider>
    </div>
  )
}

export default App

在这里插入图片描述

useEffect

在这里插入图片描述
没有传依赖时：组件初始渲染+组件更新时执行
传空数组时：只在初始渲染时执行一次
加特定项时：组件初始渲染+特定依赖变化时执行

import { useState,useEffect } 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)
      const jsonRes = await res.json()
      setList(jsonRes.data.channels)
    }
    getList()
    return () => {
      //清除副作用
    }
  }, [])

  return (
    <div className = "App">
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}

export default App

封装自定义Hook函数

react Hook不能在函数外部、组件外使用，不能在条件语句中使用！

import { useState } from 'react'

function useToggle() {
  const [value, setValue] = useState(true)
  const toggle = () => setValue(!value)
  return {
    value,
    toggle
  }
}

function App() {
  const {value, toggle} = useToggle()
  return (
    <div className="App">
      {value && <div>dome</div>}
      <button onClick={toggle}>点击</button>
    </div>
  )
}

export default App