React面试题一

程序猿CCC

已于 2024-01-05 21:22:30 修改

阅读量833

点赞数 13

文章标签： react.js javascript 前端

于 2024-01-05 21:20:16 首次发布

本文链接：https://blog.csdn.net/m0_59498406/article/details/135418146

版权

一、redux中同步action与异步action最大的区别是什么？

Redux中的同步action和异步action的最大区别在于它们处理动作（actions）的方式和触发时间：

同步Action：
- 同步action是指立即执行的操作，不涉及任何异步操作。
- 同步action的动作创建函数（action creator）会立即返回一个包含动作类型和数据的action对象，通常使用dispatch函数触发。
- 同步action用于处理立即执行的操作，例如用户点击按钮、输入框变化等。
- 由于同步action是立即执行的，所以它们通常用于处理简单的状态变更，不需要等待异步操作的结果。
示例：
```
const increment = () => ({
  type: 'INCREMENT',
});
dispatch(increment()); // 触发同步action
```
异步Action：
- 异步action是指涉及异步操作的动作，需要等待异步操作的结果，例如网络请求或定时任务。
- 异步action的动作创建函数通常会返回一个函数，而不是一个包含动作对象的函数。这个返回的函数通常接受dispatch和getState作为参数，允许在异步操作完成后触发一个或多个同步action。
- 异步action用于处理需要等待异步操作结果的情况，例如从服务器获取数据后更新应用状态。
示例：
```
const fetchData = () => (dispatch, getState) => {
  dispatch({ type: 'FETCH_DATA_REQUEST' });
  // 异步操作，例如发起网络请求
  api.fetchData().then(
    (data) => {
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    },
    (error) => {
      dispatch({ type: 'FETCH_DATA_FAILURE', error });
    }
  );
};
dispatch(fetchData()); // 触发异步action
```

总之，同步action用于立即触发状态变更，而异步action用于处理需要等待异步操作结果的情况。在Redux中，通常使用异步action来处理网络请求、定时任务等涉及异步操作的情况，以确保应用程序状态的一致性。同步action通常用于处理用户的交互操作和状态变更，它们不需要等待异步结果。

二、说说React生命周期中有哪些坑？为什么要移除will相关生命周期？

在React生命周期中，有几个常见的坑需要注意：

1.不正确使用componentDidMount和componentDidUpdate：应该尽量避免在这里进行复杂的操作，可以考虑使用异步操作或放在其他生命周期中处理

2.避免频繁使用setState：如果频繁调用setState可能导致性能问题

3.不要直接修改this.state：应该避免直接修改组件状态的方式，而是使用setState函数来更新状态。

移除will相关的生命周期函数得主要原因是：

1.React团队认为这些函数的命名容易误导开发者，并且可能导致一些问题

2.在17版本中标记will相关的生命周期函数为过时

3.弃用will相关的生命周期函数是为了提升开发者的开发体验和避免潜在的问题

三、React组件之间如何通信？

1.Props传递：这是React中最基本的组件通信方式。你可以通过将数据作为props传递给子组件来实现通信。父组件可以向子组件传递数据，然后子组件可以访问这些数据并进行渲染。

// 父组件
function ParentComponent() {
  const data = "这是父组件传递的数据";
  return <ChildComponent data={data} />;
}

// 子组件
function ChildComponent(props) {
  return <div>{props.data}</div>;
}

2.回调函数：父组件可以将函数作为props传递给子组件，以便子组件可以调用这些函数来通知父组件发生了某些事件。

// 父组件
function ParentComponent() {
  const handleChildClick = () => {
    // 处理子组件点击事件
  };

  return <ChildComponent onClick={handleChildClick} />;
}

// 子组件
function ChildComponent(props) {
  return <button onClick={props.onClick}>点击我</button>;
}

3.上下文（Context）：React的上下文机制允许你在组件层次结构中的祖先组件和后代组件之间共享数据，而不必手动传递props。这对于全局状态管理非常有用。

4.状态管理库：对于大型应用程序，你可以使用状态管理库（如Redux、Mobx、或React的useContext和useReducer）来管理应用的状态，以便多个组件可以访问和修改共享的状态。

5.事件总线：你可以创建一个事件总线对象，允许组件订阅和触发事件，以便它们可以相互通信。这在某些特定情况下很有用，但要小心不要滥用它，以避免代码变得难以维护。

