React/Redux 面试题及答案

React 面试问题

Redux 面试问题

我准备了 React 和 Redux 面试问题列表，其中一些是我在学习过程中遇到的，还有一些是我从 Google 本身参考的问题 😂

React 面试问题

问：1. 如何在 React 中创建组件？
问：2. 类组件和函数组件之间有什么区别？
问：3. 受控组件和非受控组件之间有什么区别？
问：4. 什么是 children？
问：5. 什么是 prop 钻取以及如何避免它？
问：6. 什么是纯组件？
问：7. 为什么我们不应该直接更新状态？
问：8. 回调函数作为 setState() 参数的目的是什么？
问：9. React 中的合成事件是什么？
问：10. 什么是“key”prop，在数组元素中使用它有什么好处？
问：11. 为什么字符串引用是遗留的？
问：12. createElement 和 cloneElement 之间有什么区别？
问：13. 什么是 reconciliation？
问：14. lazy 函数是否支持命名导出？
问：15. React 中的门户是什么？
问：16. 什么是无状态组件？
问：17. 什么是有状态组件？
问：18. 将索引用作键有什么影响？
Q.19. 如何记忆组件？
Q.20. 为什么我们需要将函数传递给 setState()？
Q.21. 为什么组件名称应该以大写字母开头？
Q.22. 可以强制组件在不调用 setState 的情况下重新渲染吗？
Q.23. 使用 ES6 类时，React 中的 super() 和 super(props) 有什么区别？
Q.24. 是否必须为 React 组件定义构造函数？
Q.25. 什么是默认 props？
Q.26. 如何在 React 中对 props 应用验证？
Q.27. 为什么不能在 React 中更新 props？
Q.28. 什么是渲染 props？
Q.29. 什么是 Suspense 组件？
Q.30. 什么是 diffing 算法？
Q.31. 如何在浏览器大小调整时重新渲染视图？
Q.32. 什么是 React 备忘录功能？
Q.33. 组件重新渲染时的方法顺序是怎样的？
Q.34. 什么是可加载组件？
问题 35：如何使用 React 漂亮地打印 JSON？
问题 36：什么是 React 中的渲染劫持？
问题 37：如何在 create-react-app 中使用 https 而不是 http？
问题 38：如何将函数式组件转换为纯组件？

Q.1. 如何在 React 中创建组件？

答案：创建组件有两种可能的方法。

✅功能组件：这是创建组件最简单的方法。这些是纯 JavaScript 函数，接受 props 对象作为第一个参数，并返回 React 元素：

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>;
}

✅类组件：你也可以使用 ES6 类来定义组件。上面的函数组件可以写成：

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>;
  }
}

Q.2. 类组件和功能组件有什么区别？

答案。

✅类组件

基于类的组件使用 ES6 类语法。它可以使用生命周期方法。
类组件从 React.Component 扩展而来。
在这里，您必须使用这个关键字来访问您在类组件内声明的道具和函数。

✅功能组件

与基于类的函数相比，函数组件更简单。
功能组件主要关注应用程序的 UI，而不是行为。
更准确地说，这些基本上是类组件中的渲染函数。
功能组件可以具有状态并使用 Reach Hooks 模拟生命周期事件

Q.3. 受控组件和非受控组件之间有什么区别？

答案。

✅受控组件
在 HTML 中，诸如此类的表单元素<input />, <textarea />, and <select />通常会维护自身的状态，并根据用户输入进行更新。当用户提交表单时，上述元素的值会随表单一起发送。但在 React 中，情况有所不同。包含表单的组件会跟踪其状态下输入的值，并在每次触发回调函数（例如 onChange）时重新渲染组件，因为状态会更新。以这种方式由 React 控制值的输入表单元素被称为“受控组件”。您也可以称之为“哑组件”。

✅不受控制的组件
非受控组件是指在内部存储自身状态的组件，需要时可以通过 ref 查询 DOM 来获取其当前值。这更像传统的 HTML。

例子

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

Q.4. 什么是 children？

答：在包含开始标记和结束标记的 JSX 表达式中，这些标记之间的内容将作为特殊 prop 自动传递给组件：

props.children

React API 中有一些方法可以处理这个 prop。这些方法包括 React.Children.map、React.Children.forEach、React.Children.count、React.Children.only 和 React.Children.toArray 👶

const MainContainer = React.createClass({
  render: function () {
    return <div>{this.props.children}</div>;
  },
});

