practise

practise/31.hook/01.useState的基础使用.jsx

@@ -0,0 +1,40 @@
+/* useState
+1.导入 useState 函数 （从 react 导入）
+2.执行这个函数并且传入初始值，必须在函数组件中
+3.解构： [数据，修改数据的方法]
+4.使用数据  修改数据 */
+
+/*  状态的读取和修改
+ const [count, setCount] = useState(0)
+1.useState 传过来的参数作为 count 的初始值
+2. [count, setCount] 这里的写法是一个解构赋值，useState 返回值是一个数组
+3. [] 里面的值名字可以自定义，保持语义化
+4. [] 里面的值顺序不能更换，第一个参数是数据状态，第二参数是修改数据的方法
+5. setCount 函数作用用来修改 count, 依旧保持不能直接修改原值，要生成一个新值替换原值。setCount（基于原值计算得到的新值）
+6. count 和 setCount 是一对的，绑定在一起的，setCount 只能用来修改对应的 count 值 */
+
+/* 组件的更新
+当调用 setCount 的时候，更新过程：
+
+首次渲染：
+首次被渲染的时候，组件的内部代码会被执行一次，其中 useState 也会跟着执行，重点注意：初始值只在首次渲染是生效
+
+更新渲染 setCount 都会更新
+1. app 组件会再次渲染，这个函数会再次执行
+2. useState 再次执行，得到的新的 count 值不是 0 ，而是修改之后的 1，模板会用新值渲染 
+
+重点：useState 初始值只在首次渲染生效，后续只要调用 setCount，整个 app 中代码都会执行，此时的 count 每次拿到的都是最新值
+*/
+
+import { useState } from 'react'
+
+function App () {
+    const [count, setCount] = useState(0)     // 0 是初始值
+    return (
+        <div>
+            <button onClick={ () => setCount(count + 1)}>{count}</button>
+        </div>
+    )
+}
+
+export default App

practise/31.hook/02.useState的使用2.jsx

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+
+/* useState 注意事项 ：
+1.只能出现在函数组件中 
+2.不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook） */
+
+function App () {
+    const [count, setCount] = useState(0)     // 0 是 count 的初始值
+    const [flag, setFlag] = useState(true)    // true 是 flag 的初始值
+    const [list, setList] = useState([])      // [] 是 list 的初始值，是一个空数组
+
+    function test () {
+        setCount(count + 1)
+        setFlag(false)
+        setList([1, 2, 3])
+    }
+
+    return (
+        <div>
+            count: {count} <br/>
+            flag: {flag ? '1' : '0'} <br/>
+            list: {list.join('-')} <button onClick={test}>+</button>
+        </div>
+    )
+}
+
+export default App

practise/31.hook/03.useEffect副作用.jsx

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react'
+
+// useEffect函数,作用就是为 react 函数组件提供副作用处理的
+
+/* 在修改数据之后，把 count 值放在页面标题中
+1.导入 useEffect 函数
+2.在函数组件中执行，传入回调，并且定义副作用
+3.当通过修改状态更新组件时，副作用也会不断执行 */
+
+function App () {
+    const [count, setCount] = useState(0)     // 0 是 count 的初始值
+
+    useEffect(() => {
+        // 定义副作用
+        document.title = count
+    })
+
+    return (
+        <div>
+            <button onClick={() => setCount(count + 1)}>{count}</button>
+        </div>
+    )
+}
+
+export default App

practise/31.hook/04.useEffect依赖项.jsx

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react'
+
+// useEffect函数,作用就是为 react 函数组件提供副作用处理的
+
+/* 依赖项控制副作用的执行时机
+1.默认状态（无依赖项）：组件初始化的时候先执行一次，等到每次数据修改组件更新再次执行
+
+2.添加一个空数组依赖项，组件初始化的时候执行一次 
+
+3. 依赖特定项：组件初始化的时候执行一次，依赖的特定项发生变化会再次执行
+
+4.注意事项：只要 useEffect 回调函数中用到的数据状态就应该出现在依赖项数组中声明，否侧可能会有 bug
+
+hook 的出现就是在不用生命周期的概念也可以写业务代码
+*/
+
+
+function App() {
+    const [count, setCount] = useState(0)     // 0 是 count 的初始值
+    const [name, setName] = useState('one')
+
+   /*  useEffect(() => {
+        // 定义副作用
+        console.log('副作用又执行了')
+        document.title = count
+    }, [])           */               // 添加一个空数组依赖项 []，组件只在首次渲染时执行一次
+
+    /*  useEffect(() => {
+        // 定义副作用
+        console.log('副作用又执行了')
+        document.title = count
+    }, [count])      */                // 添加特定依赖项 [count]
+
+    // 初始化 + count 或 name 被修改时都会执行副作用函数
+    useEffect(() => {
+        // 定义副作用
+        console.log('副作用又执行了')
+        document.title = count
+        console.log(name)
+    }, [count,name])    
+
+    return (
+        <div>
+            <button onClick={() => setCount(count + 1)}>{count}</button>
+            <button onClick={() => setName('cp')}>{name}</button>
+        </div>
+    )
+}
+
+export default App

