与react的初定情素

前要：

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

基本表达式{}

{'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

Redux

vuex

https://www.cnblogs.com/datiangou/p/10161767.html

Router

npm i react-router-dom

//router.js

import Login from '../pages/login/login'
import Index from '../pages/indexModule/index'
import About from '../pages/indexModule/about/about'

import NoFound from '../pages/noFound'

import { createBrowserRouter,createHashRouter } from 'react-router-dom'

const router = createHashRouter([
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/index',
        element: <Index />,
        Children: [
            {
                path: '/about',
                element: <About />
            },
        ]
    },
    {
        path: '*',
        element: <NoFound />
    }
])

export default router

//index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import router from './router/router'
import { RouterProvider } from 'react-router';

import store from './store'
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <RouterProvider router={router}></RouterProvider>

        {/* <Provider store={store}>
            <App />
        </Provider> */}
    </React.StrictMode>
);

//login.js

import { useNavigate } from "react-router";

const Login = () => {
    const navigate = useNavigate()
    return (
        <div>登录页
            <button onClick={() => navigate("/index?id=123&name=xxx")}>跳转Index</button>
        </div>
    )
}
export default Login

//indexModule/index.js

import { useSearchParams, Outlet } from 'react-router-dom'
import { useNavigate } from "react-router";

const Index = () => {
    const [params] = useSearchParams()
    const id = params.get('id')

    const navigate = useNavigate()

    return (
        <div>首页{id}
            <button onClick={() => navigate("/about?id=456&name=yyy")}>跳转Index二级页面</button>

            {/* 二级路由的出口 */}
            <Outlet />
        </div>
    )
}
export default Index

//about.js

const About = () => {
    return (
        <div>二级嵌套页面</div>
    )
}
export default About