ReactDOM.render(
  <MainContainer>
    <span>{'Hello'}</span>
    <span>{'World'}</span>
  </MainContainer>,
  node,
);

问：什么是螺旋桨钻孔？如何避免？

答：在从源组件到深层嵌套组件的层次结构中，将 prop 从每个组件传递到下一个组件时，这称为 prop 钻取。

为了避免 prop 钻取，一种常见的方法是使用 React context。这允许 Provider 定义提供数据的组件，并允许嵌套组件通过组件 Consumer 或 useContext 钩子使用 context 数据。

Q.6. 什么是纯组件？

答：除了它能帮你处理方法之外React.PureComponent，它和完全相同。当 props 或 state 发生变化时，PureComponent 会对 props 和 state 进行浅比较。而 Component 则不会将当前的 props 和 state 与下一个 props 和 state 进行比较。因此，每当调用 shouldComponentUpdate 时，组件都会默认重新渲染。React.ComponentshouldComponentUpdate()

Q.7. 为什么我们不应该直接更新状态？

答案：如果您尝试直接更新状态，则它将不会重新渲染组件。

//Wrong ❌
this.state.message = 'Not Updated';

请使用 setState() 方法。它会安排组件状态对象的更新。当状态发生变化时，组件会通过重新渲染来响应。

//Correct ✅
this.setState({ message: 'Updated' });

📝笔记：您可以在构造函数中或使用最新的 javascript 的类字段声明语法直接分配给状态对象。

Q.8. 回调函数作为 setState() 的参数的目的是什么

答：回调函数在 setState 完成且组件渲染完成后调用。由于 setState() 是 异步的， 因此回调函数可用于任何后续操作。

📝笔记：建议使用生命周期方法而不是此回调函数。

setState({ name: 'Supi' }, () => console.log('The name has updated and component re-rendered'));

Q.9. React 中的合成事件是什么？

答案。 合成事件是浏览器原生事件的跨浏览器包装器。它的 API 与浏览器原生事件相同，包括stopPropagation()和preventDefault()，但事件在所有浏览器中的工作方式相同。

问.10。什么是“key”属性，以及在元素数组中使用它有什么好处？🗝

答： A key 是一个特殊的字符串属性，在创建元素数组时应该包含它。Key prop 帮助 React 识别哪些元素已更改、已添加或已删除。

我们通常使用数据中的 ID 作为密钥：

const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

当你没有渲染项目的稳定 ID 时，你可以使用项目索引作为键作为最后的手段：

const todoItems = todos.map((todo, index) => <li key={index}>{todo.text}</li>);

📝笔记：

如果项的顺序可能会发生变化，则不建议对键使用索引。这可能会对性能产生负面影响，并可能导致组件状态出现问题。
如果您将列表项提取为单独的组件，则在列表组件上应用键而不是 li 标签。
key 如果列表项中不存在该道具，控制台中将出现一条警告消息。

Q.11. 为什么 String Refs 是遗留的？

答：如果您之前使用过 React，您可能熟悉一个较旧的 API，其中 ref 属性是字符串，例如 ref={'textInput'}，并且 DOM 节点以的形式访问 this.refs.textInput。我们不建议这样做，因为 字符串引用存在以下问题，并且被视为遗留问题。字符串引用已 在 React v16 中被移除。

它们 强制 React 跟踪当前正在执行的组件。这很成问题，因为它使 React 模块具有状态，因此当 React 模块在 bundle 中重复时会导致奇怪的错误。
它们 不可组合 ——如果库在传递的子元素上放置了一个引用，用户就无法在其上放置另一个引用。回调引用完全可组合。
它们不像 Flow 那样支持静态分析 。Flow 无法猜测框架是如何让字符串引用出现在上的 this.refs，也无法猜测它的类型（类型可能不同）。回调引用对静态分析更友好。
它不能像大多数人期望的那样使用“渲染回调”模式（例如）

class MyComponent extends Component {
    renderRow = (index) => {
        // This won't work. Ref will get attached to DataTable rather than MyComponent:
        return <input ref={'input-' + index} />;

        // This would work though! Callback refs are awesome.
        return <input ref={(input) => (this['input-' + index] = input)} />;
    };

   render() {
        return <DataTable data={this.props.data} renderRow={this.renderRow} />;
   }
}

Q.12. createElement 和 cloneElement 有什么区别？

