口试专区|【100道React高频题整理(附答案背诵版)】

1、简述React有什么特点？

React是一个用于构建用户界面的JavaScript库，由Facebook开发并维护。React有以下几个重要特点：

• 声明式计划： React采用声明式计划，让代码更易于理解，且方便调试。你只需描述出你希望步伐的终极状态，React会自动确保用户界面与你描述的状态保持一致。
  
• 组件化： React基于组件构建界面，每个组件都可以包罗自己的状态和逻辑，可以复用，这使得代码的构造和维护变得更简单。例如，一个购物网站的前端可以由“导航栏组件”、“商品列表组件”、“购物车组件”等多个组件构成。
  
• 虚拟DOM： React引入了虚拟DOM的概念，当组件的状态改变时，React会创建一个新的虚拟DOM，然后与旧的虚拟DOM举行对比，最后只更新真实DOM中差异的部分。这种方式大大提高了性能。
  
• 单向数据流： React的数据流动是单向的，从父组件流向子组件。这种方式使得组件的状态预测变得更加容易，同时也简化了应用的复杂度。
  
• 跨平台： React可以用于开发Web应用，同时，通过React Native，也可以开发iOS和Android应用，代码复用率高。
  

例如，如果我们要创建一个使命列表应用，每一个使命都可以是一个单独的组件，每个使命的完成状态、标题等就是它的状态。当我们添加一个新的使命时，React会创建一个新的虚拟DOM，然后与旧的虚拟DOM举行对比，最后只更新真实DOM中差异的部分，例如添加一个新的使命项。
2、简述虚拟DOM的概念和机制 ？

虚拟DOM（Virtual DOM）是React的一项核心特性，它是对真实DOM的抽象表达，是一个轻量级的JavaScript对象。
在React中，当组件的状态改变时，React并不会直接去更新真实的DOM。相反，它会创建一个新的虚拟DOM，这个虚拟DOM代表了在状态改变后应用的新状态。然后，React会将这个新的虚拟DOM与旧的虚拟DOM举行比力，这个过程叫做"diffing"。通过比力，React可以找出两个虚拟DOM之间的区别，也就是哪些部分需要更新。最后，React会将这些差异应用到真实的DOM上，这个过程叫做"reconciliation"或"协调"。这种方式称为DOM diffing算法。
虚拟DOM的重要优势在于其性能。操纵真实DOM在浏览器中是非常斲丧性能的。而利用虚拟DOM，React可以最小化真实DOM的更新，从而提高性能和应用的相应速度。
例如，假设我们有一个评论列表，当新的评论添加时，React会创建一个新的虚拟DOM，然后与旧的虚拟DOM举行比力，找出需要更新的部分（即新的评论），然后只将这个新的评论添加到真实DOM中，而不是整个评论列表都重新渲染。如许就大大提高了性能。
3、React 类组件和函数组件之间的区别是什么？

React提供了两种重要的方式来创建组件：类组件（Class Components）和函数组件（Function Components）。以下是它们之间的重要区别：

• 定义方式： 类组件是利用ES6的类来定义的，需要继承React.Component。而函数组件则是简单的JavaScript函数。
  
• 状态管理： 在React的早期版本中，类组件是唯一可以利用内部状态（state）的组件范例。函数组件是无状态的，只能接收props。但是从React 16.8版本开始，引入了Hooks这个新特性，使得函数组件也可以利用状态以及其他React特性了。
  
• 生命周期方法： 类组件提供了生命周期方法，如 componentDidMount，componentDidUpdate，componentWillUnmount等。而在引入Hooks之前，函数组件无法利用这些生命周期方法。但是现在，通过利用 useEffect Hook，函数组件也可以模拟生命周期方法的行为。
  
• 利用方式： 类组件需要利用this关键字来访问props和状态，而函数组件则可以直接访问这些值。
  

例如，一个简单的类组件可以如许定义：