practise/31.hook/05.useState 函数作为参数.jsx

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+
+function getDefaultValue () {
+    for (let i = 0; i < 10000; i++) {
+    }
+    return '10'
+}
+
+function Counter (props) {
+    const [count, setCount] = useState(() => {
+        /**
+         * 初始值经过一定的计算：
+         * 只要无法直接确定，需要通过一定的操作才能获取，就可以理解为计算
+         */
+        // return props.count
+
+        // 循环遍历一万条数据才能确定这里的初始值 
+        return getDefaultValue()
+    })
+    return (
+        <button onClick={() => setCount(count + 1)}>{count}</button>
+    )
+}
+
+function App () {
+    return (
+        <div>
+            <Counter count={10}/>
+            <Counter count={20}/>
+        </div>
+    )
+}
+
+export default App

practise/31.hook/06.useEffect 清除副作用.jsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+
+function Test () {
+    useEffect(() => {
+        let timer = setInterval(() => {
+            console.log('定时器执行了')
+        }, 1000)
+
+        return () => {
+            // 清理定时器
+            clearInterval(timer)
+        }
+    }, [])
+
+    return (
+        <div>this is test</div>
+    )
+}
+
+function App () {
+    const [flag, setFlag] = useState(true)
+    return (
+        <div>
+            {flag ? <Test /> : null}
+            <button onClick={() => setFlag(!flag)}>switch</button>
+        </div>
+    )
+}
+
+export default App

practise/31.hook/07.useEffect 发送网络请求.jsx

@@ -0,0 +1,30 @@
+/**
+ * 类组件发送网络请求：
+ * 生命周期钩子函数：componentDidMount；执行时机：在初始化的时候 dom 渲染完毕时只执行一次
+ */
+
+/**
+ * 1.不加依赖项，执行时机：初始化 + 重新渲染
+ * 2.加 [] ， 执行时机：初始化执行一次
+ * 3.加特定的依赖项 [count, name] ，执行时机：首次执行 + 任意一个变化执行
+ */
+
+ import { useEffect } from 'react'
+
+ function App () {
+     useEffect(() => {
+         // 发送请求
+         async function loadData () {
+             const res = await fetch('http://geek.itheima.net/v1_0/channels')
+             console.log(res)
+         }
+         loadData()
+     }, [])
+     
+     return (
+         <div>
+         </div>
+     )
+ }
+ 
+ export default App

practise/31.hook/08.useRef的使用.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef } from 'react'
+
+// useRef：在函数组件中获取真实的dom元素对象或者是组件对象
+/**
+ * 使用步骤
+ * 1. 导入 useRef 函数
+ * 2. 执行 useRef 函数并传入null，返回值为一个对象 内部有一个current属性存放拿到的dom对象（类组件实例）
+ * 3. 通过ref 绑定 要获取的元素或者组件
+ */
+
+class TestC extends React.Component {
+    state = {
+        name: 'Ken'
+    }
+
+    getName = () => {
+        return 'this is child Test'
+    }
+
+    render () {
+        return (
+            <div>类组件</div>
+        )
+    }
+}
+
+function App () {
+    const testRef = useRef(null)
+    const h1Ref = useRef(null)
+
+    // useEffect 回调是在 dom 渲染之后的。和 vue 里的 watch 效果较像，但是执行时机是不同的
+    useEffect(() => {
+        console.log(testRef.current)
+        console.log(h1Ref.current)
+    }, [])
+
+    return (
+        <div>
+            <TestC ref={testRef}/>
+            <h1 ref={h1Ref}>this is h1</h1>
+        </div>
+    )
+}
+
+export default App