答： JSX 元素将被转换为 React.createElement() 函数，以创建用于 UI 对象表示的 React 元素。而 cloneElement 用于克隆元素并向其传递新的 props。

问：什么是和解？

答：当组件的 props 或 state 发生变化时，React 会通过比较新返回的元素与之前渲染的元素来决定是否需要实际更新 DOM。如果它们不相等，React 将更新 DOM。此过程称为协调 (reconciliation)。

Q.14. 惰性函数支持命名导出吗？

答：不，目前仅React.lazy 支持函数default exports。如果您想导入名为 export 的模块，可以创建一个中间模块，将其重新导出为默认模块。这还能确保 tree shake 持续有效，不会拉取未使用的组件。我们以一个导出多个命名组件的组件文件为例，

例子：

// FewComponents.js
export const SomeComponent = /* ... */;
export const UnusedComponent = /* ... */;

并 FewComponents.js 在中间文件中重新导出组件 IntermediateComponent.js

// IntermediateComponent.js
export { SomeComponent as default } from './FewComponents.js';

现在您可以使用惰性函数导入模块，如下所示，

import React, { lazy } from 'react';
const SomeComponent = lazy(() => import('./IntermediateComponent.js'));

Q.15. React 中的门户是什么？

答案。 门户网站是将子项渲染到父组件 DOM 层次结构之外的 DOM 节点的推荐方法。

ReactDOM.createPortal(child, container);

第一个参数是任何可渲染的 React 子元素，例如元素、字符串或片段。第二个参数是 DOM 元素。

Q.16. 什么是无状态组件？

答：如果行为独立于其状态，那么它可以是无状态组件。您可以使用函数或类来创建无状态组件。但除非您需要在组件中使用生命周期钩子，否则应该选择函数组件。

Q.17. 什么是有状态组件？

答：如果组件的行为依赖于组件的 状态，则可以将其称为有状态组件。这些有状态组件 始终是 类组件 ，并且具有在中初始化的状态 constructor。

class App extends Component {
   constructor(props) {
     super(props);
     this.state = { count: 0 };
   }

   render() {
     // ...
   }
}

React 16.8 更新：

Hooks 让您无需编写类即可使用状态和其他 React 功能。

等效函数组件

import React, {useState} from 'react';

const App = (props) => {
   const [count, setCount] = useState(0);

   return (
     // JSX
   )
}

Q.18. 索引作为键有什么影响？

答案。键应该是稳定的、可预测的和唯一的，以便 React 可以跟踪元素。

在下面的代码片段中，每个元素的键将基于排序，而不是与所表示的数据绑定。这限制了 React 的优化能力。

{
    todos.map((todo, index) => <Todo {...todo} key={index} />)
}

如果您使用元素数据作为唯一键，假设 todo.id 对于此列表是唯一的并且稳定，则 React 将能够重新排序元素而无需重新评估它们。

{
    todos.map((todo) => <Todo {...todo} key={todo.id} />)
}

Q.19. 如何记忆一个组件？

答：从 React v16.6.0 开始，我们有一个 React.memo。它提供了一个高阶组件，除非 props 发生变化，否则它会记忆组件。要使用它，只需React.memo在使用组件之前用包裹它即可。

const MemoComponent = React.memo(function MemoComponent(props) {
    /* render using props */
});

// OR

export default React.memo(MyFunctionComponent);

Q.20. 为什么我们需要向 setState() 传递一个函数？

答：这背后的原因是 setState() 是一个异步操作。出于性能原因，React 会批量更改状态，因此 setState() 调用后状态可能不会立即更改。这意味着你在调用时不应该依赖当前状态， setState() 因为你无法确定该状态会是什么。解决方案是将一个函数传递给 setState()，并将先前的状态作为参数。这样做可以避免由于的异步特性而导致用户在访问时获取旧状态值的问题 setState()。

假设初始计数值为零，连续三次递增操作后，计数值只会增加一。

// assuming this.state.count === 0
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
// this.state.count === 1, not 3

如果我们将一个函数传递给 setState()，计数就会正确增加。

this.setState((prevState, props) => ({
count: prevState.count + props.increment,
}));
// this.state.count === 3 as expected

Q.21. 为什么组件名称要以大写字母开头？

答：如果你使用 JSX 渲染组件，组件名称必须以大写字母开头，否则 React 会抛出无法识别标签的错误。之所以采用这种约定，是因为只有 HTML 元素和 SVG 标签可以以小写字母开头。

