• React复习笔记

    基础语法

    创建项目

    借助脚手架，新建一个React项目(可以使用vite或者cra，这里使用cra)

    npx create-react-app 项目名

    • create-react-app是React脚手架的名称

    启动项目

    npm start   或者  yarn start

    • src是源文件
    • index.js相当于Vue的main.js文件。整个程序的入口
    • App.js相当于Vue的App.js，根组件
    {}表达式
    • 里面可以写入方法，变量，三元，短路与(&&)，短路或(||)等js表达式
    • 表达式是可以产生一个值的js语句(也就是可以被函数返回)
    1. import { useState } from 'react';
    2. import './App.css';
    3.  
    4. const App = () => {
    5.   const [num, setNum] = useState(100)
    6.   const [flag, setFlag] = useState(true)
    7.   const fn = () => {
    8.     return '方法执行了'
    9.   }
    10.  
    11.   return (
    12.     <div className="App">
    13.       <h3>{ }中可以使用定义好的变量</h3>
    14.       { num }
    15.       <h3>{ }中可以使用三元表达式</h3>
    16.       { flag ? num : '无' }
    17.       <h3>{ }中可以使用短路与</h3>
    18.       { flag && num }
    19.       <h3>{ }中可以使用短路或</h3>
    20.       { !flag || num }
    21.       <h3>{ }中可以使用方法</h3>
    22.       { fn() }
    23.     </div>
    24.   );
    25. }
    26.  
    27. export default App;
    列表渲染
    • 通过map进行遍历，里面需要绑定key值，方便diff算法进行对比，提高diff性能
    • 重复渲染那个模板，就return谁
    • key 在当前列表中要唯一的字符串或者数值（String/Number）
    1. export default function App() {
    2.   const [list, setList] = useState([
    3.     { id: 0, name: '张三' },
    4.     { id: 1, name: '李四' },
    5.     { id: 2, name: '王五' },
    6.   ])
    7.   return (
    8.     <div>
    9.       {list.map((item) => (
    10.         <p key={item.id}>姓名：{item.name}</p>
    11.       ))}
    12.     </div>
    13.   )
    14. }
    条件渲染
    • 根据是否满足条件生成HTML结构，比如Loading效果
    • 可以使用 三元运算符 或  逻辑与(&&)运算符 或 逻辑或(||)运算符
    1. export default function App() {
    2.   const [flag, setFlag] = useState(true)
    3.   return (
    4.     <div>
    5.       {flag ? '正确的' : null}
    6.       {flag && '前面只有为true的情况下才会执行'}
    7.       {!flag || '前面只有为false的情况下才会执行'}
    8.     </div>
    9.   )
    10. }

    if系列判断渲染

    • 可以声明一个方法，接收值，内部进行判断，并返回对应的结果
    1. export default function App() {
    2.   const getType = (type) => {
    3.     if (type === 0) {
    4.       return <span>111</span>
    5.     } else if (type === 1) {
    6.       return <span>222</span>
    7.     } else if (type === 2) {
    8.       return <span>333</span>
    9.     }
    10.   }
    11.   return (
    12.     <div>
    13.       {getType(1)}
    14.     </div>
    15.   )
    16. }
    样式处理
    • 利用className指定类名，适合样式比较多的情况
    • 直接行内样式，适合样式比较少的
    <h2 style={{ color: 'red' }}>标题</h2>
    • 单独声明一个样式类名对象
    1. export default function App() {
    2.   let style = {
    3.     color: 'pink',
    4.     fontSize: 20,
    5.   }
    6.   return (
    7.     <div>
    8.       <h2 style={style}>标题</h2>
    9.     </div>
    10.   )
    11. }

    动态类名

    • 根据条件显示类名
    1. export default function App() {
    2.   let style = {
    3.     color: 'pink',
    4.     fontSize: 20,
    5.   }
    6.   let [flag, setFlag] = useState(true)
    7.   return (
    8.     <div>
    9.       <h2 style={flag ? style : ''}>标题</h2>
    10.     </div>
    11.   )
    12. }

    动态类名插件

    • 还有很多用法，可以查看npm搜索

    注意事项
    1. JSX必须有一个根节点，如果没有根节点，可以使用<>（幽灵节点）替代
    2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
    3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法  class -> className  for -> htmlFor
    4. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现
    小案例1
    • 实现一个最基本的评论(不完整)
    1. import './index.css'
    2. import avatar from './images/avatar.png'
    3. // 依赖的数据
    4. const state = {
    5.   // hot: 热度排序  time: 时间排序
    6.   tabs: [
    7.     {
    8.       id: 1,
    9.       name: '热度',
    10.       type: 'hot',
    11.     },
    12.     {
    13.       id: 2,
    14.       name: '时间',
    15.       type: 'time',
    16.     },
    17.   ],
    18.   active: 'hot',
    19.   list: [
    20.     {
    21.       id: 1,
    22.       author: '刘德华',
    23.       comment: '给我一杯忘情水',
    24.       time: new Date('2021-10-10 09:09:00'),
    25.       // 1: 点赞 0：无态度 -1:踩
    26.       attitude: 1,
    27.     },
    28.     {
    29.       id: 2,
    30.       author: '周杰伦',
    31.       comment: '哎哟，不错哦',
    32.       time: new Date('2021-10-11 09:09:00'),
    33.       // 1: 点赞 0：无态度 -1:踩
    34.       attitude: 0,
    35.     },
    36.     {
    37.       id: 3,
    38.       author: '五月天',
    39.       comment: '不打扰，是我的温柔',
    40.       time: new Date('2021-10-11 10:09:00'),
    41.       // 1: 点赞 0：无态度 -1:踩
    42.       attitude: -1,
    43.     },
    44.   ],
    45. }
    46. // 时间格式化
    47. const format = (time) => {
    48.   return `${time.getFullYear()}-${
    49.     time.getMonth() + 1 < 10 ? '0' + time.getMonth() + 1 : time.getMonth() + 1
    50.   }-${time.getDate() < 10 ? '0' + time.getDate() : time.getDate()} ${
    51.     time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
    52.   }:${time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()}:${
    53.     time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
    54.   }`
    55. }
    56. // tab切换
    57. const activeClick = (active) => {
    58.   state.active = active
    59. }
    60.  
    61. function App() {
    62.   return (
    63.     <div className="App">
    64.       <div className="comment-container">
    65.         {/* 评论数 */}
    66.         <div className="comment-head">
    67.           <span>5 评论</span>
    68.         </div>
    69.         {/* 排序 */}
    70.         <div className="tabs-order">
    71.           <ul className="sort-container">
    72.             {state.tabs.map((item) => {
    73.               return (
    74.                 <li
    75.                   className={state.active === item.type ? 'on' : ''}
    76.                   onClick={() => activeClick('hot')}
    77.                   key={item.id}
    78.                 >
    79.                   按{item.name}排序
    80.                 </li>
    81.               )
    82.             })}
    83.           </ul>
    84.         </div>
    85.  
    86.         {/* 添加评论 */}
    87.         <div className="comment-send">
    88.           <div className="user-face">
    89.             <img className="user-head" src={avatar} alt="" />
    90.           </div>
    91.           <div className="textarea-container">
    92.             <textarea
    93.               cols="80"
    94.               rows="5"
    95.               placeholder="发条友善的评论"
    96.               className="ipt-txt"
    97.             />
    98.             <button className="comment-submit">发表评论</button>
    99.           </div>
    100.           <div className="comment-emoji">
    101.             <i className="face"></i>
    102.             <span className="text">表情</span>
    103.           </div>
    104.         </div>
    105.  
    106.         {/* 评论列表 */}
    107.         <div className="comment-list">
    108.           {state.list.map((item) => {
    109.             return (
    110.               <div className="list-item" key={item.id}>
    111.                 <div className="user-face">
    112.                   <img className="user-head" src={avatar} alt="" />
    113.                 </div>
    114.                 <div className="comment">
    115.                   <div className="user">{item.author}</div>
    116.                   <p className="text">{item.comment}</p>
    117.                   <div className="info">
    118.                     <span className="time">{format(item.time)}</span>
    119.                     <span
    120.                       className={item.attitude === 1 ? 'like liked' : 'like'}
    121.                     >
    122.                       <i className="icon" />
    123.                     </span>
    124.                     <span
    125.                       className={item.attitude === -1 ? 'hate hated' : 'hate'}
    126.                     >
    127.                       <i className="icon" />
    128.                     </span>
    129.                     <span className="reply btn-hover">删除</span>
    130.                   </div>
    131.                 </div>
    132.               </div>
    133.             )
    134.           })}
    135.         </div>
    136.       </div>
    137.     </div>
    138.   )
    139. }
    140.  
    141. export default App

    组件

    • 分为函数式组件(rfc)和类组件(rnc)
    • 安装ES7+ React/Redux/React-Native snippets这个插件后就可以使用上述指令快速创建组件
    • 主要讲函数式组件。在react中，一个组件就是首字母大写的函数
    绑定事件
    • on开头，后面紧跟事件名(事件名首字母大写)

    on事件名 = { 事件处理函数名 }      // 无参

    on事件名 = { () => 事件处理函数名(参数1，参数2...) }      // 有参

    on事件名 = { (e) => 事件处理函数名(e，参数2...) }      // 有参，带e的

    • 事件处理函数

    let/const  事件处理函数名  =  (参数) => { ... }

    1. import React from 'react'
    2.  
    3. export default function App() {
    4.   const print = () => {
    5.     console.log('无参的')
    6.   }
    7.   const hasParams = (e, num) => {
    8.     console.log('有参的', e, num)
    9.   }
    10.  
    11.   return (
    12.     <div>
    13.       <button onClick={print}>print</button>
    14.       <button onClick={(e) => hasParams(e, '123')}>hasParams</button>
    15.     </div>
    16.   )
    17. }
    小技巧
    • 数值改变
    • 数组添加
    • 对象修改
    1. import React from 'react'
    2. import { useState } from 'react'
    3.  
    4. export default function App() {
    5.   const [num, setNum] = useState(10)
    6.   const [list, setList] = useState([])
    7.   const [obj, setObj] = useState({
    8.     name: '张三',
    9.   })
    10.  
    11.   // 数值加几，可以直接在后面写加几
    12.   const numAdd = (n) => {
    13.     setNum(num + n)
    14.   }
    15.   // 数组添加，可以直接在尾部添加
    16.   const listAdd = (item) => {
    17.     setList([...list, item])
    18.   }
    19.   // 修改对象中的某一项
    20.   const objEdit = (val) => {
    21.     setObj({
    22.       ...obj,
    23.       // 下面的会覆盖上面的同名的属性，达到修改的目的
    24.       name: val,
    25.     })
    26.   }
    27.  
    28.   return (
    29.     <div>
    30.       <button onClick={() => numAdd(1)}>数值加1--{num}</button>
    31.       <div>
    32.         <button onClick={() => listAdd('数组新的一项')}>数组添加一项</button>
    33.         {list.map((item, i) => (
    34.           <p key={i}>{item}</p>
    35.         ))}
    36.       </div>
    37.       <div>
    38.         <button onClick={() => objEdit('李四')}>
    39.           修改对象的某一项(修改name)
    40.         </button>
    41.         <p>{obj.name}</p>
    42.       </div>
    43.     </div>
    44.   )
    45. }
    • 数组删除(最好利用filter)
    1. import React from 'react'
    2. import { useState } from 'react'
    3.  
    4. export default function App() {
    5.   const [list, setList] = useState([1,2,3])
    6.   // 删除数组中下标为2的内一项
    7.   const delItem = (index) => {
    8.     let newList = list.filter((item, i) => i !== 2)
    9.     setList(newList)
    10.     // 或者直接操作，也是可以的
    11.     // setList(list.filter((item, i) => i !== 2))
    12.   }
    13.  
    14.   return (
    15.     <div>
    16.       <button onClick={() => delItem(2)}>删除数组中的某一项</button>
    17.     </div>
    18.   )
    19. }
    受控组件
    • 被react状态控制的组件就叫受控组件。通过事件对象e，可以获取输入框中的值
    1. import React from 'react'
    2. import { useState } from 'react'
    3.  
    4. export default function App() {
    5.   const [val, setVal] = useState('')
    6.   // 表单里面的值发生变化
    7.   const onChange = (e) => {
    8.     // 获得输入框中的值
    9.     console.log(e.target.value)
    10.     // 赋值给val
    11.     setVal(e.target.value)
    12.   }
    13.  
    14.   return (
    15.     <div>
    16.       <input type="text" name="" id="" value={val} onChange={onChange} />
    17.     </div>
    18.   )
    19. }
    非受控组件
    • 不受react状态控制的组件叫非受控组件。通过获取dom元素，来获取输入框中的值
    1. import React from 'react'
    2. import { useRef } from 'react'
    3.  
    4. export default function App() {
    5.   const ipt = useRef(null)
    6.   // 表单里面的值发生变化
    7.   const onChange = () => {
    8.     // 获得输入框中的值
    9.     console.log(ipt.current.value)
    10.   }
    11.  
    12.   return (
    13.     <div>
    14.       <input type="text" name="" id="" ref={ipt} onChange={onChange} />
    15.     </div>
    16.   )
    17. }
    小案例2
    • 完整的评论功能
    1. import './index.css'
    2. import avatar from './images/avatar.png'
    3. import { useState } from 'react'
    4.  
    5. // 时间格式化
    6. const format = (time) => {
    7.   return `${time.getFullYear()}-${
    8.     time.getMonth() + 1 < 10 ? '0' + time.getMonth() + 1 : time.getMonth() + 1
    9.   }-${time.getDate() < 10 ? '0' + time.getDate() : time.getDate()} ${
    10.     time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
    11.   }:${time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()}:${
    12.     time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
    13.   }`
    14. }
    15.  
    16. function App() {
    17.   // hot: 热度排序  time: 时间排序
    18.   const [tabs] = useState([
    19.     {
    20.       id: 1,
    21.       name: '热度',
    22.       type: 'hot',
    23.     },
    24.     {
    25.       id: 2,
    26.       name: '时间',
    27.       type: 'time',
    28.     },
    29.   ])
    30.   const [list, setList] = useState([
    31.     {
    32.       id: 1,
    33.       author: '刘德华',
    34.       comment: '给我一杯忘情水',
    35.       time: new Date('2021-10-10 09:09:00'),
    36.       // 1: 点赞 0：无态度 -1:踩
    37.       attitude: 1,
    38.     },
    39.     {
    40.       id: 2,
    41.       author: '周杰伦',
    42.       comment: '哎哟，不错哦',
    43.       time: new Date('2021-10-11 09:09:00'),
    44.       // 1: 点赞 0：无态度 -1:踩
    45.       attitude: 0,
    46.     },
    47.     {
    48.       id: 3,
    49.       author: '五月天',
    50.       comment: '不打扰，是我的温柔',
    51.       time: new Date('2021-10-11 10:09:00'),
    52.       // 1: 点赞 0：无态度 -1:踩
    53.       attitude: -1,
    54.     },
    55.   ])
    56.   // 切换的tab
    57.   const [active, setActive] = useState('hot')
    58.   // tab切换
    59.   const activeClick = (type) => {
    60.     setActive(type)
    61.   }
    62.   // 输入框的值
    63.   const [iptVal, setIptVal] = useState('')
    64.   // 得到输入框中的值
    65.   const getVal = (e) => {
    66.     setIptVal(e.target.value)
    67.   }
    68.   // 点击发送评论按钮
    69.   const sendCommit = () => {
    70.     if (!iptVal || iptVal.trim().length < 1) {
    71.       return alert('输入不能为空或都是空格')
    72.     }
    73.     setList([
    74.       ...list,
    75.       {
    76.         id: +new Date(),
    77.         author: '孤勇者',
    78.         comment: iptVal,
    79.         time: new Date(),
    80.         // 1: 点赞 0：无态度 -1:踩
    81.         attitude: 0,
    82.       },
    83.     ])
    84.     setIptVal('')
    85.   }
    86.   // 点击删除
    87.   const delItm = (id) => {
    88.     let newList = list.filter((item) => item.id !== id)
    89.     setList(newList)
    90.   }
    91.   // 点击点赞/点踩
    92.   const toggleMood = (item) => {
    93.     let { id, attitude } = item
    94.     let newList = list.map((item) => {
    95.       if (item.id === id) {
    96.         return {
    97.           ...item,
    98.           attitude: attitude === 1 ? 0 : 1,
    99.         }
    100.       } else {
    101.         return item
    102.       }
    103.     })
    104.     console.log(newList)
    105.     setList(newList)
    106.   }
    107.  
    108.   return (
    109.     <div className="App">
    110.       <div className="comment-container">
    111.         {/* 评论数 */}
    112.         <div className="comment-head">
    113.           <span>{list.length} 评论</span>
    114.         </div>
    115.         {/* 排序 */}
    116.         <div className="tabs-order">
    117.           <ul className="sort-container">
    118.             {tabs.map((item) => {
    119.               return (
    120.                 <li
    121.                   className={active === item.type ? 'on' : ''}
    122.                   onClick={() => activeClick(item.type)}
    123.                   key={item.id}
    124.                 >
    125.                   按{item.name}排序
    126.                 </li>
    127.               )
    128.             })}
    129.           </ul>
    130.         </div>
    131.  
    132.         {/* 添加评论 */}
    133.         <div className="comment-send">
    134.           <div className="user-face">
    135.             <img className="user-head" src={avatar} alt="" />
    136.           </div>
    137.           <div className="textarea-container">
    138.             <textarea
    139.               cols="80"
    140.               rows="5"
    141.               placeholder="发条友善的评论"
    142.               className="ipt-txt"
    143.               onChange={getVal}
    144.               value={iptVal}
    145.             />
    146.             <button className="comment-submit" onClick={sendCommit}>
    147.               发表评论
    148.             </button>
    149.           </div>
    150.           <div className="comment-emoji">
    151.             <i className="face"></i>
    152.             <span className="text">表情</span>
    153.           </div>
    154.         </div>
    155.  
    156.         {/* 评论列表 */}
    157.         <div className="comment-list">
    158.           {list.map((item, index) => {
    159.             return (
    160.               <div className="list-item" key={item.id}>
    161.                 <div className="user-face">
    162.                   <img className="user-head" src={avatar} alt="" />
    163.                 </div>
    164.                 <div className="comment">
    165.                   <div className="user">{item.author}</div>
    166.                   <p className="text">{item.comment}</p>
    167.                   <div className="info">
    168.                     <span className="time">{format(item.time)}</span>
    169.                     <span
    170.                       className={item.attitude === 1 ? 'like liked' : 'like'}
    171.                       onClick={() => toggleMood(item)}
    172.                     >
    173.                       <i className="icon" />
    174.                     </span>
    175.                     <span
    176.                       className={item.attitude === -1 ? 'hate hated' : 'hate'}
    177.                     >
    178.                       <i className="icon" />
    179.                     </span>
    180.                     <span
    181.                       className="reply btn-hover"
    182.                       onClick={() => delItm(item.id)}
    183.                     >
    184.                       删除
    185.                     </span>
    186.                   </div>
    187.                 </div>
    188.               </div>
    189.             )
    190.           })}
    191.         </div>
    192.       </div>
    193.     </div>
    194.   )
    195. }
    196.  
    197. export default App

    组件通信

    • 父子通信，子父通信，非父子通信
    父->子通信
    • 父组件在子组件标签上绑定要传入的数据(会默认添加到props中)，子组件通过props进行使用

    父组件

    1. import React from 'react'
    2. import { useState } from 'react'
    3. import Son from './pages/Son.jsx'
    4.  
    5. export default function App() {
    6.   const [num, setNum] = useState(100)
    7.   return (
    8.     <div>
    9.       <h2>App</h2>
    10.       <p>下面是子组件</p>
    11.       <Son num={num}></Son>
    12.     </div>
    13.   )
    14. }

    子组件

    1. import React from 'react'
    2.  
    3. export default function Son(props) {
    4.   return (
    5.     <div>
    6.       <h2>Son</h2>
    7.       <p>从父组件传来的值是：{props.num}</p>
    8.     </div>
    9.   )
    10. }
    props详解
    1. props是只读对象（readonly）
      • 是自顶向下单向数据流，根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改
      • 不同于Vue，react的props比较彻底，就完全不能修改。Vue如果传入对象类型数据，其实是可以修改的
    1. props可以传递任意数据
      • 数字、字符串、布尔值、数组、对象、函数（多用子向父传值）、JSX（类似于Vue的插槽）

    父组件

    1. import React,{ useState }  from 'react'
    2. import Son from './pages/Son.jsx'
    3.  
    4. export default function App() {
    5.   // 数字
    6.   const [num, setNum] = useState(100)
    7.   // 字符
    8.   const [str, setStr] = useState('str')
    9.   // 布尔
    10.   const [bool, setBool] = useState(false)
    11.   // 数组
    12.   const [list, setList] = useState([1, 2, 3])
    13.   // 对象
    14.   const [obj, setObj] = useState({ name: '张三', age: 24 })
    15.   // 函数
    16.   const print = () => {
    17.     return 'print'
    18.   }
    19.   // jsx
    20.   const jsx = <span>123</span>
    21.  
    22.   return (
    23.     <div>
    24.       <h2>App</h2>
    25.       <p>下面是子组件</p>
    26.       <Son
    27.         num={num}
    28.         str={str}
    29.         bool={bool}
    30.         list={list}
    31.         obj={obj}
    32.         print={print}
    33.         jsx={jsx}
    34.       >
    35.         直接写在标签内的jsx结构，会自动传入到props中的children属性里(或者子组件标签上写children属性，一样的效果)
    36.       </Son>
    37.     </div>
    38.   )
    39. }

    子组件

    1. import React from 'react'
    2. // 也可以直接在参数这里解构
    3. export default function Son(props) {
    4.   let { num, str, bool, list, obj, print, jsx } = props
    5.   return (
    6.     <div>
    7.       <h2>Son</h2>
    8.       <p>从父组件传来的值是：{num}</p>
    9.       <p>从父组件传来的值是：{str}</p>
    10.       <p>从父组件传来的值是：{bool ? '是true' : '是false'}</p>
    11.       <p>从父组件传来的数组，渲染结果如下</p>
    12.       <ul>
    13.         {list.map((item) => (
    14.           <li key={item}>{item}</li>
    15.         ))}
    16.       </ul>
    17.       <p>从父组件传来的对象，渲染结果如下</p>
    18.       {obj.name} --- {obj.age}
    19.       <p>从父组件传来的函数，渲染结果如下</p>
    20.       {print()}
    21.       <p>父组件传来的jsx结构，如下</p>
    22.       {jsx}
    23.       <p>父组件传过来的jsx结构，如下</p>
    24.       {props.children}
    25.     </div>
    26.   )
    27. }
    子->父通信
    • 也是通过props，通过传递函数进行通信
    • 子组件调用父组件传递过来的函数，并且把想要传递的数据当成函数的实参
    • 本质就是子组件调用了父组件传递过来的有参方法，只不过参数是子组件提供，从而达到子向父传值的作用

    子组件

    1. import React,{ useState }  from 'react'
    2.  
    3. export default function Son(props) {
    4.   let [msg, setMsg] = useState('子组件向父组件传递的数据')
    5.   const sendMsg = () => {
    6.     props.getMsg(msg)
    7.   }
    8.  
    9.   return (
    10.     <div>
    11.       <h2>Son</h2>
    12.       <button onClick={sendMsg}>点击向父组件传值</button>
    13.     </div>
    14.   )
    15. }

    父组件

    1. import React,{ useState } from 'react'
    2. import Son from './pages/Son'
    3.  
    4. export default function App() {
    5.   let [sonData, setSonData] = useState({})
    6.   const getMsg = (val) => {
    7.     console.log(val)
    8.     setSonData({ ...sonData, msg: val })
    9.   }
    10.  
    11.   return (
    12.     <div>
    13.       <h2>App --- {sonData.msg}</h2>
    14.       <Son getMsg={getMsg}></Son>
    15.     </div>
    16.   )
    17. }
    兄弟组件通信
    • 通过状态提升，利用共同的父组件实现兄弟通信
    • 兄弟组件A -> 父组件 -> 兄弟组件B

    子组件A

    1. import React, { useState } from 'react'
    2.  
    3. export default function SonA(props) {
    4.   const [msgA, setMsgA] = useState('兄弟组件A传递的数据')
    5.   const sendB = () => {
    6.     props.getMsgA(msgA)
    7.   }
    8.  
    9.   return (
    10.     <div>
    11.       <h3>Son1</h3>
    12.       <button onClick={sendB}>点击发送给兄弟组件B</button>
    13.     </div>
    14.   )
    15. }

    父组件

    1. import React, { useState } from 'react'
    2. import SonA from './pages/SonA'
    3. import SonB from './pages/SonB'
    4.  
    5. export default function App() {
    6.   const [msgA, setMsgA] = useState('')
    7.   // 接收A组件传来的值
    8.   const getMsgA = (val) => {
    9.     setMsgA(val)
    10.   }
    11.  
    12.   return (
    13.     <div>
    14.       <h2>App</h2>
    15.       <SonA getMsgA={getMsgA}></SonA>
    16.       <SonB msgA={msgA}></SonB>
    17.     </div>
    18.   )
    19. }

    子组件B

    1. import React from 'react'
    2.  
    3. export default function SonB(props) {
    4.   return (
    5.     <div>
    6.       <h3>Son2</h3>
    7.       <p>接收兄弟组件B传来的值为：{props.msgA}</p>
    8.     </div>
    9.   )
    10. }
    跨组件通信Context
    • 直接在index.js文件中提供数据，则全局都可以使用
      • 适用于只是用1次的静态的数据
    • 如果提供的数据需要维护状态，则写到app.js中
    • 只要是嵌套关系，都可以通过这个实现通信

    使用步骤

    1. 首先创建一个独立的文件，Context.js
    1. import { createContext } from 'react'
    2.  
    3. const Context = createContext()
    4.  
    5. export default Context
    1. 那个组件需要就直接导入，Provider标签包裹根组件，value提供数据(提供的数据比较多，就可以使用对象形式)
    1. import React, { useState } from 'react'
    2. import Son from './pages/Son'
    3. // 1. 引入Context
    4. import Context from './utils/context'
    5.  
    6. export default function App() {
    7.   const [msg, setMsg] = useState('根组件传递的数据')
    8.  
    9.   return (
    10.     <>
    11.       {/* 2. 使用Provider包裹上层组件提供数据 */}
    12.       <Context.Provider value={msg}>
    13.         {/* 根组件 */}
    14.         <div>
    15.           <h2>App</h2>
    16.           <Son></Son>
    17.         </div>
    18.       </Context.Provider>
    19.     </>
    20.   )
    21. }
    1. 数据消费组件，用useContext这个hook，或者通过Consumer标签接收显示数据

    使用useContext这个hook

    1. import React, { useContext } from 'react'
    2. import Sun from './Sun'
    3. import Context from '../utils/context'
    4.  
    5. export default function Son() {
    6.   let val = useContext(Context)
    7.  
    8.   return (
    9.     <div>
    10.       <h3>Son</h3>
    11.       <p>从根组件得到的数据 --- {val}</p>
    12.       <Sun></Sun>
    13.     </div>
    14.   )
    15. }

    通过Consumer标签

    1. import React from 'react'
    2. import Context from '../utils/context'
    3.  
    4. export default function Sun() {
    5.   return (
    6.     <div>
    7.       <h5>Sun</h5>
    8.       <div>
    9.         从根组件得到的数据：
    10.         <Context.Consumer>{(value) => <span>{value}</span>}</Context.Consumer>
    11.       </div>
    12.     </div>
    13.   )
    14. }

    组件进阶

    children属性
    • 表示该组件的子节点，只要组件内部有子节点，props中就有该属性
    • children属性，类似于插槽。直接写在标签中的内容会填充到children属性上面
    • children可以是普通文本，普通标签元素，函数 / 对象，JSX
    • 如果并列的传入多个，props的children属性会变成一个数组(就可以直接进行遍历)

    父组件

    1. import React from 'react'
    2. import Son from './pages/Son'
    3.  
    4. export default function App() {
    5.   return (
    6.     <div>
    7.       <h2>App</h2>
    8.       <Son>
    9.         普通文本：666
    10.         <div>普通标签元素</div>
    11.         {/* 函数 */}
    12.         {function fn() {
    13.           console.log('函数打印')
    14.         }}
    15.         {/* JSX结构 */}
    16.         {
    17.           <div>
    18.             <p>{'这是一个普通的jsx结构'}</p>
    19.           </div>
    20.         }
    21.       </Son>
    22.     </div>
    23.   )
    24. }

    子组件

    1. import React from 'react'
    2.  
    3. export default function Son(props) {
    4.   console.log(props)
    5.   return (
    6.     <div>
    7.       <h3>Son</h3>
    8.       <p>{props.children[0]}</p>
    9.       {props.children[1]}
    10.       {props.children[2]()}
    11.       {props.children[3]}
    12. 	  <hr />
    13.       {props.children.map((item) => {
    14.         return item
    15.       })}
    16.     </div>
    17.   )
    18. }
    props校验
    1. 下载 prop-types 插件 ，并导入prop-types包 yarn add prop-types
    2. 使用 组件名.propsTypes = { } 来给组件的props中的数据添加校验规则
    3. 校验规则通过PropTypes对象来指定

    检验基本语法

    组件名.prototype = {
            属性名 :  PropTypes.XXX,
    }

    • PropTypes是引入的prop-types插件的实例

    设置默认值

    组件名.defaultProps= {
            属性名 :  默认值,
    }

    • 或者在参数上直接给默认值

    父组件

    1. import React, { useState } from 'react'
    2. import Son from './pages/Son'
    3.  
    4. export default function App() {
    5.   const [list] = useState([
    6.     {
    7.       id: 0,
    8.       name: '张三',
    9.     },
    10.     {
    11.       id: 1,
    12.       name: '李四',
    13.     },
    14.   ])
    15.   const [obj] = useState({
    16.     name: '王五',
    17.     age: 24,
    18.   })
    19.  
    20.   return (
    21.     <div>
    22.       <h2>App</h2>
    23.       <Son list={list} score={100} obj={obj}></Son>
    24.     </div>
    25.   )
    26. }

    子组件

    1. import React from 'react'
    2. import PropTypes from 'prop-types'
    3.  
    4. export default function Son(props) {
    5.   let { list, score, obj } = props
    6.  
    7.   return (
    8.     <div>
    9.       <h3>Son</h3>
    10.       <ul>
    11.         {list.map((item) => (
    12.           <li key={item.id}>{item.name}</li>
    13.         ))}
    14.       </ul>
    15.       <p>成绩是：{score}</p>
    16.       <p>姓名：{obj.name}</p>
    17.       <p>年龄：{obj.age}</p>
    18.     </div>
    19.   )
    20. }
    21.  
    22. // 对传过来的值进行校验
    23. Son.propTypes = {
    24.   list: PropTypes.array.isRequired,
    25.   // 也可以自定义校验规则  peops是所有接收过来的数据，propsName是字段名，componentName组件名
    26.   score: function (props, propsName, componentName) {
    27.     if (props[propsName] < 60) {
    28.       return new Error('成绩不合格')
    29.     }
    30.   },
    31.   obj: PropTypes.shape({
    32.     name: PropTypes.string,
    33.     age: PropTypes.number,
    34.   }),
    35. }
    36.  
    37. // 设置默认值
    38. Son.defaultProps = {
    39.   list: [],
    40.   score: 100,
    41. }

    常见规则

    • 常见类型: array  bool  func  number  object   string
    • React元素类型(JSX): element
    • 是否必填: isRequired
    • 特定结构的对象: shape({ })  也就是指定对象里面字段的规则，可以指定一个，也可以指定多个
    1. // 特定结构的对象
    2. obj: PropTypes.shape({
    3.   name: PropTypes.string,
    4.   age: PropTypes.number,
    5. }),
    • 也可以自定义校验规则(见上面的例子)

    Hook

    useState
    • useState(初始值)返回值是一个数组（里面有两项）
    • [数据，修改数据的方法]  是对 useState进行结构。把里面的两项分别结构出来
    • 对于对象类型的状态变量，应该始终传给set方法一个全新的对象(深度拷贝)来进行修改

    格式：

    let/const  [ 数据 ，修改数据的方法 ] = useState(默认值)

    1. import React from 'react'
    2. import { useState } from 'react'
    3.  
    4. export default function App() {
    5.   const [count, setCount] = useState(0)
    6.   const [obj,setObj] = useState({ name: 'zs', age: 25 })
    7.   console.log(useState(0)) // (2) [0, ƒ]
    8.   const add = (num) => {
    9.     let newCount = count + num
    10.     setCount(newCount)
    11.   }
    12.   const changeObj = () => {
    13.     setObj({ ...obj, age: 26 })
    14.   }
    15.  
    16.   return (
    17.     <div>
    18.       <h2>App --- {count} -- {obj}</h2>
    19.       <button onClick={() => add(1)}>+1</button>
    20.       <button onClick={changeObj}>修改对象属性</button>
    21.     </div>
    22.   )
    23. }

    函数做为参数

    • useState  中也可以传入一个函数做为参数(初始值可能需要经过一些计算而得)
    • 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

    格式：

    const [name, setName] = useState(()=>{

            // 编写计算逻辑    return '计算之后的初始值'

    })

    父组件

    1. import React from 'react'
    2. import { useState } from 'react'
    3. import Son from './pages/Son'
    4.  
    5. export default function App() {
    6.   const [count, setCount] = useState(0)
    7.   const countEdit = (num) => {
    8.     setCount(num)
    9.   }
    10.  
    11.   return (
    12.     <div>
    13.       <h2>App</h2>
    14.       <button onClick={() => countEdit(10)}>10</button>
    15.       <button onClick={() => countEdit(20)}>20</button>
    16.       <Son count={count}></Son>
    17.     </div>
    18.   )
    19. }

    子组件

    1. import React from 'react'
    2. import { useEffect } from 'react'
    3. import { useState } from 'react'
    4.  
    5. export default function Son(props) {
    6.   const [c, setc] = useState(() => props.count)
    7.   useEffect(() => {
    8.     setc(props.count)
    9.   }, [props])
    10.  
    11.   return (
    12.     <div>
    13.       <h3>Son -- {c}</h3>
    14.     </div>
    15.   )
    16. }
    useEffect

    • useEffect函数的作用就是为react函数组件提供副作用处理的
    • useEffect都是在组件dom渲染更新完毕之后才执行的

    副作用

    副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM，ajax请求）

    常见的副作用

    1. 数据请求 ajax发送
    2. 手动修改dom
    3. localstorage操作

    执行时机

    1.不添加依赖项

    • 组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行
      1. 组件初始渲染
      2. 组件更新 （状态数据变化引起的重新渲染，不管结构中使用没使用这个数据状态）
    1. useEffect(()=>{
    2.     console.log('副作用执行了')
    3. })
    1. 添加空数组
    • 组件只在首次渲染时执行一次
    1. useEffect(()=>{
    2. 	 console.log('副作用执行了')
    3. },[])
    1. 添加特定依赖项
    • 副作用函数在首次渲染时执行，在依赖项发生变化时重新执行
      1. 组件初始渲染
      2. 依赖项发生变化时
    1. function App() {  
    2.     const [count, setCount] = useState(0)  
    3.     const [name, setName] = useState('zs') 
    4.     
    5.     useEffect(() => {    
    6.         console.log('副作用执行了')  
    7.     }, [count])  
    8.     
    9.     return (    
    10.         <>      
    11.          <button onClick={() => { setCount(count + 1) }}>{count}</button>      
    12.          <button onClick={() => { setName('cp') }}>{name}</button>    
    13.         </>  
    14.     )
    15. }

    注意事项

    • useEffect 回调函数中用到的状态数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现

    清除副作用

    • 在组件被销毁时，如果有些副作用操作需要被清除(比如定时器)

    语法：

    useEffect(() => {

            // 副作用操作...

            return () => {

                   // 写清除副作用的代码

               }

    })

    eg:  清除定时器案例

    父组件

    1. import React from 'react'
    2. import { useState } from 'react'
    3. import Son from './pages/Son'
    4.  
    5. export default function App() {
    6.   const [flag, setFlag] = useState(true)
    7.  
    8.   return (
    9.     <div>
    10.       <h2>App</h2>
    11.       <button onClick={() => setFlag(!flag)}>显示/隐藏组件</button>
    12.       {flag && <Son></Son>}
    13.     </div>
    14.   )
    15. }

    子组件

    1. import React, { useEffect } from 'react'
    2.  
    3. export default function Son() {
    4.   // 组件进来的时候触发一个定时器
    5.   useEffect(() => {
    6.     let timer = setInterval(() => {
    7.       console.log('定时器执行了')
    8.     }, 1000)
    9.     // 组件销毁时清除定时器
    10.     return () => {
    11.       // 在return里面的函数里写清除操作
    12.       clearInterval(timer)
    13.     }
    14.   }, [])
    15.   return (
    16.     <div>
    17.       <h3>Son</h3>
    18.     </div>
    19.   )
    20. }

    useEffect 发送网络请求

    • 依赖项要是一个空数组，因为依赖项为空数组时只会在页面初始化时触发一次
    1. import React from 'react'
    2. import { useEffect } from 'react'
    3.  
    4. export default function App() {
    5.   const getData = () => {
    6.     fetch('https://cnodejs.org/api/v1/topics')
    7.       .then((response) => response.json())
    8.       .then((data) => console.log(data.data))
    9.   }
    10.   useEffect(() => {
    11.     getData()
    12.   }, [])
    13.  
    14.   return (
    15.     <div>
    16.       <h2>App</h2>
    17.     </div>
    18.   )
    19. }
    案例1
    • 求卷去头部距离的hook
    1. import { useState } from 'react'
    2.  
    3. export default function useWindowScroll() {
    4.   const [y, sety] = useState('')
    5.   window.addEventListener('scroll', function () {
    6.     sety(this.document.documentElement.scrollTop)
    7.   })
    8.   return [y]
    9. }
    10.  
    11. 使用
    12. import React from 'react'
    13. import useWindowScroll from './hook/useWindowScroll'
    14.  
    15. export default function App() {
    16.   const [y] = useWindowScroll()
    17.   return (
    18.     <div style={{ height: 1600 }}>
    19.       <h2>App -- {y}h2>
    20.     div>
    21.   )
    22. }
    案例2
    • 数据改变，会同步到本地
    1. import { useEffect, useState } from 'react'
    2.  
    3. export default function useLocalStorage(key, defaultVal) {
    4.   const [val, setVal] = useState(defaultVal)
    5.   // 只要val发生变化，就同步到本地
    6.   useEffect(() => {
    7.     localStorage.setItem(key, val)
    8.   }, [val, key])
    9.   return [val, setVal]
    10. }
    11.  
    12. 使用
    13. import React from 'react'
    14. import useWindowScroll from './hook/useWindowScroll'
    15. import useLocalStorage from './hook/useLocalStorage'
    16.  
    17. export default function App() {
    18.   const [y] = useWindowScroll()
    19.   const [val, setVal] = useLocalStorage('val', 0)
    20.   const add = () => {
    21.     setVal(val + 1)
    22.   }
    23.  
    24.   return (
    25.     <div style={{ height: 1600 }}>
    26.       <h2>
    27.         App -- {y} -- {val}
    28.       </h2>
    29.       <button onClick={add}>+1</button>
    30.     </div>
    31.   )
    32. }
    useRef
    • 可以获取元素的真实Dom
    1. import React, { useEffect, useRef } from 'react'
    2.  
    3. export default function App() {
    4.   const ipt = useRef(null)
    5.   useEffect(() => {
    6.     console.log(ipt.current.value)
    7.   }, [])
    8.  
    9.   return (
    10.     <div>
    11.       <h2>App</h2>
    12.       <input type="text" ref={ipt} />
    13.     </div>
    14.   )
    15. }
    useContext
    • 传输的数据是响应式的，跨组件传输数据用
    • 如果传递的数据，只需要在整个应用初始化的时候传递一次就可以，则可以在index.js文件中提供数据
    • 如果传递的数据需要状态维护，则可以在app.js中提供数据

    使用步骤

    1. 创建一个context的文件
    2. 使用createContext创建Context对象，并导出
    3. 在顶层组件引入，通过Provider提供数据
    4. 在底层组件引入，通过useContext函数获取数据

    举例

    context.js

    1. import { createContext } from 'react'
    2.  
    3. const Context = createContext()
    4.  
    5. export default Context

    上层组件

    1. import React, { useState } from 'react'
    2. import Son from './pages/Son'
    3. // 1. 引入Context
    4. import Context from './utils/context.js'
    5.  
    6. export default function App() {
    7.   const [msg] = useState('根组件传递的数据')
    8.  
    9.   return (
    10.     <>
    11.       {/* 2. 使用Provider包裹上层组件提供数据 */}
    12.       <Context.Provider value={msg}>
    13.         {/* 根组件 */}
    14.         <div>
    15.           <h2>App</h2>
    16.           <Son></Son>
    17.         </div>
    18.       </Context.Provider>
    19.     </>
    20.   )
    21. }

    下层组件

    1. import React, { useContext } from 'react'
    2. import Context from '../utils/context.js'
    3.  
    4. export default function Son() {
    5.   let val = useContext(Context)
    6.  
    7.   return (
    8.     <div>
    9.       <h3>Son</h3>
    10.       <p>从根组件得到的数据 --- {val}</p>
    11.     </div>
    12.   )
    13. }
    hook使用总结

    补充

    • document.title 可以获取网页最左上的标题

    ReactTookit

    首先进行安装toolkit 和 react-redux

    npm install @reduxjs/toolkit react-redux

    Redux Toolkit 示例

    在src目录下新建stroe文件夹，store文件夹下新建index.js和modules（模块）文件夹

    src >> stroe >> index.js / mudules

    1. 创建 Redux Store（redux仓库）
    • 在我们新建的store文件夹下的index.js里粘贴即可
    1. import { configureStore } from '@reduxjs/toolkit'
    2.  
    3. // 使用configureStore创建一个redux仓库
    4. // 并自动配置了 Redux DevTools 扩展 ，这样你就可以在开发时调试 store
    5. export default configureStore({
    6.   // 此时我们还没有写入  reducer  后面这里再写入，有一个就写一个，也可以写入多个，在reducer大括号里写入
    7.   reducer: {},
    8. })
    2. 为 React 提供 Redux Store
    • 新建完仓库之后，并没有与React产生关联，所以我们需要产生关联，这样React才能进行使用Toolkit

    在index.js中进行关联

    1. import React from 'react'
    2. import ReactDOM from 'react-dom'
    3. import './index.css'
    4. import App from './App'
    5. // 引入数据仓库，只有文件夹，默认会引入文件夹下的index.js
    6. import store from './store'
    7. // 结构出提供者组件，它有一个stroe属性，属性值就是我们要传递的值
    8. import { Provider } from 'react-redux'
    9.  
    10. ReactDOM.render(
    11.   {/* 包裹App组件，这样全局都能进行使用 */}
    12.   <Provider store={store}>
    13.     <App />
    14.   </Provider>,
    15.   document.getElementById('root')
    16. )
    3. 创建 Redux State Slice(切片)
    • 切片可以理解为模块
    • 在modules文件夹下新建counterSlice.js
    1. import { createSlice } from '@reduxjs/toolkit'
    2.  
    3. // 创建react数据切片 利用createSlice()
    4. export const counterSlice = createSlice({
    5.   // 类似于vuex的命名空间，必须是唯一值
    6.   // 与pinia的defineStore()的第一个参数一个意思，都是唯一值，做区分
    7.   name: 'counter',
    8.   // 定义变量
    9.   initialState: {
    10.     value: 0,
    11.   },
    12.   // 定义方法
    13.   reducers: {
    14.     // 方法接收2个参数，第一个参数是变量，第二个参数是载荷(也就是使用方法传入的参数)
    15.     // +1  
    16.     increment: (state) => {
    17.       // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
    18.       // 并不是真正的改变状态值，因为它使用了 Immer 库
    19.       // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
    20.       // 不可变的状态
    21.       // 大致意思就是可以直接修改原先的值，它会产生新的不可变状态，放心大胆修改
    22.       state.value += 1
    23.     },
    24.     // -1
    25.     decrement: (state) => {
    26.       state.value -= 1
    27.     },
    28.     // 这种是使用action的时候传参的
    29.     incrementByAmount: (state, action) => {
    30.       state.value += action.payload
    31.     },
    32.   },
    33. })
    34. // 每个 case reducer 函数会生成对应的 Action creators 需要进行导出，这样组件使用方法或者变量的时候，直接引入就可了
    35. export const { increment, decrement, incrementByAmount } = counterSlice.actions
    36.  
    37. export default counterSlice.reducer
    4. 将 Slice Reducers 添加到 Store 中

    下一步，我们需要从计数切片中引入 reducer 函数，并将它添加到我们的 store 中。通过在 reducer 参数中定义一个字段，我们告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新

    1. import { configureStore } from '@reduxjs/toolkit'
    2. // 引入 reducer 函数
    3. import counterSlice from './modules/counterSlice'
    4.  
    5. // 使用configureStore创建一个redux仓库
    6. // 并自动配置了 Redux DevTools 扩展 ，这样你就可以在开发时调试 store
    7. export default configureStore({
    8.   reducer: {
    9.     // 告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新
    10.     counter: counterSlice,
    11.   },
    12. })
    5. 在 React 组件中使用 Redux 状态和操作

    现在我们可以使用 React-Redux 钩子让 React 组件与 Redux store 交互。我们可以使用 useSelector 从 store 中读取数据，使用 useDispatch dispatch actions。

    1. import React from 'react'
    2. import { useSelector, useDispatch } from 'react-redux'
    3. import { decrement, increment } from '../store/modules/counterSlice'
    4.  
    5. export default function Person() {
    6.   const count = useSelector((state) => state.counter.value)
    7.   const dispatch = useDispatch()
    8.  
    9.   return (
    10.     <div>
    11.       <h2>Person -- {count}</h2>
    12.       <button
    13.         // aria-label="Increment value"
    14.         onClick={() => dispatch(increment())}
    15.       >
    16.         增加
    17.       </button>
    18.       <button
    19.         // aria-label="Decrement value"
    20.         onClick={() => dispatch(decrement())}
    21.       >
    22.         减少
    23.       </button>
    24.     </div>
    25.   )
    26. }
    如何处理异步任务

    counterSlice.js

    1. import { createSlice } from '@reduxjs/toolkit'
    2.  
    3. // 创建react数据切片 利用createSlice()
    4. export const counterSlice = createSlice({
    5.   // 类似于vuex的命名空间，必须是唯一值
    6.   // 与pinia的defineStore()的第一个参数一个意思，都是唯一值，做区分
    7.   name: 'counter',
    8.   // 变量
    9.   initialState: {
    10.     value: 0,
    11.   },
    12.   // 方法
    13.   reducers: {
    14.     // 方法接收2个参数，第一个参数是变量，第二个参数是载荷(也就是使用方法传入的参数)
    15.     increment: (state) => {
    16.       // Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它
    17.       // 并不是真正的改变状态值，因为它使用了 Immer 库
    18.       // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的
    19.       // 不可变的状态
    20.       state.value += 1
    21.     },
    22.     decrement: (state) => {
    23.       state.value -= 1
    24.     },
    25.     incrementByAmount: (state, action) => {
    26.       state.value += action.payload
    27.     },
    28.     // 获取数据的异步请求方法
    29.     getD: (state, action) => {
    30.       fetch('https://cnodejs.org/api/v1/topics')
    31.         .then((response) => response.json())
    32.         .then((res) => console.log(res))
    33.     },
    34.   },
    35. })
    36. // 每个 case reducer 函数会生成对应的 Action creators
    37. export const { increment, decrement, incrementByAmount, getD } =
    38.   counterSlice.actions
    39.  
    40. // 定义异步任务,参数写道外层函数上，利用闭包
    41. export const getData = (payload) => {
    42.   // 内层函数，第一个参数是提交任务的dispatch,第二个参数是获取state的方法
    43.   return (dispatch, getState) => {
    44.     // 获取state中的数据
    45.     console.log(getState().counter)
    46.     // 调用方法
    47.     dispatch(getD())
    48.   }
    49. }
    50.  
    51. export default counterSlice.reducer

    使用

    1. import React from 'react'
    2. import { useSelector, useDispatch } from 'react-redux'
    3. import { decrement, increment, getData } from '../store/modules/counterSlice'
    4.  
    5. export default function Person() {
    6.   const count = useSelector((state) => state.counter.value)
    7.   const dispatch = useDispatch()
    8.  
    9.   return (
    10.     <div>
    11.       <h2>Person -- {count}</h2>
    12.       <button onClick={() => dispatch(increment())}>增加</button>
    13.       <button onClick={() => dispatch(decrement())}>减少</button>
    14.       <button onClick={() => dispatch(getData())}>获取数据</button>
    15.     </div>
    16.   )
    17. }

    结果

    路由

    实现一个简单路由

    1. 先进行安装

    npm i react-router-dom

    1. 创建page文件夹，然后新建需要的页面

    1. 创建router文件夹，新建index.js，然后在index.js中写入路由规则
    1. import { createBrowserRouter } from 'react-router-dom'
    2. import Login from '../page/Login'
    3. import Article from '../page/Article'
    4. import Home from '../page/Home'
    5.  
    6. // 使用的浏览器路由模式
    7. const routes = createBrowserRouter([
    8.   {
    9.     path: '/',
    10.     element: <Home />,
    11.   },
    12.   {
    13.     path: '/login',
    14.     element: <Login />,
    15.   },
    16.   {
    17.     path: '/article',
    18.     element: <Article />,
    19.   },
    20. ])
    21.  
    22. export default routes
    1. 在index.js中，引入路由规则和路由注入方法，并进行配置
    1. import React from 'react'
    2. import ReactDOM from 'react-dom/client'
    3. import './index.css'
    4. // 引入路由规则数组
    5. import routes from './router'
    6. // 引入路由注入方法
    7. import { RouterProvider } from 'react-router-dom'
    8.  
    9. // 引入数据仓库，只有文件夹，默认会引入文件夹下的index.js
    10. import store from './store'
    11. // 结构出提供者组件，它有一个stroe属性，属性值就是我们要传递的值
    12. import { Provider } from 'react-redux'
    13.  
    14. const root = ReactDOM.createRoot(document.getElementById('root'))
    15. root.render(
    16.   <React.StrictMode>
    17.     <Provider store={store}>
    18.       <RouterProvider router={routes}></RouterProvider>
    19.     </Provider>
    20.   </React.StrictMode>
    21. )
    1. 修改app.js（不修改也没事，直接删除也行，反正一进来就匹配的Home页面）
    1. export default function App() {
    2.   return <>
    3. }

    路由跳转

    • 分为声明式导航和编程式导航
    声明式导航
    • 通过Link标签的to属性指定跳转的路由path
    1. import { useSelector, useDispatch } from 'react-redux'
    2. import { decrement, increment } from '../../store/modules/counterSlice'
    3. import { Link } from 'react-router-dom'
    4.  
    5. export default function Home() {
    6.   const count = useSelector((state) => state.counter.value)
    7.   const dispatch = useDispatch()
    8.  
    9.   return (
    10.     <div>
    11.       <h2>Person -- {count}</h2>
    12.       <button onClick={() => dispatch(increment())}>增加</button>
    13.       <button onClick={() => dispatch(decrement())}>减少</button>
    14.       <Link to="/login">跳转到登录页</Link>
    15.       <Link to="/article">跳转到文章</Link>
    16.     </div>
    17.   )
    18. }
    编程式导航
    • 通过useNavigate这个方法来进行跳转
    1. import { useSelector, useDispatch } from 'react-redux'
    2. import { decrement, increment } from '../../store/modules/counterSlice'
    3. import { Link, useNavigate } from 'react-router-dom'
    4.  
    5. export default function Home() {
    6.   const count = useSelector((state) => state.counter.value)
    7.   const dispatch = useDispatch()
    8.  
    9.   const navigate = useNavigate()
    10.  
    11.   const toLogin = () => {
    12.     navigate('/login')
    13.   }
    14.  
    15.   return (
    16.     <div>
    17.       <h2>Person -- {count}</h2>
    18.       <button onClick={() => dispatch(increment())}>增加</button>
    19.       <button onClick={() => dispatch(decrement())}>减少</button>
    20.       <Link to="/login">跳转到登录页</Link>
    21.       <button onClick={() => navigate('/article')}>跳转到文章页</button>
    22.       <button onClick={toLogin}>跳转到登录页</button>
    23.       {/* 下面这样写是不行的 */}
    24.       {/* <button onClick={navigate('/login')}>跳转到登录页</button> */}
    25.     </div>
    26.   )
    27. }

    路由传参

    • 可以在路由后面使用？拼接参数。也可以使用/路径参数形式
    ？形式拼接传参

    传递参数

    1. import { useSelector, useDispatch } from 'react-redux'
    2. import { decrement, increment } from '../../store/modules/counterSlice'
    3. import { Link, useNavigate } from 'react-router-dom'
    4.  
    5. export default function Home() {
    6.   const count = useSelector((state) => state.counter.value)
    7.   const dispatch = useDispatch()
    8.  
    9.   const navigate = useNavigate()
    10.  
    11.   return (
    12.     <div>
    13.       <h2>Person -- {count}</h2>
    14.       <button onClick={() => dispatch(increment())}>增加</button>
    15.       <button onClick={() => dispatch(decrement())}>减少</button>
    16.       <Link to="/login?name=zs&age=25">跳转到登录页</Link>
    17.       <button onClick={() => navigate('/article?name=ls&age=26')}>
    18.         跳转到文章页
    19.       </button>
    20.     </div>
    21.   )
    22. }

    结果：会显示在地址栏上

    接收参数

    1. import React from 'react'
    2. import { Outlet, useSearchParams } from 'react-router-dom'
    3.  
    4. export default function Article() {
    5.   const [params] = useSearchParams()
    6.   const name = params.get('name')
    7.  
    8.   return (
    9.     <div>
    10.       文章页面{name} <Outlet></Outlet>
    11.     </div>
    12.   )
    13. }
    /路径参数传参

    传递参数

    1. import { useSelector, useDispatch } from 'react-redux'
    2. import { decrement, increment } from '../../store/modules/counterSlice'
    3. import { Link, useNavigate } from 'react-router-dom'
    4.  
    5. export default function Home() {
    6.   const count = useSelector((state) => state.counter.value)
    7.   const dispatch = useDispatch()
    8.  
    9.   const navigate = useNavigate()
    10.  
    11.   return (
    12.     <div>
    13.       <h2>Person -- {count}</h2>
    14.       <button onClick={() => dispatch(increment())}>增加</button>
    15.       <button onClick={() => dispatch(decrement())}>减少</button>
    16.       <Link to="/login/100">跳转到登录页</Link>
    17.       <button onClick={() => navigate('/article/100/1')}>跳转到文章页</button>
    18.     </div>
    19.   )
    20. }

    也要修改下路由配置，改为动态路由形式

    1. import { createBrowserRouter } from 'react-router-dom'
    2. import Login from '../page/Login'
    3. import Article from '../page/Article'
    4. import Home from '../page/Home'
    5.  
    6. // 使用的浏览器路由模式
    7. const routes = createBrowserRouter([
    8.   {
    9.     path: '/',
    10.     element: <Home />,
    11.   },
    12.   {
    13.     path: '/login/:id',
    14.     element: <Login />,
    15.   },
    16.   {
    17.     path: '/article/:num/:id',
    18.     element: <Article />,
    19.   },
    20. ])
    21.  
    22. export default routes

    结果：会显示在地址栏上

    接收参数

    Login:

    1. import React from 'react'
    2. import { useParams } from 'react-router-dom'
    3.  
    4. export default function Login() {
    5.   const params = useParams()
    6.   const id = params.id
    7.   return <div>登陆页面{id}div>
    8. }

    Article:

    1. import React from 'react'
    2. import { Outlet, useParams } from 'react-router-dom'
    3.  
    4. export default function Article() {
    5.   const params = useParams()
    6.   const name = params.name
    7.   const id = params.id
    8.  
    9.   return (
    10.     <div>
    11.       文章页面{id}{name} <Outlet></Outlet>
    12.     </div>
    13.   )
    14. }

    嵌套路由

    配置嵌套路由

    1. import { createBrowserRouter } from 'react-router-dom'
    2. import Login from '../page/Login'
    3. import Article from '../page/Article'
    4. import Home from '../page/Home'
    5.  
    6. // 使用的浏览器路由模式
    7. const routes = createBrowserRouter([
    8.   {
    9.     path: '/',
    10.     element: <Home />,
    11.   },
    12.   {
    13.     path: '/login/:id',
    14.     element: <Login />,
    15.     // 嵌套路由
    16.     children: [
    17.       {
    18.         // 不需要带 / 了
    19.         path: 'test',
    20.         element: <Article />,
    21.       },
    22.     ],
    23.   },
    24.   {
    25.     path: '/article/:id/:name',
    26.     element: <Article />,
    27.   },
    28. ])
    29.  
    30. export default routes

    测试

    配置路由出口：在对应的页面配置

    子路由内容就出来了

    设置初始默认页面

    去除path，然后添加index为true

    1. import { createBrowserRouter } from 'react-router-dom'
    2. import Login from '../page/Login'
    3. import Article from '../page/Article'
    4. import Home from '../page/Home'
    5.  
    6. // 使用的浏览器路由模式
    7. const routes = createBrowserRouter([
    8.   {
    9.     path: '/',
    10.     element: <Home />,
    11.   },
    12.   {
    13.     path: '/login/:id',
    14.     element: <Login />,
    15.     // 嵌套路由
    16.     children: [
    17.       {
    18.         // 不需要带 / 了
    19.         // path: 'test',
    20.         index: true,
    21.         element: <Article />,
    22.       },
    23.     ],
    24.   },
    25.   {
    26.     path: '/article/:id/:name',
    27.     element: <Article />,
    28.   },
    29. ])
    30.  
    31. export default routes

    测试

    404页面

    • 一定要放到最后

    两种路由模式

    Hook补充

    useReducer

    • 作用：和useState的作用类似，用来管理相对复杂的状态数据

    案例

    1. import { useReducer } from 'react'
    2. import { Button } from 'antd'
    3.  
    4. const Home = () => {
    5.   const fn = (state, action) => {
    6.     // 根据传入的不同类型，来进行对应的数据操作
    7.     switch (action.type) {
    8.       case 'INC':
    9.         return state + 1
    10.       case 'DEC':
    11.         return state - 1
    12.       default:
    13.         return state
    14.     }
    15.   }
    16.   // num是值，dispatchNum是修改状态的方法(参考useState)
    17.   const [num, dispatchNum] = useReducer(fn, 0)
    18.   const changeNum = (params) => {
    19.     dispatchNum(params)
    20.   }
    21.  
    22.   return (
    23.     <div>
    24.       <h3>{num}</h3>
    25.       <Button onClick={() => changeNum({ type: 'INC' })}>num++</Button>
    26.       <Button onClick={() => changeNum({ type: 'DEC' })}>num--</Button>
    27.     </div>
    28.   )
    29. }
    30.  
    31. export default Home

    useMemo

    • 作用：在组件每次重新渲染的时候缓存计算的结果(缓存的是值，useCallback缓存的是函数)

    首先先看一个场景

    • count1与函数相关，所以count1变化的时候会触发函数
    • 但是count2并没有与函数有什么关联，但是count2变化了，同样也会触发函数的执行，以达到视图的更新。但是这样显然是不合理的。此时就可以使用uesMemok来进行优化

    基本语法

    案例

    1. import React, { useState } from 'react'
    2. import { Button } from 'antd'
    3.  
    4. export default function Home() {
    5.   const [count1, setCount1] = useState(0)
    6.   const [count2, setCount2] = useState(0)
    7.  
    8.   console.log('组件重新渲染了')
    9.  
    10.   const fn = () => {
    11.     console.log('函数调用了' + count1)
    12.   }
    13.  
    14.   return (
    15.     <div>
    16.       <h2>Home{fn()}</h2>
    17.       <Button onClick={() => setCount1(count1 + 1)}>改变count1,count1++</Button>
    18.       <Button onClick={() => setCount2(count2 + 1)}>改变count2,count2++</Button>
    19.     </div>
    20.   )
    21. }
    • fn函数只与count1有关，所以count1变化的时候触发fn函数是正确的。但是经过测试，会发现count2变化的时候也会触发fn函数，这是不对啊

    就可以使用useMome对上面的进行优化

    1. import React, { useMemo, useState } from 'react'
    2. import { Button } from 'antd'
    3.  
    4. export default function Home() {
    5.   const [count1, setCount1] = useState(0)
    6.   const [count2, setCount2] = useState(0)
    7.  
    8.   console.log('组件重新渲染了')
    9.  
    10.   const fn = useMemo(() => {
    11.     console.log('函数调用了' + count1)
    12.   }, [count1])
    13.  
    14.   return (
    15.     <div>
    16.       {/* 由于缓存的是值，所以调用也需要改下 */}
    17.       <h2>Home{fn}</h2>
    18.       <Button onClick={() => setCount1(count1 + 1)}>改变count1,count1++</Button>
    19.       <Button onClick={() => setCount2(count2 + 1)}>改变count2,count2++</Button>
    20.     </div>
    21.   )
    22. }

    React.memo

    • 默认只要父组件有状态更新，子组件就会直接重新渲染，存在性能浪费

    测试结果

    useMomo基本语法

    案例：

    测试结果：

    React.memo对比机制

    • 传递给子组件基本类型数据，如果没有改变，确实不会重新渲染（可以看上面的案例）
    • 但是传递给子组件复杂数据类型，如果没用useSate修饰的，则不管值变没变，都会重新渲染

    测试结果：传递给子组件的count和list并没有改变，但是也触发了子组件渲染

    为了解决这个问题，就可以采用useMemo配合React.memo

    最终方案

    测试结果：

    useCallback

    • 与useMemo不同，useCallback缓存的是函数引用，不是值

    React.forwardRef

    • 使用ref暴露DOM节点给父组件。可以通过React.forwardRef获取子组件DOM

    实现

    useImperativeHandle

    • 通过ref暴露子组件中的方法，区别与React.forwardRef(这个是暴露的子组件DOM)

    案例

    React与Ts

    创建项目(使用的vite)

    npm create vite@latest 项目名 -- --template react-ts

    useState类型

    • 通常React会根据传入useState的默认值来自动推导类型，不需要显式标注类型

    泛型参数
    • useState本身是一个泛型函数
    1. import { useState } from 'react'
    2.  
    3. interface IObj {
    4.   name: string
    5.   age: number
    6. }
    7.  
    8. function App() {
    9.   const [obj] = useState<IObj>({
    10.     name: 'zs',
    11.     age: 25,
    12.   })
    13.  
    14.   return (
    15.     <>
    16.       <h2>App</h2>
    17.       {obj.name} -- {obj.age}
    18.     </>
    19.   )
    20. }
    21.  
    22. export default App

    补充，其实setState里也可以传入一个函数，只要函数返回一个值就行

    初始值为null
    • 有时候，state的初始值设置为了null。则类型就可以使用联合类型
    1. import { useState } from 'react'
    2.  
    3. interface IObj {
    4.   name: string
    5.   age: number
    6. }
    7.  
    8. function App() {
    9.   const [obj] = useState<IObj | null>(null)
    10.  
    11.   return (
    12.     <>
    13.       <h2>App</h2>
    14.       {obj?.name} -- {obj?.age}
    15.     </>
    16.   )
    17. }
    18.  
    19. export default App

    props类型

    案例

    1. import { useState } from 'react'
    2.  
    3. interface IProps {
    4.   count: number
    5. }
    6.  
    7. function App() {
    8.   const [count] = useState(100)
    9.   return (
    10.     <>
    11.       <h2>App</h2>
    12.       <Son count={count}></Son>
    13.     </>
    14.   )
    15. }
    16.  
    17. function Son(props: IProps) {
    18.   return (
    19.     <>
    20.       <h3>子组件 {props.count}</h3>
    21.     </>
    22.   )
    23. }
    24.  
    25. export default App
    为children添加类型

    为事件添加类型

    案例

    1. import { useState } from 'react'
    2.  
    3. interface IProps {
    4.   count: number
    5.   children: React.ReactNode
    6.   getMsg?: (str: string) => void
    7. }
    8.  
    9. function App() {
    10.   const [count] = useState(100)
    11.   const getMsg = (msg: string) => {
    12.     console.log('接收到了子组件的值：', msg)
    13.   }
    14.   return (
    15.     <>
    16.       <h2>App</h2>
    17.       <Son count={count} getMsg={getMsg}>
    18.         传给子组件的内容
    19.       </Son>
    20.     </>
    21.   )
    22. }
    23.  
    24. function Son(props: IProps) {
    25.   const { getMsg } = props
    26.   const sendMsg = () => {
    27.     getMsg?.('子向父传的值')
    28.   }
    29.   return (
    30.     <>
    31.       <h3>子组件 {props.count}</h3>
    32.       <button onClick={sendMsg}>传给父组件的值</button>
    33.     </>
    34.   )
    35. }
    36.  
    37. export default App

    useRef类型

    获取Dom使用

    案例

    1. import { useEffect, useRef } from 'react'
    2.  
    3. function App() {
    4.   const inputRef = useRef<HTMLInputElement>(null)
    5.  
    6.   useEffect(() => {
    7.     inputRef.current?.focus()
    8.   }, [])
    9.  
    10.   return (
    11.     <>
    12.       <h2>App</h2>
    13.       <input ref={inputRef}></input>
    14.     </>
    15.   )
    16. }
    17.  
    18. export default App
    当成稳定的存储器使用

    axios类型

    组合成了一种类型

    案例

    封装axios

    1. import axios from 'axios'
    2.  
    3. const requestInstance = axios.create({
    4.   baseURL: 'http://geek.itheima.net/v1_0',
    5.   timeout: 5000,
    6. })
    7.  
    8. requestInstance.interceptors.request.use(
    9.   (config) => {
    10.     return config
    11.   },
    12.   (error) => {
    13.     return Promise.reject(error)
    14.   }
    15. )
    16.  
    17. requestInstance.interceptors.response.use(
    18.   (response) => {
    19.     return response
    20.   },
    21.   (error) => {
    22.     return Promise.reject(error)
    23.   }
    24. )
    25.  
    26. export default requestInstance

    apis

    1. import { http } from '@/utils'
    2.  
    3. // 定义通用泛型接口
    4. interface IResType<T> {
    5.   data: T
    6.   message: string
    7. }
    8. // 定义data类型
    9. interface IObj {
    10.   id: number
    11.   name: string
    12. }
    13. interface IDataType {
    14.   channels: Array<IObj>
    15. }
    16.  
    17. // 请求频道列表
    18. export const getChannels = () =>
    19.   http.request<IResType<IDataType>>({
    20.     url: '/channels',
    21.   })

  • 相关阅读:
    vue 前端参值后端接收的几种方式
    【开题报告】基于SpringBoot的校园周边攻略平台的设计与实现
    Arduino PLC IDE
    前端工程化——前后端分离，进化流程
    2、Jvm类加载器和双亲委派机制
    《rust学习一》 fleet 配置rust环境
    简答一波 HashMap 常见八股面试题 —— 算法系列（2）
    使用DiskGenius拓展系统盘C盘的容量
    MindSpore和Python中nn.Unfold的区别
    【性能测试】JMeter：集合点，同步定时器的应用实例！
  • 原文地址：https://blog.csdn.net/qq_52845451/article/details/138209630