1. class MyComponent extends React.Component {
2.   constructor(props) {
3.     super(props);
4.     this.state = { count: 0 };
5.   }
7.   render() {
8.     return (
9.       <div>
10.         {this.props.message}
11.         <button onClick={() => this.setState({ count: this.state.count + 1 })}>
12.           Count: {this.state.count}
13.         </button>
14.       </div>
15.     );
16.   }
17. }

复制代码

同样的功能，利用函数组件和Hooks可以如许实现：

1. function MyComponent(props) {
2.   const [count, setCount] = React.useState(0);
4.   return (
5.     <div>
6.       {props.message}
7.       <button onClick={() => setCount(count + 1)}>
8.         Count: {count}
9.       </button>
10.     </div>
11.   );
12. }

复制代码

在这个例子中，类组件和函数组件都实现了同样的功能，即点击按钮时计数器增长。但是函数组件的代码更简便，更易于理解。
4、简述React 中 refs 的作用 ？

Refs（引用）在React中是一种特殊的属性，可以用来访问和交互React元素或组件的DOM节点。固然我们通常推荐利用React的声明式方式来管理应用步伐的状态和DOM，但在某些情况下，我们可能需要直接操纵DOM，这就是Refs的用武之地。
以下是Refs的一些常见用途：

• 管理核心： 对于一些需要用户输入的元素（如input或textarea），Refs可以用来获取核心。
  
• 触发逼迫动画： 有时候，我们可能需要直接操纵DOM元素来触发动画。
  
• 集成第三方DOM库： 当需要和非React库（如jQuery插件）集成时，Refs可以用来直接操纵DOM。
  

例如，如果我们创建一个自动获取核心的输入框，我们可以利用Refs来实现：

1. class AutoFocusTextInput extends React.Component {
2.   constructor(props) {
3.     super(props);
4.     // 创建一个 ref 来存储 textInput 的 DOM 元素
5.     this.textInput = React.createRef();
6.   }
8.   componentDidMount() {
9.     // 使用原生的 DOM API 让 text input 元素获取焦点
10.     this.textInput.current.focus();
11.   }
13.   render() {
14.     // 把 `this.textInput` 指向 `<input>` DOM 节点
15.     return (
16.       <input
17.         type="text"
18.         ref={this.textInput}
19.       />
20.     );
21.   }
22. }

复制代码

在这个例子中，React.createRef()被用来创建一个新的ref，然后在<input>元素上通过ref属性将其附加。如许，我们就可以在组件的其他地方（如生命周期方法）通过this.textInput.current来访问这个DOM元素。
请注意，过度利用Refs可能会导致代码难以理解和维护，因此在大多数情况下，我们应优先考虑利用React的声明式模式。
5、简述React store的概念 ？

在React中，"store"通常指的是在利用Redux或MobX等状态管理库时用来管理应用全局状态的地方。
下面以Redux为例来表明一下store的概念：
在Redux中，store是一个JavaScript对象，它可以存储应用的整个状态树。Redux的store有以下几个重要的特性和功能：

• 维护应用的状态： store中包罗了应用的整个状态，包括应用的数据以及UI的状态。
  
• 提供获取状态的方法： 可以通过store的getState方法来获取应用的当前状态。
  
• 提供更新状态的方法： 可以通过store的dispatch方法来分发（dispatch）action，更新应用的状态。这是改变store中状态的唯一方式。
  
• 注册和注销监听器： 可以通过store的subscribe方法来添加状态变革的监听器，当状态发生变革时，这些监听器会被调用。监听器可以通过返回的函数来注销。
  

例如，假设我们正在开发一个待办事项应用，我们可能会在store中存储一个待办事项列表的状态。当用户添加一个新的待办事项时，我们会分发一个action，这个action描述了这个变革（即添加一个新的待办事项）。然后，我们的reducer会接收到这个action，并根据这个action来更新store中的状态。当状态更新后，我们的UI会自动更新来反映这个新的状态。

1. // 创建一个 Redux store 来以存放应用的状态。
2. // API 是 { subscribe, dispatch, getState }。
3. let store = createStore(todoApp);
5. // 可以手动订阅更新，也可以事件绑定到视图层。
6. store.subscribe(() => console.log(store.getState()));
8. // 改变内部 state 惟一方法是 dispatch 一个 action。
9. // action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
10. store.dispatch(addTodo('Learn about actions'));