class OneComponent extends Component {
// ...
}

你可以定义一个组件类，其名称以小写字母开头，但在导入时必须使用大写字母。以下情况小写字母是可以的：

class myComponent extends Component {
   render() {
     return <div />;
   }
}

export default myComponent;

而当导入另一个文件时，它应该以大写字母开头：

import MyComponent from './MyComponent';

React 组件命名有哪些例外？

组件名称应以大写字母开头，但此约定有一些例外。带有点（属性访问器）的小写标签名称仍被视为有效的组件名称。

例如，下面的标签可以编译为有效的组件，

render() {
    return (
        <obj.component /> // `React.createElement(obj.component)`
    )
}

Q.22. 不调用 setState 可以强制组件重新渲染吗？

答：默认情况下，当组件的 state 或 props 发生变化时，组件会重新渲染。如果你的 render() 方法依赖于其他数据，你可以通过调用来告诉 React 该组件需要重新渲染 forceUpdate()。

component.forceUpdate(callback);

建议避免使用 forceUpdate() ，而仅从 this.props 和 this.state 中读取render()。

Q.23. React 中使用 ES6 类时 super() 和 super(props) 有什么区别？

答案。当你想要访问 this.props 时 constructor() ，你应该将 props 传递给 super() 方法。

使用 super(props)：

class MyComponent extends React.Component {
   constructor(props) {
     super(props);
     console.log(this.props); // { name: 'Supi', ... }
   }
}

使用 super()：

class MyComponent extends React.Component {
   constructor(props) {
     super();
     console.log(this.props); // undefined
   }
}

外面 constructor() 两者将显示相同的值 this.props。

Q.24. React 组件必须定义构造函数吗？

答案。不，这不是强制性的。也就是说，如果你不初始化状态并且不绑定方法，则不需要为 React 组件实现构造函数。

Q.25. 什么是默认道具？

答： defaultProps 是组件类的一个属性，用于设置该类的默认 props。它用于未定义的 props，但不适用于 null props。

例如，让我们为按钮组件创建颜色默认属性，

class MyButton extends React.Component {
  // ...
}

MyButton.defaultProps = {
  color: 'blue',
};

如果未提供 props.color，则它将默认值设置为“红色”。即，每当您尝试访问颜色属性时，它都会使用默认值

render() {
  return <MyButton /> ; // props.color will be set to red
}

📝笔记：如果您提供空值，那么它仍保持空值。

Q.26. 如何在 React 中对 props 应用验证？

答：当应用程序在开发模式下运行时，React 会自动检查我们在组件上设置的所有 props，以确保它们具有 正确的类型。如果类型不正确，React 会在控制台中生成警告消息。由于性能影响，此功能在 生产模式下被禁用。必需的 props 用定义 isRequired。

预定义 prop 类型的集合：

PropTypes.number
PropTypes.string
PropTypes.array
PropTypes.object
PropTypes.func
PropTypes.node
PropTypes.element
PropTypes.bool
PropTypes.symbol
PropTypes.any

我们可以 propTypes 对 User 组件进行如下定义：

import React from 'react';
import PropTypes from 'prop-types';

class User extends React.Component {
    static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired,
    };

    render() {
        return (
          <>
            <h1>{`Welcome, ${this.props.name}`}</h1>
            <h2>{`Age, ${this.props.age}`}</h2>
          </>
        );
    }
}

📝笔记：在 React v15.5 中， PropTypes 被移出 React.PropTypes 到 prop-types 库中。

Q.27. 为什么不能在 React 中更新 props？

答： React 的理念是 props 应该是不可变的，并且自上而下。这意味着父组件可以向子组件发送任何 props 值，但子组件无法修改接收到的 props。

Q.28. 什么是渲染道具？

答案。 渲染道具这是一种在组件之间共享代码的简单技术，使用值为函数的 prop。下面的组件使用了 render prop，它返回一个 React 元素。

<DataProvider render={(data) => <h1>{`Hello ${data.target}`}</h1>} />

React Router 和 DownShift 等库正在使用这种模式。

Q.29. 什么是 Suspense 组件？

答：如果包含动态导入的模块在父组件渲染时尚未加载，则必须在等待加载期间使用加载指示器显示一些备用内容。这可以通过以下方式实现：悬念成分。

例子

const OneComponent = React.lazy(() => import('./OneComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OneComponent />
      </Suspense>
    </div>
  );
}

