IT评测·应用市场-qidao123.com

标题: 【HM-React】02. React底子-下 [打印本页]
作者: 钜形不锈钢水箱    时间: 2024-12-7 04:48
标题: 【HM-React】02. React底子-下
React表单控制

受控绑定

   概念：使用React组件的状态（useState）控制表单的状态
  

  1. function App(){
  2.   const [value, setValue] = useState('')
  3.   return (
  4.     <input
  5.       type="text"
  6.       value={value}
  7.       onChange={e => setValue(e.target.value)}
  8.     />
  9.   )
  10. }
复制代码
非受控绑定

   概念：通过获取DOM的方式获取表单的输入数据
  1. function App(){
  2.   const inputRef = useRef(null)
  4.   const onChange = ()=>{
  5.     console.log(inputRef.current.value)
  6.   }
  7.   
  8.   return (
  9.     <input
  10.       type="text"
  11.       ref={inputRef}
  12.       onChange={onChange}
  13.     />
  14.   )
  15. }
复制代码
案例-B站批评案例


React组件通讯

   概念：组件通讯就是组件之间的数据传递, 根据组件嵌套关系的不同，有不同的通讯本领和方法
  

父子通讯-父传子


底子实现

**实现步骤 **
  1. function Son(props){
  2.   return <div>{ props.name }</div>
  3. }
  6. function App(){
  7.   const name = 'this is app name'
  8.   return (
  9.     <div>
  10.        <Son name={name}/>
  11.     </div>
  12.   )
  13. }
复制代码
props说明

props可以传递任意的合法数据，比如数字、字符串、布尔值、数组、对象、函数、JSX

props是只读对象
子组件只能读取props中的数据，不能直接举行修改, 父组件的数据只能由父组件修改
特殊的prop-chilren

   场景：当我们把内容嵌套在组件的标签内部时，组件会主动在名为children的prop属性中吸收该内容
  

父子通讯-子传父


   核心思路：在子组件中调用父组件中的函数并传递参数
  1. function Son({ onGetMsg }){
  2.   const sonMsg = 'this is son msg'
  3.   return (
  4.     <div>
  5.       {/* 在子组件中执行父组件传递过来的函数 */}
  6.       <button onClick={()=>onGetMsg(sonMsg)}>send</button>
  7.     </div>
  8.   )
  9. }
  12. function App(){
  13.   const getMsg = (msg)=>console.log(msg)
  14.   
  15.   return (
  16.     <div>
  17.       {/* 传递父组件中的函数到子组件 */}
  18.        <Son onGetMsg={ getMsg }/>
  19.     </div>
  20.   )
  21. }
复制代码
兄弟组件通讯


   实现思路: 借助 状态提升 机制，通过共同的父组件举行兄弟之间的数据传递
  
  2. // 1. 通过子传父 A -> App
  3. // 2. 通过父传子 App -> B
  5. import { useState } from "react"
  7. function A ({ onGetAName }) {
  8.   // Son组件中的数据
  9.   const name = 'this is A name'
  10.   return (
  11.     <div>
  12.       this is A compnent,
  13.       <button onClick={() => onGetAName(name)}>send</button>
  14.     </div>
  15.   )
  16. }
  18. function B ({ name }) {
  19.   return (
  20.     <div>
  21.       this is B compnent,
  22.       {name}
  23.     </div>
  24.   )
  25. }
  27. function App () {
  28.   const [name, setName] = useState('')
  29.   const getAName = (name) => {
  30.     setName(name)
  31.   }
  32.   return (
  33.     <div>
  34.       this is App
  35.       <A onGetAName={getAName} />
  36.       <B name={name} />
  37.     </div>
  38.   )
  39. }
  41. export default App
复制代码
跨层组件通讯


实现步骤：
  1. // App -> A -> B
  3. import { createContext, useContext } from "react"
  5. // 1. createContext方法创建一个上下文对象
  7. const MsgContext = createContext()
  9. function A () {
  10.   return (
  11.     <div>
  12.       this is A component
  13.       <B />
  14.     </div>
  15.   )
  16. }
  18. function B () {
  19.   // 3. 在底层组件 通过useContext钩子函数使用数据
  20.   const msg = useContext(MsgContext)
  21.   return (
  22.     <div>
  23.       this is B compnent,{msg}
  24.     </div>
  25.   )
  26. }
  28. function App () {
  29.   const msg = 'this is app msg'
  30.   return (
  31.     <div>
  32.       {/* 2. 在顶层组件 通过Provider组件提供数据 */}
  33.       <MsgContext.Provider value={msg}>
  34.         this is App
  35.         <A />
  36.       </MsgContext.Provider>
  37.     </div>
  38.   )
  39. }
  41. export default App
复制代码
React副作用管理-useEffect

概念理解

useEffect是一个React Hook函数，用于在React组件中创建不是由变乱引起而是由渲染自己引起的操作（副作用）, 比 如发送AJAX请求，更改DOM等等

:::warning
说明：上面的组件中没有发生任何的用户变乱，组件渲染完毕之后就需要和服务器要数据，整个过程属于“只由渲染引起的操作”
:::
底子使用

   需求：在组件渲染完毕之后，立刻从服务端获取平道列表数据并显示到页面中
  

说明：
useEffect依赖说明

useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现
依赖项副作用功函数的执行时机没有依赖项组件初始渲染 + 组件更新时执行空数组依赖只在初始渲染时执行一次添加特定依赖项组件初始渲染 + 依赖项变化时执行 扫除副作用

   概念：在useEffect中编写的由渲染自己引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清算掉，这个过程就是清算副作用
  

:::warning
说明：扫除副作用的函数最常见的执行时机是在组件卸载时主动执行
:::
  1. import { useEffect, useState } from "react"
  3. function Son () {
  4.   // 1. 渲染时开启一个定时器
  5.   useEffect(() => {
  6.     const timer = setInterval(() => {
  7.       console.log('定时器执行中...')
  8.     }, 1000)
  10.     return () => {
  11.       // 清除副作用(组件卸载时)
  12.       clearInterval(timer)
  13.     }
  14.   }, [])
  15.   return <div>this is son</div>
  16. }
  18. function App () {
  19.   // 通过条件渲染模拟组件卸载
  20.   const [show, setShow] = useState(true)
  21.   return (
  22.     <div>
  23.       {show && <Son />}
  24.       <button onClick={() => setShow(false)}>卸载Son组件</button>
  25.     </div>
  26.   )
  27. }
  29. export default App
复制代码
自定义Hook实现

   概念：自定义Hook是以 use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用
  

  1. // 封装自定义Hook
  3. // 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用
  5. // 解决思路: 自定义hook
  7. import { useState } from "react"
  9. function useToggle () {
  10.   // 可复用的逻辑代码
  11.   const [value, setValue] = useState(true)
  13.   const toggle = () => setValue(!value)
  15.   // 哪些状态和回调函数需要在其他组件中使用 return
  16.   return {
  17.     value,
  18.     toggle
  19.   }
  20. }
  22. // 封装自定义hook通用思路
  24. // 1. 声明一个以use打头的函数
  25. // 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
  26. // 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
  27. // 4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用
  30. function App () {
  31.   const { value, toggle } = useToggle()
  32.   return (
  33.     <div>
  34.       {value && <div>this is div</div>}
  35.       <button onClick={toggle}>toggle</button>
  36.     </div>
  37.   )
  38. }
  40. export default App
复制代码
React Hooks使用规则


案例-优化B站批评案例



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4