React生命周期管理与组件交互详解-CSDN博客

1、生命周期；

挂载阶段（Mounting）

constructor(props)：
1. 在组件被创建时调用。初始化组件的状态（state）和绑定方法。
static getDerivedStateFromProps(props, state)：
1. 在组件实例化和接收新的 props 时被调用。用于在渲染前更新状态。
render()：
1. 渲染组件的 UI 表现。返回 React 元素树的根节点。
componentDidMount()：
1. 在组件被插入到 DOM 后调用。通常用于进行异步操作，如数据获取、订阅事件。

class MyComponent extends React.Component {
  componentDidMount() {
    // 在组件挂载后进行异步数据请求
    fetchData()
      .then(data => {
        // 处理获取到的数据
        this.setState({ data });
      })
      .catch(error => {
        // 处理错误
        console.error('Error fetching data:', error);
      });
  }

更新阶段（Updating）

static getDerivedStateFromProps(props, state)：
1. 同挂载阶段，但在每次更新时都会调用。
shouldComponentUpdate(nextProps, nextState)：
1. 在组件更新前调用。返回 true 表示组件会进行更新，返回 false 表示组件将不会进行更新。
render()：
1. 同挂载阶段。
getSnapshotBeforeUpdate(prevProps, prevState)：
1. 在 render 之后，更新 DOM 之前调用。用于获取更新前的 DOM 快照。
componentDidUpdate(prevProps, prevState, snapshot)：
1. 在组件更新后调用。通常用于处理更新后的操作，如更新后的 DOM 操作。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  componentDidUpdate(prevProps, prevState) {
    // 在组件更新后，可以进行一些额外的操作，比如根据新的状态执行某些逻辑
    console.log('Component updated. Previous state:', prevState);
    console.log('Current state:', this.state);
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

卸载阶段（Unmounting）

componentWillUnmount()：

在组件从 DOM 中移除时调用。通常用于清理操作，如取消订阅、清除定时器。

错误处理（Error Handling）

static getDerivedStateFromError(error)：
1. 在渲染阶段捕获 JavaScript 错误。返回一个新的状态对象，以便在 componentDidCatch 中使用。
componentDidCatch(error, info)：
1. 在组件的子组件抛出错误后被调用。用于记录错误信息、发送错误报告等。

2、组件调用

可以通过在父组件中使用 ref 来获取对子组件实例的引用，从而调用子组件的方法和获取其数据。

  constructor(props) {
    super(props);
    // 创建一个 ref 对象
    this.childRef = React.createRef();
  }
  // 在某个事件处理函数或生命周期中使用 ref 获取子组件实例
  handleButtonClick = () => {
    // 调用子组件的方法
    this.childRef.current.childMethod();
    // 获取子组件的数据
    const childData = this.childRef.current.state.data;
    console.log('Data from child:', childData);
  }

子组件可以通过在 props 中传递函数，将父组件的方法传递给子组件，从而实现子组件调用父组件的方法

class ParentComponent extends React.Component {
  // 父组件的方法
  parentMethod = (dataFromChild) => {
    console.log('Data from child:', dataFromChild);
  }
  render() {
    return <ChildComponent onChildClick={this.parentMethod} />;
  }
}

class ChildComponent extends React.Component {
  // 子组件中某个事件处理函数中调用父组件的方法，并传递数据
  handleClick = () => {
    const data = 'Hello from child!';
    this.props.onChildClick(data);
  }
  render() {
    return <button onClick={this.handleClick}>Call Parent Method</button>;
  }
}

3、循环 & 分支

循环

使用 map 函数在 JSX 中循环渲染这些数据

import React from 'react';

class MyComponent extends React.Component {
  render() {
    const data = [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
    ];

    return (
      <div>
        {/* 使用 map 函数循环渲染数据 */}
        {data.map(item => (
          // 每个生成的元素需要有唯一的 key 属性
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    );
  }
}

分支

定义条件： 确定用于分支的条件，可以是状态、属性或其他数据。
使用条件语句： 在 render 方法中使用条件语句，根据条件决定渲染哪一部分 JSX。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false,
    };
  }

  render() {
    return (
      <div>
        <h1>Conditional Rendering</h1>
        {/* 使用三元运算符进行条件渲染 */}
        {this.state.isLoggedIn ? <p>Welcome, user!</p> : <p>Please     log in.</p>}
      </div>
    );
  }
}

export default MyComponent;

4、Mobx ｜ Redux

MobX 和 Redux 的主要区别是什么？
答案：MobX 更加简单直观，而 Redux 是基于不可变状态和单一数据源的更严格的状态管理库。
什么是 Redux 中的 Action？
答案：Action 是一个描述发生了什么的纯 JavaScript 对象，它是改变状态的唯一途径。
Redux 中的 Reducer 是什么？
答案：Reducer 是一个纯函数，接受先前的状态和一个 action，返回新的状态。
MobX 的核心概念是什么？
答案：MobX 的核心是可观察对象和响应式函数，通过它们来实现状态的自动更新。
Redux 中的 Middleware 有什么作用？
答案：Middleware 是 Redux 中的扩展点，用于处理 action 在被发起之后，到达 Reducer 之前的扩展逻辑。
MobX 中的 @computed 是什么？
答案：@computed 是 MobX 中的一个装饰器，用于创建计算属性，其值会根据依赖的可观察数据自动更新。
Redux 中什么是异步操作？如何处理异步操作？
答案：异步操作是指包含副作用的 action。可以使用中间件（如 Redux Thunk 或 Redux Saga）来处理异步操作。
MobX 的 autorun 和 reaction 有什么区别？
答案：autorun 用于创建响应式函数，而 reaction 用于在满足特定条件时执行函数。
Redux 中的 Connect 函数有什么作用？
答案：connect 是一个用于连接 React 组件与 Redux 状态的函数，它返回一个新的连接后的组件。
MobX 中的动作（action）是什么？
答案：在 MobX 中，动作是修改状态的函数，通常使用 @action 装饰器来定义。

5. react相关面试题

React 中受控组件和非受控组件有什么区别？
答案：受控组件受 React 状态控制，非受控组件不受
React 状态控制。什么是 React Hooks？
答案：Hooks 是 React 16.8 引入的一种新特性，使你能够在函数组件中使用状态和其他 React 特性。
什么是 JSX？
答案：JSX 是 JavaScript 的语法扩展，用于在 JavaScript 代码中编写类似 XML 的语法，用于声明 React 元素。
React 中的 refs 是什么？
答案：ref 是用于访问 React 元素的引用，通常用于获取 DOM 元素或 React 组件。
React 中的虚拟 DOM 是什么？
答案：虚拟 DOM 是 React 内部使用的一种表示真实 DOM 树的数据结构，用于提高性能。
React 中的高阶组件是什么？
答案：高阶组件是一个函数，接受一个组件并返回一个新组件，用于复用组件逻辑。
React 中的 PropTypes 有什么作用？
答案：PropTypes 用于检查组件接收的 props 是否符合预期的类型。
React 中如何处理表单输入？
答案：可以使用受控组件或使用 React Hooks 中的 useState 处理表单输入。
React 中的 Portal 是什么？
答案：Portal 允许将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点中。