如上面的代码所述，Suspense 被包裹在惰性组件之上。

Q.30. 什么是 diffing 算法？

答： React 需要使用算法来找出如何高效地更新 UI 以匹配最新的树。差异算法会生成最少数量的操作来将一棵树转换为另一棵树。然而，这些算法的复杂度约为 O(n3)，其中 n 是树中元素的数量。

在这种情况下，显示 1000 个元素需要进行大约十亿次比较。这太昂贵了。因此，React 基于两个假设实现了启发式 O(n) 算法：

两种不同类型的元素将产生不同的树。
开发人员可以使用关键属性暗示哪些子元素可能在不同的渲染中保持稳定。

Q.31. 浏览器调整大小时如何重新渲染视图？

答：您可以监听 resize 中的事件 componentDidMount() ，然后更新尺寸（width 和 height）。您应该删除中的监听器 componentWillUnmount() 。

class WindowDimensions extends React.Component {
   constructor(props) {
     super(props);
     this.updateDimensions = this.updateDimensions.bind(this);
   }

   componentWillMount() {
     this.updateDimensions();
   }

   componentDidMount() {
     window.addEventListener('resize', this.updateDimensions);
   }

   componentWillUnmount() {
     window.removeEventListener('resize', this.updateDimensions);
   }

   updateDimensions() {
     this.setState({ width: window.innerWidth, height: window.innerHeight });
   }

   render() {
     return (
       <span>
         {this.state.width} x {this.state.height}
       </span>
     );
   }
}

Q.32. React memo 功能是什么？

答：当类组件的输入 props 相同时，可以使用PureComponent 或 shouldComponentUpdate限制其渲染。现在，你可以通过将函数组件包装在React.memo中来执行相同的操作。

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

Q.33. 组件重新渲染时的方法顺序是怎样的？

答：更新可能是由 props 或 state 的改变引起的。组件重新渲染时，会按以下顺序调用以下方法。

静态 getDerivedStateFromProps()
应该组件更新（）
使成为（）
获取更新前的快照（）
组件更新（）

Q.34. 什么是可加载组件？

答：如果您想在服务器渲染的应用程序中执行代码拆分，建议使用可加载组件，因为React.lazy和Suspense尚不可用于服务器端渲染。Loadable允许您将动态导入渲染为常规组件。

让我们举个例子，

import loadable from '@loadable/component';

const OtherComponent = loadable(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

现在 OtherComponent 将被加载到单独的 bundle 中

Q.35. 如何使用 React 漂亮地打印 JSON？

答案：我们可以使用标签来保留<pre> 格式：JSON.stringify()

const data = { name: 'John', age: 42 };

class User extends React.Component {
   render() {
     return <pre>{JSON.stringify(data, null, 2)}</pre>;
   }
}

React.render(<User />, document.getElementById('container'));

Q.36. React 中的渲染劫持是什么？

答：高阶组件的概念render hijacking是指能够控制一个组件从另一个组件输出什么内容。它实际上意味着你通过将组件包装到高阶组件中来装饰它。通过包装，你可以注入额外的 props 或进行其他更改，这可能会导致渲染逻辑的改变。它实际上并不具备劫持功能，但通过使用高阶组件，你可以让你的组件以不同的方式运行。

Q.37. 如何在 create-react-app 中使用 https 而不是 http？

答：你只需要使用 HTTPS=true 配置。你可以编辑 package.json 脚本部分：

"scripts": {
    "start": "set HTTPS=true && react-scripts start"
}

或者直接运行 set HTTPS=true && npm start

Q.38. 如何将函数式组件转换为纯组件？

答案：我们可以使用将函数式转换为纯组件React.memo。

Redux 面试问题

问：1. Redux 中的 Reducer 是什么？
问：2. Redux 中的状态是如何变化的？
问：3. Redux Form 的 initialValues 如何根据状态更新？
问：4. Redux Thunk 是什么？
问：5. mapStateToProps() 和 mapDispatchToProps() 有什么区别？
问：6. 如何向 Redux 添加多个中间件？
问：7. React context 与 React redux 有何不同？
问：8. 为什么 React 使用 className 而不是 class 属性？
问：9. 什么是 Relay？
问：10. Relay 与 Redux 有何不同？
问：11. 什么是合并 Reducer？

Q.1. redux 中的 reducer 是什么？

答案。Reducer是一个纯函数，它接受先前的状态和动作，并返回下一个状态。

(previousState, action) => newState

Reducer 保持纯净非常重要。在 Reducer 内部绝对不能做的事情：

改变其论点；
执行 API 调用和路由转换等副作用；
调用非纯函数，例如 Date.now() 或 Math.random()

Q.2. redux 中状态如何改变？

答：更改状态的唯一方法是发出一个动作，即一个描述发生了什么的对象。这确保了视图和网络回调都不会直接写入状态。相反，它们表达的是转换状态的意图。由于所有更改都是集中式的，并且严格按照顺序逐一发生，因此不存在需要注意的微妙竞争条件。由于动作只是普通对象，因此它们可以被记录、序列化、存储，并在以后重放以进行调试或测试。

Q.3. Redux Form 的 initialValues 如何从状态更新？

答案：您需要添加 enableReinitialize : true 设置。

const InitializeFromStateForm = reduxForm({
  form: 'initializeFromState',
  enableReinitialize: true,
})(UserEdit);

如果您的 initialValues 道具更新，您的表格也会更新。

问.4. 什么是 Redux Thunk？

答案。 Redux Thunk中间件允许您编写返回函数而非动作的 Action 创建器。thunk 可用于延迟动作的调度，或仅在满足特定条件时调度。内部函数接收 store 方法 dispatch 和 actiongetState()作为参数。

Q.5. mapStateToProps() 和 mapDispatchToProps() 有什么区别？

答案。

mapStateToProps() 是一个实用程序，可帮助您的组件获取更新状态（由其他一些组件更新）：

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter),
  };
};