复制代码

Redux的store提供了一种会合管理和更新应用状态的方式，使得状态的管理变得可预测且易于理解。
6、请先容React中的key有什么作用？

在React中，key是一个特殊的字符串属性，你需要在创建元素数组时将其传递。在React的diff算法中，key用于辨认哪些元素发生了变革，哪些被添加或删除。
详细来说，当我们渲染一个元素列表时，React需要追踪每个元素的身份，以便在状态发生变革时能正确地更新和渲染元素。key就是这个身份的标识。
例如，如果我们有一个待办事项列表，每次添加一个新的待办事项时，React需要确定是添加新的待办事项，还是重新排序现有的待办事项。如果每个待办事项都有一个稳固的、独一无二的key，React就可以正确地辨认和更新每个待办事项。

1. const todoItems = todos.map((todo) =>
2.   <li key={todo.id}>
3.     {todo.text}
4.   </li>
5. );

复制代码

在这个例子中，todo.id被用作每个元素的key。如许，无论列表如何变革（添加、删除、重新排序等），React都可以通过key来辨认每个元素。
需要注意的是，只管在许多情况下，你可能会被诱使利用元素的索引作为key，但这通常是不推荐的。如果列表可以重新排序，这可能会导致性能低落，大概状态错误。除非你可以保证元素的顺序永远不会改变，否则最好利用一个唯一且稳固的标识符作为key。
7、简述类组件和函数式组件的区别 ？

React提供了两种重要的方式来定义组件：类组件（Class Components）和函数组件（Function Components）。
类组件（Class Components）
类组件是利用ES6类来定义的，它必须扩展React.Component，并定义一个render方法，该方法返回一个React元素。类组件支持当地状态（也就是this.state）和生命周期方法（如componentDidMount）。

1. class Welcome extends React.Component {
2.   constructor(props) {
3.     super(props);
4.     this.state = { name: 'John' };
5.   }
7.   render() {
8.     return <h1>Hello, {this.state.name}</h1>;
9.   }
10. }

复制代码

函数组件（Function Components）
函数组件是一个接收props并返回React元素的函数。在React 16.8及其之后的版本中，函数组件通过利用Hooks还可以支持当地状态和生命周期方法。

1. function Welcome(props) {
2.   const [name, setName] = React.useState('John');
3.   return <h1>Hello, {name}</h1>;
4. }

复制代码

重要区别：

• 类组件需要利用this关键字来访问props和状态，而函数组件则可以直接访问这些值。
  
• 原来只有类组件可以利用的特性，比如状态和生命周期方法，现在函数组件通过Hooks也可以利用。
  
• 函数组件通常更简便，更易于测试和理解。
  
• 类组件目前仍然支持一些尚未在函数组件中提供的特性，比如错误边界。
  

8、请枚举React和vue.js的相似性和差异性 ？

React和Vue.js都是非常流行的前端JavaScript框架，它们有许多相似之处，但也有一些告急的差异。
相似性：

• 虚拟DOM： React和Vue.js都利用虚拟DOM来提高性能。虚拟DOM是真实DOM的抽象，只有当虚拟DOM与真实DOM有差异时，才举行最小化的DOM更新。
  
• 组件化： 两者都推许组件化的开发模式，通过组合不同的组件来创建复杂的用户界面。
  
• 相应式： 两者都实现了相应式数据流，当数据发生变革时，框架会自动更新DOM。
  
• 单向数据流： 在组件层级中，两者都实现了单向数据流。这使得状态管理更加可预测，有利于应用的维护和理解。
  

差异性：

• 学习曲线： Vue.js通常被认为比React更容易上手。Vue的API较为简单直观，且提供了更多的内置功能和指令，使得开发者可以更快地上手开发。而React的学习曲线相对更陡峭一些，特殊是当涉及到高级特性如Hooks和Context时。
  