四、说说react的事件机制？

React的事件机制是一种用于处理用户界面事件的方式，它建立在原生DOM事件的基础上，提供了一种更高级、更一致的方式来处理事件。以下是React的事件机制的主要特点和工作原理：

1. 合成事件（Synthetic Events）：

React引入了合成事件的概念，它是一种React自己实现的事件系统，用于封装原生浏览器事件。合成事件提供了一致性的接口，无论在不同浏览器中事件如何实际触发，React都可以提供相同的事件对象。

2. 事件绑定：

在React中，你可以使用类似HTML中的onClick、onMouseDown等属性来绑定事件处理程序。这些属性的值通常是一个函数，当事件被触发时，React会调用这些函数。

<button onClick={handleClick}>Click Me</button>

3. 事件处理程序：

事件处理程序是普通的JavaScript函数，它们接收一个合成事件对象作为参数，可以访问事件的信息，如类型、目标、位置等。你可以在事件处理程序中执行任何自定义逻辑。

function handleClick(event) {
  // 访问事件信息
  console.log('Button clicked');
}

4. 事件代理：

React将事件处理程序注册在组件的顶层，然后使用事件代理来处理实际的DOM事件。这意味着React维护一个事件监听器，而不是在每个DOM元素上都添加监听器，以提高性能。

5. 合成事件对象：

React的合成事件对象提供了一致性接口，使开发者不需要关心不同浏览器之间的事件差异。合成事件对象包含了诸如event.type、event.target等属性，以便访问事件的相关信息。

6. 事件冒泡和捕获：

React事件系统也支持事件冒泡和捕获阶段，开发者可以选择在事件的不同阶段处理事件。

7. 阻止默认行为和停止冒泡：

合成事件对象中提供了方法来阻止事件的默认行为（event.preventDefault()）和停止事件冒泡（event.stopPropagation()）。

React的事件机制使开发者能够以一种更一致和高级的方式来处理事件，同时隐藏了浏览器之间的差异。这有助于构建具有复杂交互的用户界面，并提高了开发效率。

五、说说React jsx转换成真实DOM的过程？

在React中，JSX（JavaScript XML）是一种语法糖，用于描述用户界面的结构和组件关系。当你编写React组件并包含JSX时，React会将JSX转换为真实DOM的过程通常包括以下步骤：

1. **JSX解析**：React中的JSX代码首先会被解析成JavaScript对象。这个过程通常是通过Babel等工具进行的，将JSX转化为具有相应结构的JavaScript对象。

2. **虚拟DOM（Virtual DOM）构建**：解析后的JSX会生成一个虚拟DOM树。虚拟DOM是一个轻量级的抽象表示，它代表了组件结构和内容，但并不直接对应实际的浏览器DOM元素。

3. **调和（Reconciliation）**：React会将新的虚拟DOM与之前的虚拟DOM进行比较，找出差异（所谓的差异补丁或diff算法），确定需要进行的实际DOM操作。

4. **生成真实DOM**：React根据差异计算出需要更新的实际DOM操作，并将这些操作转化为真实的浏览器DOM元素。

5. **更新实际DOM**：React会将生成的DOM操作应用到实际的浏览器DOM中，使界面与虚拟DOM保持一致。这可能包括添加、修改、移动或删除DOM元素。

6. **渲染完成**：一旦虚拟DOM与实际DOM保持一致，渲染过程完成，界面更新完成。此时，React可以等待下一次用户交互或数据更新。

React的这个过程是高度优化的，通过使用虚拟DOM和差异计算，React可以最小化实际DOM的操作，从而提高性能。这使得React能够快速响应数据变化，同时减少不必要的DOM操作，从而改善用户体验。

程序猿CCC

关注

13
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
0
评论
React面试题一

React的这个过程是高度优化的，通过使用虚拟DOM和差异计算，React可以最小化实际DOM的操作，从而提高性能。3. **调和（Reconciliation）**：React会将新的虚拟DOM与之前的虚拟DOM进行比较，找出差异（所谓的差异补丁或diff算法），确定需要进行的实际DOM操作。React的事件机制是一种用于处理用户界面事件的方式，它建立在原生DOM事件的基础上，提供了一种更高级、更一致的方式来处理事件。React将事件处理程序注册在组件的顶层，然后使用事件代理来处理实际的DOM事件。
复制链接

扫一扫