practise/31.hook/09.useContext使用.jsx

@@ -0,0 +1,44 @@
+import React, { createContext, useContext, useState } from 'react'
+
+// 1.创建 Context 对象,调用 createContext 方法
+const Context = createContext()
+
+function ComA() {
+    const count =  useContext(Context)
+    return (
+        <div>
+            this is ComA
+            <br />
+            传过来的数据为：{count}
+            <ComC />
+        </div>
+    )
+}
+
+function ComC() {
+    // 3.底层组件通过 useContext 函数获取数据  
+    const count =  useContext(Context)
+    return (
+        <div>
+            this is ComC
+            <br />
+            传过来的数据为：{count}
+        </div>
+    )
+}
+
+function App() {
+    const [ count, setCount ] = useState(0)
+
+    return (
+        // 2.顶层组件通过 Context.Provider 提供数据 
+        <Context.Provider value={count}>
+            <div>
+                <ComA />
+                <button onClick={() => {setCount(count + 1)}}>+</button>
+            </div>
+        </Context.Provider>
+    )
+}
+
+export default App

practise/31.hook/hook阶段小练习/01/index.js

@@ -0,0 +1,14 @@
+import { useWindowScroll } from './useWindowScroll.js'
+
+function App () {
+    const [y] = useWindowScroll()
+
+    return (
+        <div style={{height: '12000px'}}>
+            {y}
+            {console.log(y)}
+        </div>
+    )
+}
+
+export default App

practise/31.hook/hook阶段小练习/01/useWindowScroll.js

@@ -0,0 +1,13 @@
+import { useState } from 'react'
+
+
+export function useWindowScroll () {
+    const [y, sety] = useState(0)
+
+    // 在滚动行为发生的时候，不断获取滚动值，然后交给 y
+    window.addEventListener('scroll', () => {
+        const h = document.documentElement.scrollTop         // documentElement 属性以一个元素对象返回一个文档的文档元素。
+        sety(h)
+    })
+    return [y]
+}

practise/31.hook/hook阶段小练习/02/index.js

@@ -0,0 +1,15 @@
+import { useLocalStorage } from './useLocalStorage'
+
+function App () {
+    const [message, setMessage] = useLocalStorage('hook-key', 'ken')
+    setTimeout(() => {
+        setMessage('cp')
+    }, 5000);
+    return (
+        <div style={{height: '12000px'}}>
+            {message}
+        </div>
+    )
+}
+
+export default App

practise/31.hook/hook阶段小练习/02/useLocalStorage.js

@@ -0,0 +1,15 @@
+import { useEffect, useState} from 'react'
+
+/* const {message, setMessage} = useState(defaultValue)
+1.message 可以通过自定义传入默认初始值
+2.每次修改 message 数据的时候，都会自动往同步一份 */
+
+export function useLocalStorage (key, defaultValue) {
+    const [message, setMessage] = useState(defaultValue)
+    // 每次只要 message 变化，就会自动同步到本地 localStorage
+    useEffect (() => {
+        // setItem(keyname, value)	是添加键和值，如果对应的值存在，则更新该键对应的值。
+        window.localStorage.setItem(key, message)
+    }, [message, key])
+    return [message, setMessage]
+}

practise/31.hook/useContext/context.js

@@ -0,0 +1,13 @@
+/**
+ * 1.调用 createContext 方法
+ * 2.通过顶层组件包裹 Context.Provider
+ * 3.底层组件 useContext (createContext 返回的对象)
+ */
+
+import { createContext } from "react"
+
+const Context = createContext()
+
+export default Context
+
+

practise/31.hook/useContext/index.js

@@ -0,0 +1,43 @@
+import React, { useContext, useState } from 'react'
+
+import Context from './context'
+
+function ComA() {
+    const count =  useContext(Context)
+    return (
+        <div>
+            this is ComA
+            <br />
+            传过来的数据为：{count}
+            <ComC />
+        </div>
+    )
+}
+
+function ComC() {
+    // 3.底层组件通过 useContext 函数获取数据  
+    const count =  useContext(Context)
+    return (
+        <div>
+            this is ComC
+            <br />
+            传过来的数据为：{count}
+        </div>
+    )
+}
+
+function App() {
+    const [ count, setCount ] = useState(0)
+
+    return (
+        // 2.顶层组件通过 Context.Provider 提供数据 
+        <Context.Provider value={count}>
+            <div>
+                <ComA />
+                <button onClick={() => {setCount(count + 1)}}>+</button>
+            </div>
+        </Context.Provider>
+    )
+}
+
+export default App

