react部分知识点总结

react生命周期函数

React 是一个流行的 JavaScript 库，用于构建用户界面。在 React 组件中，生命周期函数指的是一些特定的方法，它们会在组件的不同阶段被调用。React 的生命周期函数可以分为三个阶段：挂载阶段、更新阶段和卸载阶段。

以下是 React 组件的常见生命周期函数及其执行顺序：

1. 挂载阶段（Mounting Phase）：

   • constructor：组件被创建时调用，用于初始化状态和绑定事件处理程序。
   • static getDerivedStateFromProps：在组件实例化和更新过程中调用，用于根据 props 更新 state。
   • render：根据当前组件的状态和属性来渲染 UI。
   • componentDidMount：组件第一次渲染完成后调用，通常用于执行异步操作、订阅事件等。

2. 更新阶段（Updating Phase）：

   • static getDerivedStateFromProps：在接收到新的 props 或 state 时调用，用于根据最新的 props 更新 state。
   • shouldComponentUpdate：在组件接收到新的 props 或 state 前调用，用于决定是否重新渲染组件，默认返回 true。
   • render：根据更新后的状态和属性重新渲染 UI。
   • componentDidUpdate：在组件更新完成后调用，通常用于处理更新后的 DOM 操作或发起网络请求等。

3. 卸载阶段（Unmounting Phase）：

   • componentWillUnmount：在组件被销毁前调用，用于清理定时器、取消订阅事件等。

此外，React 还提供了一些其他的生命周期函数，如错误处理相关的 componentDidCatch 和 getDerivedStateFromError。需要注意的是，从 React 17 开始，一些生命周期函数已经被标记为过时（deprecated）或移除，建议使用新的替代方法来实现相同的功能。

值得一提的是，React Hooks 是 React 16.8 引入的一种新的编写组件的方式，它可以更方便地管理组件的状态和生命周期，逐渐取代了部分生命周期函数的使用。使用 Hooks 编写的函数组件不再需要类组件中的生命周期函数。

redux的三种规则

Redux是一个用于JavaScript应用程序状态管理的库。它遵循一些规则，以确保应用程序的可预测性和可维护性。下面是Redux的三种主要规则：

1. 单一数据源（Single Source of Truth）：整个应用程序的状态被存储在一个称为"store"的单一数据源中。这意味着所有组件共享相同的状态，并且可以从中读取或修改数据。

2. 状态是只读的（State is Read-Only）：Redux中的状态是不可变的，不能直接修改。要改变状态，必须触发一个称为"action"的纯对象，在reducers中处理该操作后生成新的状态。

3. 使用纯函数进行状态修改（Changes are Made with Pure Functions）：Reducers是纯函数，它们接收先前的状态和一个action作为参数，并根据action的类型返回一个新的状态。Reducers应该是没有副作用的，也就是说，它们应该仅仅依赖于输入参数，而不是依赖于其他外部数据。

这些规则有助于使Redux应用具有可预测性和易于调试。通过统一的数据流和严格控制状态的变化方式，Redux提供了一种有效管理应用程序状态的方式。

jsx是什么，jsx的语法规则

JSX（JavaScript XML）是一种在React框架中使用的语法扩展，它允许在JavaScript代码中编写类似HTML的结构。JSX使得在JavaScript中编写可读性更强、易于理解和组织的UI代码成为可能。

下面是JSX的一些基本语法规则：

1. 标签：使用类似HTML的标签来描述UI组件的结构，例如

   、等。

2. 元素：JSX标签被称为元素，可以像HTML元素一样使用，也可以用作自定义组件。

3. 表达式插值：通过花括号{}将JavaScript表达式嵌入到JSX中，以在UI中动态显示数据或执行逻辑操作。

4. 属性：可以像HTML属性一样给JSX元素添加属性，例如className、id等。注意，JSX中使用的属性名采用驼峰命名法，而不是HTML中的短横线分隔。

5. 自闭合标签：对于没有内容的标签，可以使用自闭合的形式，例如
。

6. 注释：JSX支持类似JavaScript的注释语法，可以使用{/* 注释内容 */}来添加注释。

