import React, { memo, useState } from 'react'

function App() {
    const [count, setCounter] = useState(0)
    console.log("count", count)
    console.log("setCounter", setCounter)
    return (
        <div>
            <h2>count:{count}</h2>
            {/**
             * 注意：onClick传入的是一个函数，setCounter(count+1)是一个函数的调用，所以这里只能使用箭头函数，在函数调用里调用setCounter
             */}
            {/* <button onClick={setCounter(count+1)}>+1</button> */}
            <button onClick={()=>{setCounter(count+1)}}>+1</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useEffect, useState } from 'react'

function App() {
    const [count, setCounter] = useState(0)
    useEffect(()=>{
        console.log("监听redux中的数据变换，监听eventBus中的事件")
    })
    return (
        <div>
            <h2>count:{count}</h2>
            <button onClick={()=>{setCounter(count+1)}}>+1</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useEffect, useState } from 'react'

function App() {
    const [count, setCounter] = useState(0)
    useEffect(()=>{
        console.log("监听redux中的数据变换，监听eventBus中的事件")
        return ()=>{
            console.log("清除监听redux中的数据变换，清除监听eventBus中的事件")
        }
    })
    useEffect(()=>{
        console.log("获取网络请求")
    })
    return (
        <div>
            <h2>count:{count}</h2>
            <button onClick={()=>{setCounter(count+1)}}>+1</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useEffect, useState } from 'react'

function App() {
    const [count, setCounter] = useState(0)
    const [message, setMessage] = useState("Hello!")
    useEffect(()=>{
        console.log("监听redux中的数据变换，监听eventBus中的事件")
        return ()=>{
            console.log("清除监听redux中的数据变换，清除监听eventBus中的事件")
        }
    },[count])
    return (
        <div>
            <h2>count:{count}</h2>
            <h2>message:{message}</h2>
            <button onClick={()=>{console.log("加count");setCounter(count+1)}}>+1</button>
            <button onClick={()=>{console.log("修改message");setMessage("你哈个锤子")}}>修改message</button>
        </div>
    )
}
export default memo(App)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter } from 'react-router-dom';
import { ColorContext, BgrContext } from './Context';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <ColorContext.Provider value={{color:"red"}}>
    <BgrContext.Provider value={{fontSize:36}}>
      <HashRouter>
        <App/>
      </HashRouter>
    </BgrContext.Provider>
  </ColorContext.Provider>
);

import React, { memo, useContext, useEffect, useState } from 'react'
import { ColorContext, BgrContext } from './Context'


function App() {
    const colorContext = useContext(ColorContext)
    const bgrContext = useContext(BgrContext)
    return (
        <div>
            <h2 style={{color:colorContext.color,fontSize:bgrContext.fontSize}}>哈哈哈</h2>
        </div>
    )
}
export default memo(App)

import React, { memo, useReducer } from 'react'

const counterReducer = function(state, action){
    switch(action.type){
        case "increment":
            return {...state, counter:state.counter+1}
        case "decrement":
            return {...state, counter:state.counter-1}
        case "addNum":
            return {...state, counter:state.counter+action.num}
        case "decNum":
            return {...state, counter:state.counter-action.num}
    }
}
function App() {
    const [state, dispatch] = useReducer(counterReducer,{message:"Hello!",counter:100})
    return (
        <div>
            <h2>当前计数：{state.counter}</h2>
            <button onClick={()=>{dispatch({type:"increment"})}}>+1</button>
            <button onClick={()=>{dispatch({type:"decrement"})}}>-1</button>
            <button onClick={()=>{dispatch({type:"addNum", num:5})}}>+5</button>
            <button onClick={()=>{dispatch({type:"decNum", num:10})}}>-10</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useCallback, useState } from 'react'
import ChildComponent from './component/ChildComponent'

function App() {
    const [count, setCount] = useState(100)
    const [message, setMessage] = useState(22)
    const changeCount = ()=>{
        console.log("修改count")
        setCount(count+1)
    }
    const changeMessage = ()=>{
        console.log("修改message")
        setMessage(Math.round())
    }
    return (
        <div>
            <h2>当前计数：{count}</h2>
            <h2>Message：{message}</h2>
            <ChildComponent changeMessage={changeMessage}/>
            <button onClick={changeCount}>+1</button>
        </div>
    )
}
export default memo(App)

import React, { memo } from 'react'

function ChildComponent(props) {
    const {changeMessage} = props
    console.log("子组件刷新")
  return (
    <div>
        <button onClick={changeMessage}>子组件按钮修改Message</button>
    </div>
  )
}
export default memo(ChildComponent)

import React, { memo, useCallback, useState } from 'react'
import ChildComponent from './component/ChildComponent'

function App() {
    const [count, setCount] = useState(100)
    const [message, setMessage] = useState(22)
    const changeCount = useCallback(()=>{
        console.log("修改count")
        setCount(count+1)
    },[count])
    const changeMessage = useCallback(()=>{
        console.log("修改message")
        setMessage(Math.round())
    },[])
    return (
        <div>
            <h2>当前计数：{count}</h2>
            <h2>Message：{message}</h2>
            <ChildComponent changeMessage={changeMessage}/>
            <button onClick={changeCount}>+1</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useCallback, useState } from 'react'
import ChildComponent from './component/ChildComponent'

function App() {
    const [count, setCount] = useState(100)
    function changeCount(){
        console.log("修改count")
        setCount(count+1)
    }
    function foo(information){
        console.log("生成information")
        return {...information,message:"helloWorld"}
    }
    const information = foo({message:message})
    return (
        <div>
            <h2>当前计数：{count}</h2>
            <h2>Message：{information.message}</h2>
            <ChildComponent information={information}/>
            <button onClick={changeCount}>+1</button>
        </div>
    )
}
export default memo(App)

import React, { memo } from 'react'

function ChildComponent(props) {
    const {information} = props
    console.log("子组件刷新")
  return (
    <div>
        <h3>子组件：{information.message}</h3>
    </div>
  )
}
export default memo(ChildComponent)

import React, { memo, useMemo, useState } from 'react'
import ChildComponent from './component/ChildComponent'

function useFoo(message){
    const res = useMemo((message)=>{
        console.log("生成information")
        return {message:message+"修改后"}
    },[message])
    return res
}
function App() {
    const [count, setCount] = useState(100)
    const [message, setMessage] = useState("helloWorld")
    function changeCount(){
        console.log("修改count")
        setCount(count+1)
    }
    let information = useFoo(message)
    return (
        <div>
            <h2>当前计数：{count}</h2>
            <h2>Message：{message}</h2>
            <ChildComponent information={information}/>
            <button onClick={changeCount}>+1</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useRef} from 'react'
function App() {
    const inputRef = useRef()
    const buttonClick = ()=>{
        console.log(inputRef.current)
        inputRef.current.focus()
    }
    return (
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick={buttonClick}>修改</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useCallback, useRef, useState} from 'react'
function App() {
    const [count,setCount] = useState(0)
    const buttonClick = useCallback(function(){
        console.log("+1",count+1)
        setCount(count+1)
    },[])
    const inputRef = useRef()
    inputRef.count = count
    const buttonClick1 = useCallback(function(){
        console.log("-1",inputRef.count-1)
        setCount(inputRef.count-1)
    },[])
    return (
        <div>
            <h2>count:{count}</h2>
            <button onClick={buttonClick}>+1</button>
            <button onClick={buttonClick1}>-1</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useRef, useState} from 'react'
import ChildComponent from './component/ChildComponent'
function App() {
    const inputRef = useRef()
    const buttonClick = ()=>{
        console.log(inputRef.current)
        inputRef.current.focus()
        inputRef.current.value = ""
    }
    return (
        <div>
            <ChildComponent ref = {inputRef}/>
            <button onClick={buttonClick}>showref</button>
        </div>
    )
}
export default memo(App)

import React, { forwardRef, memo } from 'react'

function ChildComponent(props, ref) {
  return (
    <div>
        <input type="text" ref={ref}/>
    </div>
  )
}
export default memo(forwardRef(ChildComponent))

import React, { forwardRef, memo, useImperativeHandle, useRef } from 'react'

function ChildComponent(props, ref) {
    const inputRef = useRef()
    useImperativeHandle(ref, ()=>{
        return {
            focus:()=>{
                inputRef.current.focus()
            }
        }
    })
    return (
        <div>
            <input type="text" ref={inputRef}/>
        </div>
    )
}
export default memo(forwardRef(ChildComponent))

import React, { memo, useEffect, useLayoutEffect} from 'react'
function App() {
    useEffect(()=>{
        console.log("useEffect")
    })
    useLayoutEffect(()=>{
        console.log("useLayoutEffect")
    })
    console.log("render app")
    return (
        <div>
            <h2>哈哈哈</h2>
        </div>
    )
}
export default memo(App)

import React, { memo, useEffect, useState} from 'react'
function App() {
    const [count, setCount] = useState(10)
    useEffect(()=>{
        if(count===0){
            setCount(10)
        }
        console.log("useEffect",count)
    }, [count])
    console.log("render app")
    function buttonClick(){
        setCount(count-1)
    }
    return (
        <div>
            <h2>count:{count}</h2>
            <button onClick={buttonClick}>-1</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useLayoutEffect, useState} from 'react'
function App() {
    const [count, setCount] = useState(10)
    useLayoutEffect(()=>{
        if(count===0){
            setCount(10)
        }
        console.log("useEffect",count)
    }, [count])
    console.log("render app")
    function buttonClick(){
        setCount(count-1)
    }
    return (
        <div>
            <h2>count:{count}</h2>
            <button onClick={buttonClick}>-1</button>
        </div>
    )
}
export default memo(App)

import React, { memo, useLayoutEffect, useState} from 'react'
import { connect } from 'react-redux';
import { addCountAction } from './stero/countSlice';

function App(props) {
    const {count, addCount} = props
    function buttonCLick(){
        addCount(3)
    }
    return (
        <div>
            <h2>count:{count}</h2>
            <button onClick={buttonCLick}>+3</button>
        </div>
    )
}

function mapStateToProps(state){
    return {
        count:state.counter.count
    }
}
function mapAction20Props(dispatch){
    return {
        addCount(count){
            dispatch(addCountAction(count))

        }
    }
}
export default connect(mapStateToProps, mapAction20Props)(memo(App))

import React, { memo} from 'react'
import { useDispatch, useSelector } from 'react-redux';
import ChildComponent from './component/ChildComponent';
import { addCountAction } from './stero/countSlice';

function App(props) {
    console.log("App渲染")
    /**
     * useSelector的第一个参数为函数，其返回一个对象，会把这个返回对象作为useSelector的值
     */
    const {count} = useSelector((state)=>({
        count:state.counter.count
    }))
    /**
     * dispatch通过useDispatch直接获取，不再需要像
     */
    const dispatch = useDispatch()
    function buttonCLick(){
        dispatch(addCountAction(4))
    }
    return (
        <div>
            <h2>count:{count}</h2>
            <ChildComponent/>
            <button onClick={buttonCLick}>改变count</button>
        </div>
    )
}
export default memo(App)

import React, {  memo } from 'react'
import { useSelector } from 'react-redux'

function ChildComponent(props) {
    console.log("子组件渲染")
    const {message} = useSelector((state)=>({
        message:state.counter.message
    }))
    return (
        <div>
            <h2>子组件:{message}</h2>
        </div>
    )
}
export default memo(ChildComponent)

const {message} = useSelector((state)=>({
message:state.counter.message
}),shallowEqual)

const {count} = useSelector((state)=>({
count:state.counter.count
}),shallowEqual)

import React, { PureComponent } from 'react'
import { Routes, Route } from 'react-router-dom'
import Home from './components/Home'
import MyMusic from './components/MyMusic'
export default class App extends PureComponent {
  render() {
    return (
      <div>
        <h2>Header</h2>
        <div className="content">
            {/* 这里会con上往下匹配，直至匹配到一个结果，后续就不匹配了*/}
            <Routes>
                <Route path="/" element={<Home/>}/>
                <Route path="/my" element={<MyMusic/>}/>
            </Routes>
        </div>
      </div>
    )
  }
}

import React, { PureComponent } from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import Home from './components/Home'
import MyMusic from './components/MyMusic'
export default class App extends PureComponent {
  render() {
    return (
      <div>
        {/* 主要是通过路由的配置来更改当前页面的location，从而使下面的Routes匹配结果改变 */}
        <div className='header'>
            <Link to="/">发现音乐</Link>
            <br />
            <Link to="/my">我的音乐</Link>
        </div>
        <div className="content">
            {/* 这里会con上往下匹配，直至匹配到一个结果，后续就不匹配了*/}
            <Routes>
                <Route path="/" element={<Home/>}/>
                <Route path="/my" element={<MyMusic/>}/>
            </Routes>
        </div>
      </div>
    )
  }
}

import React, { PureComponent } from 'react'
import { Routes, Route, NavLink } from 'react-router-dom'
import Home from './components/Home'
import MyMusic from './components/MyMusic'
import "./index.css"
export default class App extends PureComponent {
  render() {
    return (
      <div>
        {/* 主要是通过路由的配置来更改当前页面的location，从而使下面的Routes匹配结果改变 */}
        <div className='header'>
            <NavLink to="/">发现音乐</NavLink>
            <br />
            <NavLink to="/my">我的音乐</NavLink>
        </div>
        <div className="content">
            {/* 这里会con上往下匹配，直至匹配到一个结果，后续就不匹配了*/}
            <Routes>
                <Route path="/" element={<Home/>}/>
                <Route path="/my" element={<MyMusic/>}/>
            </Routes>
        </div>
      </div>
    )
  }
}

import React, { PureComponent } from 'react'
import { Routes, Route, NavLink } from 'react-router-dom'
import Home from './components/Home'
import MyMusic from './components/MyMusic'
export default class App extends PureComponent {
  render() {
    return (
      <div>
        {/* 主要是通过路由的配置来更改当前页面的location，从而使下面的Routes匹配结果改变 */}
        <div className='header'>
            {/* 这里给style传入的函数，返回的一个对象，而且会自动传入一个包含isActive的参数，可以通过解构出isActive用于逻辑判断 */}
            <NavLink to="/" style={({isActive})=>{ return isActive?{color:"red",fontSize:24}:{}}}>发现音乐</NavLink>
            <br />
            <NavLink to="/my"  style={({isActive})=>{ return isActive?{color:"red",fontSize:24}:{}}}>我的音乐</NavLink>
        </div>
        <div className="content">
            {/* 这里会con上往下匹配，直至匹配到一个结果，后续就不匹配了*/}
            <Routes>
                <Route path="/" element={<Home/>}/>
                <Route path="/my" element={<MyMusic/>}/>
            </Routes>
        </div>
      </div>
    )
  }
}

import React, { PureComponent } from 'react'
import { Routes, Route, NavLink } from 'react-router-dom'
import Home from './components/Home'
import MyMusic from './components/MyMusic'
import "./index.css"
export default class App extends PureComponent {
  render() {
    return (
      <div>
        {/* 主要是通过路由的配置来更改当前页面的location，从而使下面的Routes匹配结果改变 */}
        <div className='header'>
            <NavLink to="/" className={({isActive})=>{ return isActive?"nav-active one":"one"}}>发现音乐</NavLink>
            <br />
            <NavLink to="/my"  className={({isActive})=>{ return isActive?"nav-active two":"two"}}>我的音乐</NavLink>
        </div>
        <div className="content">
            {/* 这里会con上往下匹配，直至匹配到一个结果，后续就不匹配了*/}
            <Routes>
                <Route path="/" element={<Home/>}/>
                <Route path="/my" element={<MyMusic/>}/>
            </Routes>
        </div>
      </div>
    )
  }
}

import React, { PureComponent } from 'react'
import { Routes, Route, NavLink, Navigate } from 'react-router-dom'
import Home from './components/Home'
import MyMusic from './components/MyMusic'
import "./index.css"
export default class App extends PureComponent {
  render() {
    return (
      <div>
        {/* 主要是通过路由的配置来更改当前页面的location，从而使下面的Routes匹配结果改变 */}
        <div className='header'>
            <NavLink to="/" className={({isActive})=>{ return isActive?"nav-active one":"one"}}>发现音乐</NavLink>
            <br />
            <NavLink to="/my"  className={({isActive})=>{ return isActive?"nav-active two":"two"}}>我的音乐</NavLink>
        </div>
        <div className="content">
            {/* 这里会con上往下匹配，直至匹配到一个结果，后续就不匹配了*/}
            <Routes>
                <Route path='/' element={<Navigate to="/home"/>}/>
                <Route path="/home" element={<Home/>}/>
                <Route path="/my" element={<MyMusic/>}/>
            </Routes>
        </div>
      </div>
    )
  }
}