React---学习小笔记-EW帮帮网

JSX的使用和原理

JSX

JSX的使用和原理

JSX（JS的语法扩展）的三个规则

1.必须有一个根结点

2.所以标签必须闭合

3.标签属性名称是驼峰命名法
import {createRoot} form 'react-dom/client'

const root = createRoot(document.querySelector('#root'))

root.render(
    <div>
    <h1> Hello JSX </h1>
    <img 
         className = "avatar"
         src="---"
         alt="头像"
   />
    </div>
)
JSX本质是一个JS对象主要:{type,props}

JSX中{}的应用

作用:让JSX变为动态的，可以在标签内容，属性中

列表渲染(使用map方法/列表项添加key 值唯一) 条件渲染样式渲染
//事件绑定

<div className = "box" onClick={ ( ) =>{...} }/>

//事件对象

<a href = "---" onClick = { e => {e,preventDefault() ---}}></a>

React 组件

注意：组件名称首字母需要大写

就是一个JavaScript函数函数中可以添加JSX标记
//创建组件:

const App = () => {

   return <div>React Component</div>

}

//渲染组件

root,render(<App/>)
组件的状态

修改状态的规则

规则：不要直接修改当前状态的值，应创建新值
//count += 1
//setCount(count)

setCount(count+1)
//错误示例 数字添加
//list.push('123')
//setList(list)

//数组删除 list.fliter()


setList([...list,'123'])

//数组修改

setlist(
    list.map(item => {
        if(item === '---'){
              return ---
        }
        return item
   })
    
定义组件
function Button(){
 //业务/组件逻辑
    return <button>hello</button>
}


function App (){

return (

      <div className = "App">
       //自闭和 渲染组件
        </Button>
       //成对标签
        <Button> </Button>
      </div>
    )

}
useState是一个React Hook （函数）

它允许向组件添加一个状态变量从而控制影响组件的渲染效果

状态不可变在react中始终是替换它而不是修改它否则不能引发视图更新

本质:数据驱动视图

const [count,setCount] = useState(0)

Classnames类名一个库

方便类名控制 key 对应类目 value对应条件满足条件显示类等

受控表单绑定

概念:使用React组件的状态useState控制表单的状态

React state绑定input的value属性 Input

（State）把input最新的value值设置给state （Value）
const [value,setValue] = useState('')

<input 
    text = "text"
    value = {value}
    onChange = {(e) => setValue(e) }
/> 
    
组件通信

父传子

子传父

兄弟组件

跨层传递数据

1.使用createContext方法创建一个上下文对象Ctx

2.在顶层组件(App)中通过Ctx.Provider组件提供数据

3.在底层组件(B)中通过useContext钩子函数获取消费数据

useEffect

依赖项副作用函数执行时机

没有依赖性组件初始渲染+组件更新时执行

空数组依赖只在初始渲染时执行一次

添加特定依赖项组件初始渲染+特定依赖项变化时执行
function App(){
    const  [count,setCount] = useState(0)
    useEffect(() => {
    console.log("副作用函数执行！")
    },[count]) //若无依赖项 则全局组件任一更新都触发
}
组件卸载
function Son(){
    useEffect(()=>{
    const timer = setInterval(()=>{   
    console.log("123")
    },1000)

    return () => {
    clearInterval(timer)
        }    
    },[])
    return <div>this is son </div>
}

function App(){
    const [show,setShow] = useState(true)
    return (
    <div>    
    {show&&<Son/>}
    <button onClick={() =>setShow(flase)}>卸载So组件</button>
    </div>
 )
}
export default App
注意：对象不是应该react child /结点不能直接渲染

使用sass时需要手动安装sass包 npm i sass

对于本地图片的导入需要导入
import avatar from '文件路径'

Hook

hook的概念:

Hook（钩子）是一种编程机制，允许开发者在特定事件发生时插入自定义代码或逻辑‌，广泛应用于操作系统（如Windows消息处理）和软件开发中，用于拦截、监视或修改系统或应用程序的行为。‌‌

Hook的核心概念‌

Hook的核心功能是‌拦截并处理特定事件或消息‌。其名称源自“钩子”的物理特性——像钩子一样“抓住”事件或数据流，并在传递过程中插入自定义逻辑。主要分为两类：

‌系统级Hook‌：监视整个系统的消息（如键盘、鼠标事件），需通过动态链接库（DLL）实现。‌‌1‌

‌线程级Hook‌：仅针对特定线程的消息，作用范围更小。‌‌

‌技术原理与实现‌

‌消息拦截机制‌：Hook通过维护钩子链表，将自定义回调函数挂载到系统消息处理流程中。消息到达目标前，会优先触发钩子函数。‌‌

‌执行顺序‌：后安装的钩子优先执行，支持链式传递或终止消息。‌‌

‌开发语言‌：传统上使用C/C++（如Windows API），但现代语言（如Python、Java）也可实现类似功能，但通常限于应用层。‌‌

‌应用场景‌

‌系统监控‌：截获键盘输入、鼠标动作（如屏幕取词）。‌‌

‌功能扩展‌：在不修改源码的情况下注入逻辑（如埋点统计、AOP编程）。‌‌

‌安全防护‌：检测恶意行为（如键盘记录器）。‌‌

自定义Hook函数

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

封装自定义Hook通用思路

1.声明一个以use打头的函数

2.在函数体内封装可复用的逻辑

3.把组件用到的状态或者回调return 出去（以对象或数组）

4.在哪个组件中要用到这个逻辑，就执行这个函数，解构出来的状态和回调进行使用

使用规则：

只能在组件中或者其它自定义Hook函数中调用

只能在组件的顶层调用，不能嵌套在if，for,其它函数中

Redux

步骤:

定义一个reducer函数(根据当前想要做的修改返回一个新状态)

使用createStore方法传入reducer函数，生成一个store实例对象

使用store实例的susscirbe方法订阅数据变化(数据变化，得到通知）

使用store实例的dispatch方法提交action对象触发数据变化(告诉reducer怎么改数据)

使用store实例的getState方法获取最新的状态数据更新到视图中

核心管理数据流程

state:一个对象存放我们管理的数据状态

action:一个对象描述修改内容

reducer:一个函数根据action生成新状态

React---学习小笔记

JSX

JSX的使用和原理

JSX中{}的应用

React 组件

组件的状态

定义组件

受控表单绑定

组件通信

Hook

hook的概念:

Hook的核心概念‌

‌技术原理与实现‌

‌应用场景‌

自定义Hook函数

Redux

网站公告

今日签到

热门文章

最新发布

依赖项	副作用函数执行时机
没有依赖性	组件初始渲染+组件更新时执行
空数组依赖	只在初始渲染时执行一次
添加特定依赖项	组件初始渲染+特定依赖项变化时执行