practise/32.react-router/01.BrowserRouter.jsx

@@ -0,0 +1,25 @@
+// 引入两个组件
+import Home from "./Home";
+import About from "./About";
+
+import { BrowserRouter, Link, Routes, Route} from "react-router-dom"
+
+// 进行路由配置
+function App() {
+  return (
+    // BrowserRouter 是声明当前要用一个非 hash 模式的路由
+    <BrowserRouter>
+    {/* Link 是指定跳转的组件，to 用来配置路由地址 */}
+    <Link to="/">首页</Link>
+    <Link to="/about">关于</Link>
+    {/* Routes 是路由出口，路由对应的组件会在这里进行渲染 */}
+    <Routes>
+      {/* Route 是指定路径和组件的对应关系，path 代表路径，element 代表组件，两个是成对出现的，一个 path 对应一个 element */}
+      <Route path="/" element={<Home/>}></Route>
+      <Route path="about" element={<About/>}></Route>
+    </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

practise/32.react-router/02.编程式导航-实现跳转/Login.js

@@ -0,0 +1,21 @@
+// 1.导入 useNavigate
+import { useNavigate } from 'react-router-dom'
+
+function Login() {
+    // 2.执行 useNavigate 得到一个跳转函数
+    const navigate = useNavigate()
+
+    function goAbout() {
+        // 3.调用跳转函数传入目标路径，{replace: true} 是在跳转时不加入历史记录，不能跳转回登录页
+        navigate('/about', {replace: true})
+    }
+
+    return (
+        <div>
+            Login
+            <button onClick={goAbout}>跳转到about</button>
+        </div>
+    )
+}
+
+export default Login

practise/32.react-router/02.编程式导航-实现跳转/index.js

@@ -0,0 +1,28 @@
+// 引入两个组件
+import Home from "./Home";
+import About from "./About";
+import Login from "./Login";
+
+import { BrowserRouter, Link, Routes, Route} from "react-router-dom"
+
+// 进行路由配置
+function App() {
+  return (
+    // BrowserRouter 是声明当前要用一个非 hash 模式的路由
+    <BrowserRouter>
+    {/* Link 是指定跳转的组件，to 用来配置路由地址 */}
+    <Link to="/">首页</Link>
+    <Link to="/about">关于</Link>
+    {/* <Link to="/login">登录</Link> */}
+    {/* Routes 是路由出口，路由对应的组件会在这里进行渲染 */}
+    <Routes>
+      {/* Route 是指定路径和组件的对应关系，path 代表路径，element 代表组件，两个是成对出现的，一个 path 对应一个 element */}
+      <Route path="/" element={<Home/>}></Route>
+      <Route path="about" element={<About/>}></Route>
+      <Route path="login" element={<Login/>}></Route>
+    </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

practise/32.react-router/03.跳转传参-searchParams/About.js

@@ -0,0 +1,17 @@
+import { useSearchParams } from 'react-router-dom'
+
+function About () {
+    const [params] = useSearchParams()
+
+    /**
+     *  params 是一个对象，对象里有一个 get 的方法，用来获取对应的参数，把参数的名称作为 get 方法的实参传过来
+     */
+
+    const id = params.get('id')
+
+    return (
+        <div>About得到的参数 id 值为 {id}</div>
+    )
+}
+
+export default About

practise/32.react-router/03.跳转传参-searchParams/Login.js

@@ -0,0 +1,21 @@
+// 1.导入 useNavigate
+import { useNavigate } from 'react-router-dom'
+
+function Login() {
+    // 2.执行 useNavigate 得到一个跳转函数
+    const navigate = useNavigate()
+
+    function goAbout() {
+        // 3.调用跳转函数传入目标路径，{replace: true} 是在跳转时不加入历史记录，不能跳转回登录页
+        navigate('/about?id=1001', {replace: true})
+    }
+
+    return (
+        <div>
+            Login
+            <button onClick={goAbout}>跳转到about</button>
+        </div>
+    )
+}
+
+export default Login

practise/32.react-router/04.跳转传参-params/About.js

@@ -0,0 +1,15 @@
+// 使用 params 传参。还需要在 App.js 的传参路径 path 添加 /:id
+// 例如：<Route path="about/:id" element={<About/>}></Route>
+
+import { useParams } from 'react-router-dom'
+
+function About () {
+
+    const params = useParams()
+
+    return (
+        <div>About得到的参数 id 值为 {params.id}</div>
+    )
+}
+
+export default About

practise/32.react-router/04.跳转传参-params/Login.js

@@ -0,0 +1,21 @@
+// 1.导入 useNavigate
+import { useNavigate } from 'react-router-dom'
+
+function Login() {
+    // 2.执行 useNavigate 得到一个跳转函数
+    const navigate = useNavigate()
+
+    function goAbout() {
+        // 3.调用跳转函数传入目标路径，{replace: true} 是在跳转时不加入历史记录，不能跳转回登录页
+        navigate('/about/1001', {replace: true})
+    }
+
+    return (
+        <div>
+            Login
+            <button onClick={goAbout}>跳转到about</button>
+        </div>
+    )
+}
+
+export default Login

practise/32.react-router/05.嵌套路由/Article.js

@@ -0,0 +1,7 @@
+function Article () {
+    return (
+        <div>Article</div>
+    )
+}
+
+export default Article

practise/32.react-router/05.嵌套路由/Board.js

@@ -0,0 +1,7 @@
+function Board () {
+    return (
+        <div>Board</div>
+    )
+}
+
+export default Board

practise/32.react-router/05.嵌套路由/Layout.js

@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom'
+
+function Layout () {
+    return (
+        <div>
+            Layout
+            <Outlet/>
+        </div>
+    )
+}
+
+export default Layout

practise/32.react-router/05.嵌套路由/Login.js

@@ -0,0 +1,10 @@
+function Login() {
+
+    return (
+        <div>
+            Login
+        </div>
+    )
+}
+
+export default Login

practise/32.react-router/05.嵌套路由/index.js

@@ -0,0 +1,29 @@
+// 引入两个组件
+import Login from "./Login";
+import Layout from "./Layout";
+import Board from "./Board";
+import Article from "./Article";
+
+import { BrowserRouter, Routes, Route} from "react-router-dom"
+
+// 进行路由配置
+function App() {
+  return (
+
+    <BrowserRouter>
+
+    <Routes>
+
+      <Route path="/" element={<Layout/>}>
+        {/* 定义二级路由嵌套 */}
+        <Route path="board" element={<Board/>}></Route>
+        <Route path="Article" element={<Article/>}></Route>
+      </Route>
+
+      <Route path="login" element={<Login/>}></Route>
+    </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

practise/32.react-router/06.默认二级路由设置.jsx

@@ -0,0 +1,30 @@
+// 引入两个组件
+import Login from "./Login";
+import Layout from "./Layout";
+import Board from "./Board";
+import Article from "./Article";
+
+import { BrowserRouter, Routes, Route} from "react-router-dom"
+
+// 进行路由配置
+function App() {
+  return (
+
+    <BrowserRouter>
+
+    <Routes>
+
+      <Route path="/" element={<Layout/>}>
+        {/* 定义二级路由嵌套 */}
+        {/* 进入页面指定显示：默认二级，添加 index 属性，将自己的 path 干掉 */}
+        <Route index element={<Board/>}></Route>
+        <Route path="Article" element={<Article/>}></Route>
+      </Route>
+
+      <Route path="login" element={<Login/>}></Route>
+    </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

practise/32.react-router/07.404页配置/NotFound.js

@@ -0,0 +1,9 @@
+function  NotFound () {
+    return (
+        <div>
+            sorry,this page is lost
+        </div>
+    )
+}
+
+export default NotFound

practise/32.react-router/07.404页配置/index.js

@@ -0,0 +1,30 @@
+// 引入两个组件
+import Layout from "./Layout";
+import Board from "./Board";
+import Article from "./Article";
+import NotFound from "./NotFound";
+
+import { BrowserRouter, Routes, Route} from "react-router-dom"
+
+// 进行路由配置
+function App() {
+  return (
+
+    <BrowserRouter>
+
+    <Routes>
+
+      <Route path="/" element={<Layout/>}>
+        {/* 定义二级路由嵌套 */}
+        <Route path="board" element={<Board/>}></Route>
+        <Route path="Article" element={<Article/>}></Route>
+      </Route>
+
+      {/* 当所有的路径都没有匹配时，做兜底匹配，显示未找到 */}
+      <Route path="*" element={<NotFound/>}></Route>
+    </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;