• 编程范式： React更倾向于函数式编程，推许不可变性和纯函数。Vue则更靠近于经典的MVVM模式，更加灵活。
  
• 模板语法： Vue利用基于HTML的模板语法，可以直接在模板中写逻辑，较为直观。而React则利用JSX，这是一种JavaScript和HTML混写的语法，需要一些时间去适应。
  
• 社区和生态系统： React由Facebook维护，拥有大量的用户和丰富的第三方库。Vue.js固然社区规模小一些，但发展非常活跃，且核心库和工具的集成度更高。
  
• 计划哲学： React倾向于提供较少的内置功能，但提供更多的灵活性，让开发者可以选择最适合他们的办理方案。而Vue则试图提供一个更完善的办理方案，内置了更多的功能，如动画支持、路由等。
  

选择React还是Vue，很大程度上取决于你的项目需求和团队的技能配景。
9、React中什么是受控组件和非控组件？

在React中，表单元素的行为分为两种范例：受控组件（Controlled Components）和非受控组件（Uncontrolled Components）。
受控组件：在受控组件中，表单数据由React组件的state管理。也就是说，表单输入的值会与组件的state同步，每当状态变革时，都会触发一个函数（通常是onChange），然后在该函数中更新状态。如许，React组件就始终控制了输入的状态。
例如，一个简单的受控组件可能是如许的：

1. class ControlledForm extends React.Component {
2.   constructor(props) {
3.     super(props);
4.     this.state = {value: ''};
6.     this.handleChange = this.handleChange.bind(this);
7.   }
9.   handleChange(event) {
10.     this.setState({value: event.target.value});
11.   }
13.   render() {
14.     return (
15.       <form>
16.         <label>
17.           Name:
18.           <input type="text" value={this.state.value} onChange={this.handleChange} />
19.         </label>
20.         <input type="submit" value="Submit" />
21.       </form>
22.     );
23.   }
24. }

复制代码

非受控组件：非受控组件则是让表单数据由DOM自身来管理，而不是存储在React组件的state中。通过利用ref来从DOM元素中获取表单值，而不是为每次键盘敲击都编写事件处理步伐。
例如，一个简单的非受控组件可能是如许的：