7. 嵌套：JSX允许标签的嵌套，可以在一个标签中包含其他标签。

8. 条件语句：可以在JSX中使用三元表达式或逻辑与(&&)、逻辑或(||)等运算符来实现条件渲染。

9. 样式：可以使用内联样式对象的方式为JSX元素添加样式，例如style={{ color: 'red', fontSize: '12px' }}。

值得注意的是，JSX本质上是一种语法糖，在编译过程中会被转换为普通的JavaScript代码。React框架通过解析和渲染JSX代码来构建虚拟DOM，并最终将其转换为实际的UI界面。

React为什么使用Hooks？React hooks优势

React使用Hooks是为了提供更好的状态管理和组件复用机制。以下是React Hooks的优势：

1. 状态逻辑复用：传统的React组件有时候在处理共享状态、副作用等方面会产生代码冗余或难以维护的问题。使用Hooks可以将状态逻辑从组件中提取出来，使得状态逻辑可以在不同的组件之间进行复用，减少了重复编写相似逻辑的工作量。

2. 无需Class组件：使用Hooks后，我们可以使用函数组件来编写逻辑复杂的组件，而无需使用类组件。函数组件更加简洁、可读性更高，同时也减少了底层实现的复杂性。

3. 更直观的状态管理：Hooks提供了一系列的状态管理钩子函数，如useState、useEffect等，使得状态管理更加直观和灵活。通过useState，我们可以在函数组件中定义和修改状态，并且使用useEffect可以处理副作用（如订阅事件、网络请求等）。

4. 函数式编程风格：使用Hooks时，我们更加鼓励使用纯函数式编程风格，避免了在类组件中使用this和生命周期方法带来的困扰。这样可以降低开发和维护的复杂度，并提高代码的可测试性和可预测性。

5. 更好的性能优化：Hooks可以帮助React更好地进行性能优化。通过使用memoization、useCallback和useMemo等钩子函数，我们可以避免不必要的重新渲染，提高组件的性能。

6. 更易于理解和学习：相对于类组件的复杂生命周期和this绑定，Hooks的使用更加直观和简单。它们减少了概念的复杂度，并使得初学者更容易理解和上手React的开发。

总的来说，React Hooks提供了更好的状态管理和组件复用机制，以及更直观和灵活的编程体验，使得React开发更加简洁、可维护和高效。

if else条件判断里使用hooks有什么问题

在React中，使用Hooks进行条件判断时，通常可以使用条件运算符（三元表达式）或逻辑与（&&）来实现。例如：

使用三元表达式：

const MyComponent = () => {
  const isLoggedIn = true;
  
  return (
    

      {isLoggedIn ?  : }
    
  );
};

使用逻辑与：

const MyComponent = () => {
  const isLoggedIn = true;
  
  return (
    

      {isLoggedIn && }
    
  );
};

这种方式是React中常见的进行条件渲染的方式，并且无论是使用三元表达式还是逻辑与，都不会引起任何问题。

然而，需要注意的是，在React Hooks的函数组件中，不能直接在条件判断中使用Hooks钩子函数（如useState、useEffect等）。这是因为Hooks需要在每次渲染时以相同的顺序被调用，以确保状态的正确性。如果将Hooks放置在条件判断的语句块中，可能导致Hooks的调用顺序发生变化，从而引发错误。

例如，下面的代码是错误的示例，不应该在if-else语句中使用Hooks：

const MyComponent = () => {
  const isLoggedIn = true;
  
  if (isLoggedIn) {
    const [count, setCount] = useState(0); // 错误：不能在条件判断中使用useState
  } else {
    // ...
  }
  
  return (
    

      {/* ... */}
    
  );
};

如果需要在不同的条件分支中使用Hooks，可以将其提取到外部作用域，或者使用自定义的Hook来处理。

总结起来，使用Hooks进行条件判断时，要避免在条件语句块中直接使用Hooks。应该将Hooks放置在函数组件的顶层，并使用条件表达式来决定渲染哪个组件或执行哪段逻辑。这样能够保持Hooks的调用顺序和稳定性。