mapDispatchToProps() 是一个实用程序，它将帮助您的组件触发动作事件（调度可能导致应用程序状态改变的动作）：

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id));
    },
  };
};

建议始终使用“对象简写”形式 mapDispatchToProps

Redux 将其包装在另一个类似的函数中(…args) => dispatch(onTodoClick(…args))，并将该包装函数作为 prop 传递给您的组件。

const mapDispatchToProps = {
  onTodoClick,
};

Q.6. 如何向 Redux 添加多个中间件？

答：您可以使用 applyMiddleware where 参数传递每个中间件。因此，您只需传递所需的每个中间件即可。例如，您可以像下面这样添加 Redux Thunk 和 Logger 中间件作为参数：

import { createStore, applyMiddleware } from 'redux'
const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);

问.7. React context 与 React redux 有什么区别？

答案：你可以使用语境直接在你的应用程序中，非常适合将数据传递到深层嵌套的组件，这正是它的设计初衷。然而 Redux 功能更加强大，并提供了 Context Api 不提供的大量功能。

此外，React Redux内部使用了 context，但它并没有在公共 API 中暴露这一点。因此，通过 React Redux 使用 Context 比直接使用更安全，因为如果 context 发生变化，更新代码的负担将落在 React Redux 身上，而不是开发者身上。

Q.8. 为什么 React 使用 className 而不是 class 属性？

答： classclassName是 JavaScript 中的关键字，而 JSX 是 JavaScript 的扩展。这就是 React 使用 class 而不是 class 的主要原因。

render() {
  return <span className="menu navigation-menu">Menu</span>
}

问：什么是 Relay？

答案： Relay 是一个 JavaScript 框架，用于使用 React 视图层为 Web 应用程序提供数据层和客户端-服务器通信。

Relay 与 Redux 有何不同？

答： Relay 与 Redux 类似，因为它们都使用单个存储。主要区别在于，Relay 仅管理源自服务器的状态，并且所有对状态的访问都通过 GraphQL 查询（用于读取数据）和突变（用于更改数据）进行。Relay 会为您缓存数据，并通过仅获取更改的数据（仅获取更改的数据）来优化数据获取。

问：什么是联合减速机？

答案：辅助combineReducers函数将一个包含不同 Reduce 函数值的对象转换为一个可以传递给 createStore 的 Reduce 函数。生成的 Reducer 会调用每个子 Reducer，并将它们的结果收集到一个状态对象中。

🌟推特

👩🏻‍💻suprabha.me

🌟 Instagram

文章来源：https://dev.to/suprabhasupi/react-redux-interview-questions-with-answers-13ba

React/Redux 面试问题及答案 🚀 React 面试问题 🚀 Redux 面试问题 👩🏻‍💻

React/Redux 面试题及答案

React 面试问题

Redux 面试问题

React 面试问题

React 组件命名有哪些例外？

Redux 面试问题