学习react小记_react巧记-CSDN博客

第一个参数是一个函数，定义了当副作用触发时执行的逻辑。
第二个参数是数组形式。useEffect 只有在依赖项发生变化时才会重新执行。useEffect 无法接受其他类型（如对象、字符串等）作为第二个参数。如果这个数组为空（[]），那么该副作用只会在组件挂载时执行一次。
数组中的元素可以是任何可以追踪变化的值（如状态、props等），但它们都必须是可序列化的。如果依赖项是对象或数组，只有引用发生变化时，useEffect 才会重新执行。

应用场景：

数据获取：在组件加载时从服务器获取数据。
订阅/取消订阅：添加事件监听器或其他外部资源，并在组件卸载时清理它们。
更新 DOM：在渲染之后进行 DOM 操作。

譬如这里的依赖项是 defaultConfig，在这段代码中，当 defaultConfig 发生变化时，useEffect 内部的函数会被执行。这段代码的目的是确保当新的 defaultConfig 被提供时，它能够与当前的 inputs 合并，并且不会覆盖已有的输入值。这有助于在初次渲染或配置变化时，自动应用默认配置，同时保留用户已输入的内容。

 useEffect(() => {
    const isReady = defaultConfig && Object.keys(defaultConfig).length > 0
    if (isReady) {
      setInputs({
        ...defaultConfig,
        ...inputs,
      })
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [defaultConfig])

1.1 如果在 `useEffect` 中没有声明第二个参数（依赖项数组），则会导致 `useEffect` 的行为有所不同。具体来说，以下是几种可能的情况：

1.1.1 没有依赖项数组

如果完全不传入第二个参数，useEffect 会在每次组件重新渲染时都执行。也就是说，每次组件的状态或属性变化导致组件重新渲染时，useEffect 都会被调用。这种情况下：

useEffect(() => {
  // 这段代码会在每次渲染时执行
  const isReady = defaultConfig && Object.keys(defaultConfig).length > 0;
  if (isReady) {
    setInputs({
      ...defaultConfig,
      ...inputs,
    });
  }
});

1.1.2 性能影响

频繁执行：没有依赖项数组可能会导致不必要的性能开销，特别是在渲染频率较高的情况下。每次渲染都执行副作用，可能导致多次更新状态、重新计算等操作，从而影响性能。
状态不一致：如果 inputs 的值也在这个 useEffect 中变化，可能会导致组件陷入无限循环，因为 setInputs 会导致组件重新渲染，从而再触发 useEffect。

1.1.3 使用空数组

如果传入一个空数组 [] 作为第二个参数，useEffect 只会在组件首次挂载时执行一次，之后不会再执行：

useEffect(() => {
  // 这段代码只会在组件挂载时执行一次
  const isReady = defaultConfig && Object.keys(defaultConfig).length > 0;
  if (isReady) {
    setInputs({
      ...defaultConfig,
      ...inputs,
    });
  }
}, []);

1.1.4 包含依赖项

当你传入 defaultConfig 作为依赖项时，useEffect 只会在 defaultConfig 变化时执行，这样可以确保副作用只在相关数据变化时被触发，从而保持组件的高效和响应性。

useEffect(() => {
  // 这段代码只会在 defaultConfig 变化时执行
  const isReady = defaultConfig && Object.keys(defaultConfig).length > 0;
  if (isReady) {
    setInputs({
      ...defaultConfig,
      ...inputs,
    });
  }
}, [defaultConfig]);

总结

没有依赖项：每次渲染都会执行 useEffect，可能导致性能问题和状态不一致。
空数组 []：useEffect 只在组件首次挂载时执行。
有依赖项（如 [defaultConfig]）：useEffect 只在依赖项变化时执行，适用于需要在特定数据变化时执行副作用的情况。

2、useCallback

作用：

useCallback 是用于缓存函数的 Hook。它的主要作用是防止不必要的函数重新创建，尤其是在组件每次渲染时。如果一个函数依赖于某些特定的状态或 props，并且这个依赖没有发生变化，那么 useCallback 会返回缓存的函数，而不是每次重新创建新的函数。

语法：

第一个参数是你想要缓存的回调函数。
第二个参数是依赖数组。如果数组中的依赖没有发生变化，那么 useCallback 返回的仍是上一次缓存的函数。

const memoizedCallback = useCallback(() => {
  // 函数逻辑
}, [dependency1, dependency2]);

应用场景：

性能优化：当一个函数被传递给子组件或作为依赖传递给 useEffect 时，避免子组件或副作用因函数引用改变而重新渲染或执行。
避免不必要的 re-render：当传递的回调函数（例如 onClick）被传递给子组件时，如果不使用 useCallback，每次父组件渲染时，子组件也会重新渲染，因为函数的引用发生了变化。

// 例子：

const handleClick = useCallback(() => {
  console.log('Button clicked');
}, []); // 没有依赖，函数只创建一次

3、useState

返回一个包含两个元素的数组：

当前状态的值，类似于类组件中的 this.state。
更新状态的函数，类似于类组件中的 this.setState。

基本语法如下：

const [state, setState] = useState(initialValue);

state 是当前的状态值。
setState 是用来更新状态的函数。
initialValue 是状态的初始值。

// 假设你要在组件中跟踪一个计数器的值：


import React, { useState } from 'react';

function Counter() {
  // 定义一个名为 count 的状态变量，初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

// 在这个例子中：

// 初始状态 count 是 0。
// 每次点击按钮时，通过调用 setCount(count + 1)，更新状态，使 count 加 1。

应用场景

useState 非常适合在函数组件中需要管理简单状态的场景。以下是一些典型应用场景：

表单输入管理：跟踪用户输入的状态，比如文本框的值。
界面交互控制：如按钮的点击次数、加载状态（loading）、是否展开内容等。
简单数据缓存：如保存 API 数据的局部状态。

二、关于JSX语法

1、基本语法

JSX看起来像HTML，但实际上它被转换成JavaScript代码。一个简单的JSX语法示例如下：

const element = <h1>Hello, world!</h1>;

2、组件与 JSX

函数组件：用 JSX 可以返回一个组件。

function Welcome() {
  return <h1>Hello, React!</h1>;
}

类组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

3、嵌套元素

JSX 可以像 HTML 一样嵌套元素：

const element = (
  <div>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </div>
);

4、JSX 表达式

在 JSX 中，可以使用 {} 包裹任意有效的 JavaScript 表达式。这可以是变量、函数调用或复杂的表达式：

const name = "John";
const element = <h1>Hello, {name}!</h1>;

在这个例子中，{name} 是一个 JavaScript 表达式，它会被渲染为 "Hello, John!"。

5、条件渲染

可以使用 JavaScript 的条件表达式（如三元运算符）在 JSX 中进行条件渲染：

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
  </div>
);

6、属性（Props）传递

JSX 标签可以带有属性（类似于 HTML 的属性），这些属性可以是字符串、变量、甚至函数：

const element = <img src={imageURL} alt="A beautiful scenery" />;

属性值也可以使用表达式：

const isDisabled = true;
const button = <button disabled={isDisabled}>Click me</button>;

7、样式与类名

在 JSX 中应用样式时，class 需要写成 className，因为 class 是 JavaScript 的保留字：

const element = <div className="container">Content</div>;

内联样式则使用 style 属性，并以对象形式传入：

const element = <div style={{ color: 'blue', fontSize: '14px' }}>Styled Text</div>;

8、事件处理

JSX 中可以直接将事件处理函数绑定到元素上，类似于 HTML 的事件：

function handleClick() {
  alert('Button clicked!');
}

const button = <button onClick={handleClick}>Click me</button>;

9、子元素

JSX 元素可以有子元素，子元素可以是其他 JSX 元素或字符串：

const element = (
  <div>
    <h1>Title</h1>
    <p>This is a paragraph with <strong>bold</strong> text.</p>
  </div>
);

10、JSX 注释

注释不能像普通 JavaScript 那样写在 JSX 内部，必须用 {} 包裹

const element = (
  <div>
    {/* This is a comment */}
    <h1>Hello, world!</h1>
  </div>
);

11、在 JSX 语法中，

花括号 {} 用于插入 JavaScript 表达式。如果你想在 JSX 中插入任何 JavaScript 代码（包括数字数组、对象、函数等），都需要使用 {} 包裹。譬如以下传递的数组：


// 数组形式
<Profile
  awards={['Nobel Prize in Physics', 'Nobel Prize in Chemistry', 'Davy Medal', 'Matteucci Medal']}
/>


// 数字
<Profile age={66} />

如果传递的是字符串，可以这么写：

<Profile name="Maria Skłodowska-Curie" />

高级特性

Fragment 如果不想在渲染时生成额外的 HTML 标签，可以使用 React.Fragment 或者简写形式 <> 来包裹多个元素：
```
return (
  <>
    <h1>Title</h1>
    <p>Description text</p>
  </>
);
```
JSX 展开运算符 可以使用 JavaScript 的展开运算符来传递所有的 props：
```
const props = { name: 'John', age: 25 };
const element = <User {...props} />;
```
自闭合标签 类似于 XML，单标签元素如 <img /> 或 <input />，必须使用自闭合的写法
```
const element = <img src={imageURL} alt="Image" />;
```

条件渲染的替代写法 除了三元运算符之外，还可以使用逻辑 && 来简洁地处理条件渲染：

const messages = [];
return (
  <div>
    {messages.length > 0 && <h2>You have {messages.length} unread messages.</h2>}
  </div>
);

总结

持续记录中....