当前位置：首页 > article >正文

react 基础学习笔记

article 2024/10/24 10:11:28

1.react 语法

①数据渲染

函数组件将HTML结构直接写在函数的返回值中

JSX只能有一个根元素

JSX插值写法

插值可以使用的位置
1.标签内容；

2.标签属性

JSX 条件渲染：三目运算符；

JSX根据数据进行列表渲染：map()方法（注意需要唯一的key）

diff算法：key 用来在虚拟 DOM中，在同一级目录中，去保证当前元素的唯一性

②事件处理操作

在JSX里面属性通常是以驼峰形式命名

③状态处理

（1）对象属性修改

响应式数据驱动页面内容进行更新 ——>useState函数就能解决这个问题

useState(默认内容)函数调用会返回一个数组，可以解构出来为：第一个为当前数据的引用，第二个用来修改这个状态。
注意：set是一个直接换掉的操作，而非局部的修改。因此数据的更新需要将数据写全（简化书写可以通过展开运算符——注意新属性必须后写）。

（2）数组形态操作

添加和排序，指定位置删除，插入做更新同理也需要注意位置（可以借助filter函数）

2.组件通信与插槽

React 中的组件分为两种类型一种是 React DOM 组件，一种是 React 组件。

DOM 组件指的是 React支持的所有的 HTML和 SVG 标签

DOM 组件的类属性 className，同时也可以通过style写键值对（但要写成驼峰命名）来进行 style 属性的设置。

DOM组件示例：

展开语法：将所有属性提前预制为一个对象

JSX 的展开操作并不是ES6的展开运算符，不能在没有容器的地方单独使用。

在子组件拿到数据时，一般通过数据的解构。

不只是可以通过传递键值，也可以传递状态表示 active 一般默认为 true。

子组件向父组件传递状态为：

子组件也是在props处声明事件

多级组件穿透的钩子 useContext() ——> 能够在组件树中传递数据，而无需显式地在每一层组件中通过 props 传递数据。

3.ReactHooks

（1）useRender

userRender(操作的函数, 状态默认值)

（2）useRef

useRef 不是一个响应式的状态，不会随着组件更新而更新。通过调用 useRef 返回包含的current属性的对象进行赋值。

默认子组件不对外开发内部功能

如果希望子组件内部的函数方法能够被父组件进行使用，便需要进行函数表示式进行定义。

子组件ref为childRef便能够实现在父组件使用子组件的函数方法。

（3）useEffect

即副作用函数，组件渲染时执行。

后面依赖数组为变量状态变更就会导致副作用重新执行。

（4）useMemo

进行数据缓存的钩子。用于在组件渲染过程中缓存计算结果。它接收一个创建函数和一个依赖数组，仅当依赖数组中的某个值改变时，才会重新计算创建函数的结果。这有助于避免在每次渲染时都进行昂贵的计算，从而提升性能。

import React, { useMemo, useState } from 'react';  
  
function FilterList({ items }) {  
  const [searchTerm, setSearchTerm] = useState('');  
  
  // 使用 useMemo 来缓存过滤后的结果  
  const filteredItems = useMemo(() => {  
    return items.filter(item => item.toLowerCase().includes(searchTerm.toLowerCase()));  
  }, [items, searchTerm]);  
  
  return (  
    <div>  
      <input  
        type="text"  
        value={searchTerm}  
        onChange={e => setSearchTerm(e.target.value)}  
        placeholder="Search..."  
      />  
      <ul>  
        {filteredItems.map((item, index) => (  
          <li key={index}>{item}</li>  
        ))}  
      </ul>  
    </div>  
  );  
}

根据一个列表和一个搜索词来过滤结果。可以使用 useMemo 来缓存过滤后的结果，避免每次输入改变时都重新计算整个列表。

（5）useCallback

进行函数缓存的钩子（解决父组件变更导致子组件重新渲染的问题）。用于缓存函数定义。它接收一个返回函数的函数和一个依赖数组，仅当依赖数组中的某个值改变时，才会返回一个新的函数。这主要用于优化性能，特别是在父组件传递给子组件的函数作为 props 时，可以避免子组件因父组件重新渲染而接收到新的函数引用，从而避免不必要的重新渲染。

import React, { useState, useCallback } from 'react';  
  
function ParentComponent() {  
  const [count, setCount] = useState(0);  
  
  // 使用 useCallback 来缓存 handleClick 函数  
  const handleClick = useCallback(() => {  
    console.log('Button clicked', count);  
  }, [count]);  
  
  return (  
    <div>  
      <p>Count: {count}</p>  
      <button onClick={() => setCount(count + 1)}>Increment</button>  
      <ChildComponent onButtonClick={handleClick} />  
    </div>  
  );  
}  
  
function ChildComponent({ onButtonClick }) {  
  console.log('ChildComponent rendered');  
  
  return (  
    <button onClick={onButtonClick}>Click me from Child</button>  
  );  
}