1. class UncontrolledForm extends React.Component {
2.   constructor(props) {
3.     super(props);
4.     this.handleSubmit

复制代码

10、Redux 中间件是怎么拿到store 和 action? 然后怎么处理?

Redux 中间件的计划是基于高阶函数和链式调用的概念。中间件的基本形式是一个函数，这个函数返回另一个函数，这个返回的函数再返回一个函数，如许形成了一个闭包。
这里先看一下标准的Redux中间件的基本形式：

1. const middleware = store => next => action => {
2.   // 在这里处理你的代码
3. }

复制代码

• store：Redux的store实例，你可以调用store.getState()获取当前的state，大概store.dispatch()派发一个新的action。
  
• next：这是一个函数，你可以调用next(action)来把控制权交给下一个中间件，如果没有下一个中间件，那么控制权就交给Redux。
  
• action：这是当前派发的action。
  

中间件的处理流程通常是如许的：

• 中间件拿到当前的action和store。
  
• 根据需要，中间件可以在action被传递到reducer之前，修改action，拦截action，大概在action被处理后做一些额外的操纵。
  
• 中间件处理完后，通过next(action)将action传递给下一个中间件，如果没有下一个中间件，那么action将被传递给reducer。
  

例如，一个简单的中间件，用于在console里记录每个action和state的变革：

1. const logger = store => next => action => {
2.   console.log('dispatching', action)
3.   let result = next(action)
4.   console.log('next state', store.getState())
5.   return result
6. }

复制代码

在这个例子中，每当一个action被派发，我们都会在console里记录这个action，然后调用next(action)将action传递给下一个中间件大概reducer，然后再记录新的state。
11、React Hook 的利用限制有哪些？

React Hook在利用过程中确实有一些限制和规则要服从，重要有以下几点：

• 只在最顶层利用Hook：不要在循环，条件判断大概子函数中调用Hook。确保总是在你的React函数的最顶层调用他们。服从这个规则，你可以确保Hooks在每一次渲染中都在同一个顺序被调用。这让React能够在多次的useState和useEffect调用之间保持正确的状态。
  
• 只在React函数中调用Hook：不要在普通的JavaScript函数中调用Hook。你可以在React的函数组件中调用Hook，也可以在你的自定义Hook中调用其他Hook。
  
• 在自定义Hook中利用Hook：当你想在两个函数间共享一些状态逻辑时，你可以创建你自己的自定义Hook，然后在那里调用其他的Hook。
  

这些限制重要是为了保证React能正确地追踪各个Hook之间的状态。不服从这些规则可能会导致复杂且难以追踪的bug。为了帮助开发者服从这些规则，React团队提供了一个ESLint插件：eslint-plugin-react-hooks，这个插件可以帮助检测你的代码是否违反了这些规则。
12、React Hooks在平时开发中需要注意的问题和缘故原由 ？

在利用React Hooks时，除了官方提出的利用规则，另有一些其他需要注意的事项：

• 避免过度利用useEffect：有时候我们可能会过度利用useEffect，导致组件的渲染和重渲染过于频仍。我们需要明确地理解何时利用useEffect，尤其是它的依赖项数组。如果你的effect依赖于多个state或props，记得将它们全部包罗在依赖项数组中，以避免不须要的副作用。
  
• 闭包问题：在利用useState和useEffect时，经常会碰到闭包问题。也就是说，当你在effect或事件处理函数中引用了state，你获取到的其实是当次渲染中的state值，而不是最新的state值。如果你需要获取最新的state值，可以考虑利用useRef大概函数形式的setState。
  
• 注意清理副作用：在利用useEffect处理诸如订阅事件、网络哀求等副作用操纵时，别忘了在effect返回的函数中举行清理，否则可能会导致内存泄漏。
  
• 自定义Hooks的命名要以“use”开头：这是一种约定俗成的规则，如许可以使得代码更清楚，更容易分辨出哪些函数是Hook。
  
• 避免在循环、条件或嵌套函数中调用Hook：这是由于React依赖于Hook调用的顺序来正确地保存内部state。如果我们在循环、条件或嵌套函数中调用Hook，可能会在多次渲染之间改变Hook的调用顺序，从而导致错误。
  
• 不要在函数组件体外部定义Hook：这也是为了保证Hook的调用顺序的一致性。
  

服从以上规则和注意事项，可以帮助我们更好地利用React Hooks，编写出更结实、更易于维护的代码。
13、React的严格模式如何利用，有什么用处？

React的严格模式是一种帮助你发现潜在问题的工具。要启用严格模式，你可以将应用步伐或其部分包裹在<React.StrictMode>标签中。这是一个不渲染任何可见UI的组件，只用于检查其子组件中的潜在问题。

1. import React from 'react';
3. function ExampleApplication() {
4.   return (
5.     <React.StrictMode>
6.       <div>
7.         {/* Your application code goes here */}
8.       </div>
9.     </React.StrictMode>
10.   );
11. }

复制代码

严格模式当前有助于检查以下方面的问题：

• 辨认不安全的生命周期方法：如componentWillMount、componentWillReceiveProps和componentWillUpdate。这些生命周期方法在新版本的React中已经被废弃，严格模式会警告你不要利用它们。
  
• 关于利用过时或未预期的ref用法的警告：例如，确保你没有在函数组件上利用string ref。
  
• 检测意外的副作用：严格模式会在开发模式下，故意将生命周期方法如render、componentDidUpdate调用两次，以帮助你发现可能的副作用。注意，这只在开发模式下会发生。
  
• 检测过时的context API：旧的context API在新版本的React中已经被废弃，严格模式会警告你不要利用它。
  

需要注意的是，严格模式只检查开发环境下的应用步伐。在生产环境中，它不会有任何影响，也不会斲丧任何额外的资源。
14、State 是怎么注入到组件的，从 reducer 到组件经历了什么样的过程 ？

在React和Redux中，state的流动过程如下：

• Dispatch Action：当用户交互大概某些事件触发时，你的应用会dispatch一个action。这个action是一个描述了发生了什么的普通对象。
  
• Reducer处理Action：Redux store会调用你提供的reducer函数，传递当前的state和刚刚dispatch的action作为参数。Reducer是一个纯函数，它接收旧的state和action，然后返回新的state，描述了用户action如何改变state。
  
• Store更新：Redux store保存了根reducer返回的整个state树。当新的state返回后，Redux store会更新state，而且会关照全部的监听器。
  
• 组件重新渲染：当store更新后，全部与state有关的组件都会重新渲染。在React和Redux应用中，你会利用react-redux库的Provider组件将store提供给你的组件树，然后利用connect函数将你的组件连接到Redux store。当state更新时，connect函数会确保React组件接收到新的props并重新渲染。
  

通过这一系列过程，state被注入到React组件中，当state更新时，与之相干联的组件也会更新。
15、React state和props区别是什么 ?

在React中，state和props都是组件处理数据和交互的告急方式，但它们的用途和行为有一些告急的区别：

• 全部权：state是在组件内部自身管理的数据，可以被组件自身修改。而props则是由父组件传递给子组件的数据，子组件只能读取props，不能修改props。
  
• 改变的方式：state可以通过组件内部的this.setState方法举行改变，这会导致组件重新渲染。而props只能通过父组件改变传递给子组件的值来改变，子组件不能直接修改props。
  
• 数据的流动：state可以在组件内部流动，可以被传递给子组件作为props，但是不能流动到父组件。而props则可以在父子组件之间流动，父组件可以通过props将数据传递给子组件。
  
• 用途：state通常用于存储组件的内部状态，比如用户输入、UI状态等需要相应用户交互改变的数据。而props则用于父组件向子组件传递数据和回调函数。
  

简单来说，state是让组件控制自己的状态，props是让外部对组件自身举行配置。
16、简述什么是React 高阶组件？

高阶组件（Higher-Order Components，简称HOC）是React中用于复用组件逻辑的一种高级技能。它不是React的API的一部分，而是一种基于React的组合特性的计划模式。
高阶组件就是一个函数，接受一个组件作为参数，并返回一个新的组件。这个新的组件会利用原始的组件，并可以在其底子上添加新的props大概新的功能。

1. function higherOrderComponent(WrappedComponent) {
2.   return class extends React.Component {
3.     render() {
4.       return <WrappedComponent {...this.props} />;
5.     }
6.   }
7. }

复制代码

在这个例子中，higherOrderComponent就是一个高阶组件。它接收一个组件WrappedComponent，返回一个新的组件。新的组件会渲染WrappedComponent，而且将自己接收的props传递给WrappedComponent。
高阶组件的用途非常广泛，例如，可以用于控制props，抽象state，控制渲染等等。比如React-Redux的connect函数就是一个高阶组件，它用于将React组件连接到Redux store，使得组件可以访问store中的state和dispatch函数。
17. 请简述useCallback 和 useMemo 的利用场景 ？
18. 表明React组件的生命周期方法 ？
19. 表明React中的合成事件是什么？
20. useEffect()的清除机制是什么？在什么时候执行？
21. useState()的 state 是否可以直接修改？是否可以引起组件渲染？
22. 完整的简述React 的 diff 过程 ？
23. 请简述react-router 和 react-router-dom 的有什么区别？
24. 在 React中元素（ element）和组件（ component）有什么区别？
25. 约束性组件（ controlled component）与非约束性组件（ uncontrolled component）有什么区别？
26. React shouldComponentUpdate有什么用？为什么它很告急？
27. 如何用 React构建（ build）生产模式？
28. createElement和 cloneElement有什么区别？
29. React setState方法的第二个参数有什么用？利用它的目的是什么？
30. 请说岀 React从 ES5编程规范到 ES6 编程规范过程中的几点改变?
31. 简述React中D算法的原理是什么？
32. 请简述React生命周期调用方法的顺序 ？
33. 简述 React组件开发中关于作用域的常见问题 ？
34. Redux中利用 Action要注意哪些问题？
35. 简述如何利用4.0版本的 React Router？
36. 表明React Reducer的作用？
37. 请用源码表明React setState 调用的原理 ？
38. 简述shouldComponentUpdate 作用？为什么它很告急？
39. React中如何避免不须要的render？
40. 简述React- Router有几种形式？
41. 表明为什么调用 setState 而不是直接改变 state？
42. 表明 React 中 render() 的目的和作用 ？
43. React如何获取组件对应的DOM元素？
44. 请阐明React中getDefaultProps 的作用 ？
45. 请简述React组件的构造函数的作用？
46. 简述React Hooks在平时开发中需要注意的问题和缘故原由 ？
47. 在React中组件的this.state和setState有什么区别？
48. 如何配置 React-Router 实现路由切换？
49. 简述React中hooks是如何模拟组件的生命周期的？
50. 简述什么是React中的错误边界？
51. 叙述React如何利用Redux（利用流程） ?
52. 简述reducer是纯函数吗？阐明其缘故原由
53. 执行两次setState的时候会render频频？会不会立刻触发？
54. React 什么是 Reselect 以及它是如何工作的 ？
55. 在React中如何防范XSS攻击？
56. 简述点(…)在 React 的作用 ？
57. 如何避免React 组件的重新渲染？
58. 请简述当调用setState时，React render 是如何工作的？
59. 表明如何避免在React重新绑定实例？
60. Component, Element, Instance 之间有什么区别和联系？
61. 简述React.createClass和extends Component的区别有哪些？
62. 简述对React中Fragment的理解，它的利用场景是什么？
63. 简述React的插槽(Portals)的理解？
64. 简述对React-Intl 的理解，它的工作原理？
65. React 并发模式是如何执行的？
66. 简述super()和super(props)有什么区别？
67. 简述React中组件间过渡动画如何实现？
68. 简述如何Redux 中的异步哀求 ？
69. React.forwardRef是什么？它有什么作用？
70. React中constructor和getInitialState的区别?
71. 简述原生事件和React事件的区别 ？
72. React ⾼阶组件、Render props、hooks 有什么区别，为什么要 不断迭代 ？
73. 哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么 ？
74. 简述为什么React并不推荐优先考虑使⽤Context？
75. 简述React中的setState和replaceState的区别是什么 ？
76. 简述React中的props为什么是只读的 ？
77. 在React中组件的props改变时更新组件的有哪些方法 ？
78. React 16.X 中 props 改变后在哪个生命周期中处理 ？
79. React 性能优化在哪个生命周期？它优化的原理是什么？
80. 简述state 和 props 触发更新的生命周期分别有什么区别？
81. 简述非嵌套关系组件的通信方式 ？
82. 简述React-Router的实现原理是什么 ？
83. 简述React-Router怎么设置重定向？
84. 简述React-Router 4怎样在路由变革时重新渲染同⼀个组件 ？
85. 简述React-Router的路由有⼏种模式 ？
86. 简述Redux 怎么实现属性传递，先容下原理 ？
87. Redux 中间件是什么？接受几个参数？柯里化函数两头的参数详细是什么 ？
88. Redux 哀求中间件如那边理并发 ？
89. 简述Redux 和 Vuex 有什么区别，它们的共同思想 ？
90. 简述Redux 中间件是怎么拿到store 和 action? 然后怎么处理 ？
91. 简述为什么 useState 要利用数组而不是对象 ？
92. 简述React Hooks 办理了哪些问题 ？
93. 简述 React Hook 的利用限制有哪些 ？
94. 简述React diff 算法的原理是什么 ？
95. 简述 React key 是干嘛用的 为什么要加？key 重要是办理哪⼀类问题的？
96. 简述React 与 Vue 的 diff 算法有何不同 ？
97. 简述 react 最新版本办理了什么问题，增长了哪些东⻄ ？
98. 简述在React中怎么使⽤async/await ？
99. 简述React.Children.map和js的map有什么区别 ？
100. 简述React 中的高阶组件运用了什么计划模式 ？

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。