React面试题最全

1.什么是虚拟DOM？

虚拟DOM是真实DOM在内存中的表示，ul的表示形式保存在内存中，并且与实际的DOM同步，这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤，整个过程被称为调和

2.类组件和函数组件之间的区别是什么？

类组件可以使用其他特性，如状态和生命周期钩子，并且他有this

函数组件只能接收props渲染到页面，无状态组件，没有this，不能使用生命周期钩子

函数组件性能要高于类组件，因为类组件使用要实例化，而函数组件直接执行取返回结果即可，为了提高性能，尽量使用函数组件

3.react中refs是什么？

refs是提供一种访问在render方法中创建DOM节点或者React元素的方法，在典型的数据流中，props是父子组件交互的唯一方式，想要修改子组件，需要使用新的props重新渲染它，某些情况下，在典型的数据流外，强制修改子代，这个时候可以使用refs

我们可以在组件添加一个ref属性来使用，该属性是一个回调函数，接收作为其第一个参数的底层DOM元素或组件挂载实例

input元素有一个ref属性，他的值是一个函数，该函数接收输入的实际DOM元素，然后将其放在实例上，这样就可以在handleSubmit函数内部访问它

经常被误解的只有在类组件中才能使用refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用

4.在react中如何处理事件？

为了解决跨浏览器的兼容性问题，SyntheticEvent实例将被传递给你的事件处理函数，SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括stopPropagation()和preventDefault()。

比较有趣的是，React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着 React 在更新 DOM 时不需要跟踪事件监听器。

5.state和props区别是什么？

相同点：都是普通的js对象，他们包含着影响渲染输出的信息

不同点：state是组件自己管理数据，控制自己的状态，可变

props是外部传入的数据参数，不可变

没有state的叫做无状态组件，有state的叫有状态组件

多用props，少用state

6.如何创建refs？

通过React.createRef（）创建的，并通过ref属性附加到react元素，在构造组件中，

通常将Refs分配给实例属性，以便可以在整个组件中引用它们。

7.什么是高阶组件？

高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为

HOC 可以用于以下许多用例

代码重用、逻辑和引导抽象
渲染劫持
state 抽象和操作
props 处理

8.在构造函数调用super并将props作为参数传入的作用是啥？

在调用super()方法之前，子类构造函数无法使用this引用，ES6 子类也是如此。将props参数传递给super()调用的主要原因是在子构造函数中能够通过this.props来获取传入的props。

props的行为只有在构造函数中是不同的，在构造函数之外也是一样的

9.什么是受控组件？

在 HTML 中，表单元素如、</code>和<code></code>通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。</p><p>而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如<code>onChange</code>)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。</p><h2>10.<strong>如何 React.createElement ？</strong></h2><pre><code>const element = ( <h1> Hello, world! </h1>)</code></pre><pre><code>const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!');</code></pre><h2>11.什么是jsx？</h2><p>在第一发布react时，还引入了一种新的js方言jsx，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用<code>Babel</code>和<code>webpack</code>等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一起了</p><h2>12.为什么不直接更新state？</h2><p>如果试图直接更新state，就不会重新渲染组件</p><p>需要使用setState（）方法更新state，它对state对象进行更新，当state改变时，组件通过重新渲染来响应</p><h2>13.<strong>React 组件生命周期有哪些不同阶段？</strong></h2><ol><li><strong>Initialization</strong>：在这个阶段，组件准备设置初始化状态和默认属性。</li><li><strong>Mounting</strong>：react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括<code>componentWillMount</code>和<code>componentDidMount</code>生命周期方法。</li><li><strong>Updating</strong>：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括<code>shouldComponentUpdate</code>、<code>componentWillUpdate</code>和<code>componentDidUpdate</code>生命周期方法。</li><li><strong>Unmounting</strong>：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含<code>componentWillUnmount</code>生命周期方法。</li></ol><p>除以上四个常用生命周期外，还有一个错误处理的阶段：</p><p><strong>Error Handling</strong>：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了<code>componentDidCatch</code>生命周期方法。</p><h2>14.react生命周期方法有哪些？</h2><ul><li><code>componentWillMount</code>:在渲染之前执行，用于根组件中的 App 级配置。</li><li><code>componentDidMount</code>：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。</li><li><code>componentWillReceiveProps</code>：在初始化<code>render</code>的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染</li><li><code>shouldComponentUpdate</code>：确定是否更新组件。默认情况下，它返回<code>true</code>。如果确定在<code>state</code>或<code>props</code>更新后组件不需要在重新渲染，则可以返回<code>false</code>，这是一个提高性能的方法。</li><li><code>componentWillUpdate</code>：在<code>shouldComponentUpdate</code>返回<code>true</code>确定要更新组件之前件之前执行。</li><li><code>componentDidUpdate</code>：它主要用于更新DOM以响应<code>props</code>或<code>state</code>更改。</li><li><code>componentWillUnmount</code>：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。</li></ul><h2>15.<strong>这三个点(…)在 React 干嘛用的？</strong></h2><p>扩展运算符或者叫展开操作符，对于创建具有现有对象的大多数属性的新对象非常方便，在更新state时经常这么用</p><h2>16.<strong>使用 React Hooks 好处是啥？</strong></h2><p><strong>Hooks</strong>是 React 16.8 中的新添加内容。它们允许在不编写类的情况下使用<code>state</code>和其他 React 特性。使用 Hooks，可以从组件中提取有状态逻辑，这样就可以独立地测试和重用它。Hooks 允许咱们在不改变组件层次结构的情况下重用有状态逻辑，这样在许多组件之间或与社区共享 Hooks 变得很容易</p><p>hooks解决了什么问题？</p><p> 函数组件中可以使用类组件中的特性问题</p><h2><strong>17：React 中的<code>useState()</code>是什么？</strong></h2><p><code>useState</code>是一个内置的 React Hook。<code>useState(0)</code>返回一个元组，其中第一个参数<code>count</code>是计数器的当前状态，<code>setCounter</code>提供更新计数器状态的方法。</p><p>咱们可以在任何地方使用<code>setCounter</code>方法更新计数状态-在这种情况下，咱们在<code>setCount</code>函数内部使用它可以做更多的事情，使用 Hooks，能够使咱们的代码保持更多功能，还可以避免过多使用基于类的组件</p><p>定义state的数据，参数是初始化的数据，返回值两个值1. 初始化值，2. 修改的方法</p><p>useState中修改的方法异步</p><ol><li><p>借助于useEffect 进行数据的监听</p></li><li><p>可以自己定义Hooks的方法, 方法内部可以把逻辑返回</p></li></ol><h2>18.<strong>React 中的StrictMode(严格模式)是什么？</strong></h2><p>React 的<code>StrictMode</code>是一种辅助组件，可以帮助咱们编写更好的 react 组件，可以使用<code></code>包装一组组件，并且可以帮咱们以下检查：</p><ul><li>验证内部组件是否遵循某些推荐做法，如果没有，会在控制台给出警告。</li><li>验证是否使用的已经废弃的方法，如果有，会在控制台给出警告。</li><li>通过识别潜在的风险预防一些副作用。</li></ul><h2>19.<strong>为什么类方法需要绑定到类实例？</strong></h2><p>在js中，this值会根据当前上下文的变化，在React类组件方法中，开发人员通常希望this引用罪案的当前实例，因此有必要将这些方法绑定到实例</p><h2>20.什么是prop drilling，如何避免？</h2><p>在构建 React 应用程序时，在多层嵌套组件来使用另一个嵌套组件提供的数据。最简单的方法是将一个<code>prop</code>从每个组件一层层的传递下去，从源组件传递到深层嵌套组件，这叫做<strong>prop drilling</strong>。</p><p><code>prop drilling</code>的主要缺点是原本不需要数据的组件变得不必要地复杂，并且难以维护。</p><p>为了避免<code>prop drilling</code>，一种常用的方法是使用<strong>React Context</strong>。通过定义提供数据的<code>Provider</code>组件，并允许嵌套的组件通过<code>Consumer</code>组件或<code>useContext</code>Hook 使用上下文数据</p><h2>21.<strong>描述 Flux 与 MVC？</strong></h2><p>传统的 MVC 模式在分离数据(Model)、UI(View和逻辑(Controller)方面工作得很好，但是 MVC 架构经常遇到两个主要问题:</p><p><strong>数据流不够清晰</strong>:跨视图发生的级联更新常常会导致混乱的事件网络，难于调试。</p><p><strong>缺乏数据完整性</strong>:模型数据可以在任何地方发生突变，从而在整个UI中产生不可预测的结果。</p><p>使用 Flux 模式的复杂用户界面不再遭受级联更新，任何给定的React 组件都能够根据<code>store</code>提供的数据重建其状态。Flux 模式还通过限制对共享数据的直接访问来加强数据完整性</p><h2>22.<strong>受控组件和非受控组件区别是啥？</strong></h2><ul><li><strong>受控组件</strong>是 React 控制中的组件，并且是表单数据真实的唯一来源。</li><li>非受控组件是由 DOM 处理表单数据的地方，而不是在 React 组件中。</li></ul><p>尽管非受控组件通常更易于实现，因为只需使用<code>refs</code>即可从 DOM 中获取值，但通常建议优先选择受控制的组件，而不是非受控制的组件。</p><p>这样做的主要原因是受控组件支持即时字段验证，允许有条件地禁用/启用按钮，强制输入格式</p><h2>23.<strong>什么是 React Context?</strong></h2><p><code>Context</code>通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递<code>props</code>属性</p><h2>24.<strong>什么是 React Fiber?</strong></h2><p><strong>Fiber</strong>是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。<strong>React Fiber</strong>的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。</p><p>React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。</p><h2>25.<strong>如何在 ReactJS 的 Props上应用验证？</strong></h2><p>当应用程序在开发模式下运行时，React 将自动检查咱们在组件上设置的所有<code>props</code>，以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的<code>props</code>用<code>isRequired</code>定义的。</p><p>下面是一组预定义的 prop 类型:</p><ul><li>React.PropTypes.string</li><li>React.PropTypes.number</li><li>React.PropTypes.func</li><li>React.PropTypes.node</li><li>React.PropTypes.bool</li></ul><h2>26.<strong>在 React 中使用构造函数和 getInitialState 有什么区别？</strong></h2><p>构造函数和<code>getInitialState</code>之间的区别就是<code>ES6</code>和<code>ES5</code>本身的区别。在使用<code>ES6</code>类时，应该在构造函数中初始化<code>state</code>，并在使用<code>React.createClass</code>时定义<code>getInitialState</code>方法。</p><h2>27.<strong>Hooks会取代<code>render props</code>和高阶组件吗？</strong></h2><p><code>render props</code>和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。</p><p>这两种模式仍然有一席之地(例如，一个虚拟的<code>scroller</code>组件可能有一个<code>renderItem prop</code>，或者一个可视化的容器组件可能有它自己的 DOM 结构)。但在大多数情况下，Hooks 就足够了，可以帮助减少树中的嵌套</p><h2>28.<strong>如何避免组件的重新渲染？</strong></h2><p>React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法，在这些情况下非常有用：</p><ul><li><code>React.memo()</code>:这可以防止不必要地重新渲染函数组件</li><li><code>PureComponent</code>:这可以防止不必要地重新渲染类组件</li></ul><p>这两种方法都依赖于对传递给组件的<code>props</code>的浅比较，如果<code>props</code>没有改变，那么组件将不会重新渲染。虽然这两种工具都非常有用，但是浅比较会带来额外的性能损失，因此如果使用不当，这两种方法都会对性能产生负面影响。</p><p>通过使用<strong>React Profiler</strong>，可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能。</p><h2>29.<strong>什么是纯函数？</strong></h2><p>纯函数是不依赖并且不会在其作用域之外修改变量状态的函数。本质上，纯函数始终在给定相同参数的情况下返回相同结果。</p><h2>30.<strong>当调用<code>setState</code>时，React<code>render</code>是如何工作的</strong></h2><ol><li>虚拟 DOM 渲染:当<code>render</code>方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用<code>setState()</code>时，<code>render</code>会被再次调用，因为默认情况下<code>shouldComponentUpdate</code>总是返回<code>true</code>，所以默认情况下 React 是没有优化的。</li><li>原生 DOM 渲染:React 只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少——这是很棒的React特性，它优化了真实DOM的变化，使React变得更快。</li></ol><h2>31.<strong>如何避免在React重新绑定实例</strong>？</h2><p>1.将事件处理程序定义为内联箭头函数</p><pre><code>class SubmitButton extends React.Component { constructor(props) { super(props); this.state = { isFormSubmitted: false }; } render() { return ( <button> { this.setState({ isFormSubmitted: true }); }}>Submit</button> ) }}</code></pre><p>2.使用箭头函数来定义方法：</p><pre><code>class SubmitButton extends React.Component { state = { isFormSubmitted: false } handleSubmit = () => { this.setState({ isFormSubmitted: true }); } render() { return ( <button>Submit</button> ) }}</code></pre><p>3.使用带有 Hooks 的函数组件</p><pre><code>const SubmitButton = () => { const [isFormSubmitted, setIsFormSubmitted] = useState(false); return ( <button> { setIsFormSubmitted(true); }}>Submit</button> )};</code></pre><h2>32.<strong>区分Real DOM和Virtual DOM</strong>？</h2><table><thead><tr><th><strong>Real DOM</strong></th><th><strong>Virtual DOM</strong></th></tr></thead><tbody><tr><td>1. 更新缓慢。</td><td>1. 更新更快。</td></tr><tr><td>2. 可以直接更新 HTML。</td><td>2. 无法直接更新 HTML。</td></tr><tr><td>3. 如果元素更新，则创建新DOM。</td><td>3. 如果元素更新，则更新 JSX 。</td></tr><tr><td>4. DOM操作代价很高。</td><td>4. DOM 操作非常简单。</td></tr><tr><td>5. 消耗的内存较多。</td><td>5. 很少的内存消耗。</td></tr></tbody></table><h2>33.<strong>什么是React？</strong></h2><ul><li>React 是 Facebook 在 2011 年开发的前端 JavaScript 库。</li><li>它遵循基于组件的方法，有助于构建可重用的UI组件。</li><li>它用于开发复杂和交互式的 Web 和移动 UI。</li><li>尽管它仅在 2015 年开源，但有一个很大的支持社区</li></ul><h2>34.<strong>React有什么特点</strong></h2><p>React的主要功能如下：</p><ol><li>它使用<strong>虚拟DOM</strong>而不是真正的DOM。</li><li>它可以进行<strong>服务器端渲染</strong>。</li><li>它遵循<strong>单向数据流</strong>或数据绑定。</li></ol><h2>35.<strong>列出React的一些主要优点</strong></h2><ol><li>它提高了应用的性能</li><li>可以方便地在客户端和服务器端使用</li><li>由于 JSX，代码的可读性很好</li><li>React 很容易与 Meteor，Angular 等其他框架集成</li><li>使用React，编写UI测试用例变得非常容易</li></ol><h2>36.<strong>React有哪些限制？</strong></h2><ol><li>React 只是一个库，而不是一个完整的框架</li><li>它的库非常庞大，需要时间来理解</li><li>新手程序员可能很难理解</li><li>编码变得复杂，因为它使用内联模板和 JSX</li></ol><h2>37.<strong>为什么浏览器无法读取JSX？</strong></h2><p>浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器</p><h2>38.<strong>与 ES5 相比，React 的 ES6 语法有何不同？</strong></h2><p>1.require 与 import</p><p>2.export 与 exports</p><p>3.component 和 function</p><p>4.props</p><p>5.state</p><h2>39.<strong>React与Angular有何不同？</strong></h2><table><thead><tr><th><strong>主题</strong></th><th><strong>React</strong></th><th><strong>Angular</strong></th></tr></thead><tbody><tr><td><em>1. 体系结构</em></td><td>只有 MVC 中的 View</td><td>完整的 MVC</td></tr><tr><td><em>2. 渲染</em></td><td>可以进行服务器端渲染</td><td>客户端渲染</td></tr><tr><td><em>3. DOM</em></td><td>使用 virtual DOM</td><td>使用 real DOM</td></tr><tr><td><em>4. 数据绑定</em></td><td>单向数据绑定</td><td>双向数据绑定</td></tr><tr><td><em>5. 调试</em></td><td>编译时调试</td><td>运行时调试</td></tr><tr><td><em>6. 作者</em></td><td>Facebook</td><td>Google</td></tr></tbody></table><h2>40.<strong>你怎样理解“在React中，一切都是组件”这句话</strong></h2><p>组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。</p><h2>41.<strong>怎样解释 React 中 render() 的目的</strong></h2><p>每个React组件强制要求必须有一个<strong>render()</strong>。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如<code></code>、<code></code>、<code></p><p></code>等。此函数必须保持纯净，即必须每次调用时都返回相同的结果</p><h2>42.<strong>什么是 Props?</strong></h2><p>Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据</p><h2>43.<strong>React中的状态是什么？它是如何使用的？</strong></h2><p>状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过<code>this.state()</code>访问它们</p><h2>44.<strong>区分状态和 props</strong></h2><table><thead><tr><th><strong>条件</strong></th><th><strong>State</strong></th><th><strong>Props</strong></th></tr></thead><tbody><tr><td>1. 从父组件中接收初始值</td><td>Yes</td><td>Yes</td></tr><tr><td>2. 父组件可以改变值</td><td>No</td><td>Yes</td></tr><tr><td>3. 在组件中设置默认值</td><td>Yes</td><td>Yes</td></tr><tr><td>4. 在组件的内部变化</td><td>Yes</td><td>No</td></tr><tr><td>5. 设置子组件的初始值</td><td>Yes</td><td>Yes</td></tr><tr><td>6. 在子组件的内部更改</td><td>No</td><td>Yes</td></tr></tbody></table><h2>45.<strong>如何更新组件的状态？</strong></h2><p>可以用<code>this.setState()</code>更新组件的状态。</p><h2>46.<strong>React 中的箭头函数是什么？怎么用？</strong></h2><p>箭头函数（<strong>=></strong>）是用于编写函数表达式的简短语法。这些函数允许正确绑定组件的上下文，因为在 ES6 中默认下不能使用自动绑定。使用高阶函数时，箭头函数非常有用</p><h2>47.<strong>区分有状态和无状态组件</strong></h2><table><thead><tr><th><strong>有状态组件</strong></th><th><strong>无状态组件</strong></th></tr></thead><tbody><tr><td>1. 在内存中存储有关组件状态变化的信息</td><td>1. 计算组件的内部的状态</td></tr><tr><td>2. 有权改变状态</td><td>2. 无权改变状态</td></tr><tr><td>3. 包含过去、现在和未来可能的状态变化情况</td><td>3. 不包含过去，现在和未来可能发生的状态变化情况</td></tr><tr><td>4. 接受无状态组件状态变化要求的通知，然后将 props 发送给他们。</td><td>4.从有状态组件接收 props 并将其视为回调函数。</td></tr></tbody></table><h2>48.<strong>React中的事件是什么？</strong></h2><p>在 React 中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异，如：</p><ol><li>用驼峰命名法对事件命名而不是仅使用小写字母。</li><li>事件作为函数而不是字符串传递。</li></ol><p>事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为，只能通过其事件处理程序访问</p><h2>49.<strong>React中的合成事件是什么？</strong></h2><p>合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。</p><h2>50.<strong>React 中 key 的重要性是什么？</strong></h2><p>key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能</p><h2>51.<strong>什么是Redux</strong>?</h2><p>Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为</p><h2>52.<strong>Redux遵循的三个原则是什么？</strong></h2><ol><li><strong><em>单一事实来源：</em></strong>整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。</li><li><strong><em>状态是只读的：</em></strong>改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。</li><li><strong><em>使用纯函数进行更改：</em></strong>为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。</li></ol><h2>53.<strong>你对“单一事实来源”有什么理解？</strong></h2><p>Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序</p><h2>54.<strong>列出 Redux 的组件</strong></h2><ol><li><strong>Action</strong>– 这是一个用来描述发生了什么事情的对象。</li><li><strong>Reducer</strong>– 这是一个确定状态将如何变化的地方。</li><li><strong>Store</strong>– 整个程序的状态/对象树保存在Store中。</li><li><strong>View</strong>– 只显示 Store 提供的数据。</li></ol><h2>55.<strong>数据如何通过 Redux 流动？</strong></h2><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/3fb6de9f2f5b2ccc2f05b610040f5ef7.png"></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/3fb6de9f2f5b2ccc2f05b610040f5ef7.png"></p><h2>56.<strong>如何在 Redux 中定义 Action</strong></h2><p>React 中的 Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 Redux 中，action 被名为 Action Creators 的函数所创建</p><h2>57.<strong>解释 Reducer 的作用</strong></h2><p>Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态</p><h2>58.<strong>Store 在 Redux 中的意义是什么</strong></h2><p>Store 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。</p><h2>59.<strong>Redux 有哪些优点？</strong></h2><p>Redux 的优点如下：</p><ul><li><strong>结果的可预测性 –</strong>由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。</li><li><strong>可维护性 –</strong>代码变得更容易维护，具有可预测的结果和严格的结构。</li><li><strong>服务器端渲染 –</strong>你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。</li><li><strong>开发人员工具 –</strong>从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。</li><li><strong>社区和生态系统 –</strong>Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。</li><li><strong>易于测试 –</strong>Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。</li><li><strong>组织 –</strong>Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单</li></ul><h2>60.<strong>什么是React 路由</strong></h2><p>React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。 React 路由有一个简单的API</p><h2>61.<strong>为什么React Router v4中使用 switch 关键字</strong></h2><p>虽然<strong><code></p><p></code></strong>用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。使用时，<strong><code></code></strong>标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线</p><h2>62.<strong>为什么需要 React 中的路由？</strong></h2><p>Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图</p><h2>63.<strong>列出 React Router 的优点。</strong></h2><ol><li>就像 React 基于组件一样，在 React Router v4 中，API 是<em>‘All About Components’</em>。可以将 Router 可视化为单个根组件（<strong><code></code></strong>），其中我们将特定的子路由（<strong><code></code></strong>）包起来。</li><li>无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在<strong><code></code></strong>组件中。</li><li>包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换</li></ol><h2>64.<strong>React Router与常规路由有何不同？</strong></h2><table><thead><tr><th><strong>主题</strong></th><th><strong>常规路由</strong></th><th><strong>React 路由</strong></th></tr></thead><tbody><tr><td><strong>参与的页面</strong></td><td>每个视图对应一个新文件</td><td>只涉及单个HTML页面</td></tr><tr><td><strong>URL 更改</strong></td><td>HTTP 请求被发送到服务器并且接收相应的 HTML 页面</td><td>仅更改历史记录属性</td></tr><tr><td><strong>体验</strong></td><td>用户实际在每个视图的不同页面切换</td><td>用户认为自己正在不同的页面间切换</td></tr></tbody></table><h2>65.常用的hooks</h2><p>useState：定义state的数据，参数是初始化的数据，返回值两个值1. 初始化值，2. 修改的方法</p><p>useEffect：副作用函数，顾名思义，副作用即只有使用过后才会产生副作用</p><ol><li><p>当作生命周期来使用：第二个参数如果没写的话，页面一更新触发，compoentDidMount compoentDidUpdate</p></li><li><p>第二个参数如果空数组的话，只执行一次，compoentDidMount</p></li><li><p>数组中跟某些变量，当作监听器来使用，监听数据的变化，</p></li><li><p>useEffect是一个副作用函数，组件更新完成后触发的函数</p></li><li><p>如果我们在useEffect 返回一个函数的，组件被销毁的时候触发</p></li></ol><p>useMemo：用来计算数据，返回一个结果，监听数据的变化，第二个参数就是监听的数据，具有缓存性</p><p>useMemo和useEffect 相比较来说，useMemo 是组件更新的时候触发生命周期</p><p>useMemo是怎么做性能优化的？</p><p>当父组件向子组件组件通信的时候，父组件中数据发生改变，更新父组件导致子组件的更新渲染，但是如果修改的数据跟子组件无关的话，更新子组件会导致子组件不必要的DOM渲染，是比较消耗性能的，这个时候我们可以使用useMemo或者memo做组件的缓存，减少子组件不必要的DOM渲染</p><p>useCallback：当父组件向子组件传递函数的时候，父组件的改变会导致函数的重新调用产生新的作用域，所以还是会导致子组件的更新渲染，这个时候我们可以使用useCallback来缓存组件</p><p>useRef：相当于createRef的使用，创建组件的属性信息</p><p>useContext：相当在函数组件中获取context状态数的内容信息</p><p>useReducer：useReducer是用来弥补useState的补不足，可以把数据进行集中式的管理，单独处理数据的逻辑信息</p><h2>66.react中ref的使用方式？</h2><p>1.可以直接写一个字符串，不过它只适用于类组件</p><p>2.createRef和useRef来定义ref变量，ref.current获取数据</p><p>3.可以使用箭头函数的方式，提前定义一个变量，箭头函数的形参就是当前对象</p><pre><code class="hljs">const App = ()=>{ let h = useRef(); let inp = null;//定义一个空变量 const setVal = ()=>{ console.log(inp.value); } return ( <h3>ceshi</h3> <button>console.log(h.current)}>获取</button> <hr /> { inp = el; }} onChange={setVal}/> )}</code></pre><p>ref属性不能直接绑定到函数子组件的，函数组件没有this对象，无法获取函数子组件的对象内容，最后函数组件forwardRef高阶组件组件，可以把ref属性通过参数的参数传递到函数子组件的内部，对ref属性进行转发的操作</p></article></div><div class="related-posts"><h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/42752/" title="前端（二十四）——轮询与 WebSocket的battle" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/8fa75df99bcc4624a73522f726e61664.gif"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/42752/" title="前端（二十四）——轮询与 WebSocket的battle">前端（二十四）——轮询与 WebSocket的battle</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/29889/" title="前端（十七）——gitee上开源一个移动端礼盒商城项目（前端+后台）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/19e5a771adfa4c84bd72876d94365b63.gif"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/29889/" title="前端（十七）——gitee上开源一个移动端礼盒商城项目（前端+后台）">前端（十七）——gitee上开源一个移动端礼盒商城项目（前端+后台）</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/28583/" title="Classic AUTOSAR专题 | 存储模块简介" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/a989c26ebf5fb9a34288877457790f20.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/28583/" title="Classic AUTOSAR专题 | 存储模块简介">Classic AUTOSAR专题 | 存储模块简介</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/41338/" title="Netty-2-数据编解码" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/e3cf32a267c74d7383f729ed9125e591.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/41338/" title="Netty-2-数据编解码">Netty-2-数据编解码</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/16338/" title="OpenPCDet系列 | 4.4 DataProcessor点云数据处理模块解析" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/f3a1184ee28f4d44ac6e1efb1e9c6627.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/16338/" title="OpenPCDet系列 | 4.4 DataProcessor点云数据处理模块解析">OpenPCDet系列 | 4.4 DataProcessor点云数据处理模块解析</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/26732/" title="CSS中设置( 单行、多行 )超出显示省略号" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/175ee7bbef15406d99f23a6d898ba370.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/26732/" title="CSS中设置( 单行、多行 )超出显示省略号">CSS中设置( 单行、多行 )超出显示省略号</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/41648/" title="Hack The Box – DevVortex" data-bg="https://img.maxssl.com/uploads/?url=https://img2023.cnblogs.com/blog/1392129/202312/1392129-20231230142232197-1152431386.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/41648/" title="Hack The Box – DevVortex">Hack The Box – DevVortex</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/54975/" title="pyjwt，一个强大的 Python JWT解析校验库！" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/6a70fa1877384d198f5b7bf6dfd265c0.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/54975/" title="pyjwt，一个强大的 Python JWT解析校验库！">pyjwt，一个强大的 Python JWT解析校验库！</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT：强强联合Langchain-Vicuna的应用实战开源项目，彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle：世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库：第三章关系数据库标准语言SQL（二）数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开，原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通：从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/29174/" title="《存储IO路径》专题：块设备层多队列blk-mq架构" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/b0482a0842dfa44548b9bfe06fe6c766.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/29174/" title="《存储IO路径》专题：块设备层多队列blk-mq架构">《存储IO路径》专题：块设备层多队列blk-mq架构</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/30013/" title="Feign（替代RestTemplate）远程调用" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/a23cae33061643f1a1ef5f6a93fcbdd5.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/30013/" title="Feign（替代RestTemplate）远程调用">Feign（替代RestTemplate）远程调用</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/23779/" title="吐血整理 ! 某大厂领导Java异步编程手册配套资料限时下载" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/70b3a8884d4a45b96d690656bacbb333.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/23779/" title="吐血整理 ! 某大厂领导Java异步编程手册配套资料限时下载">吐血整理 ! 某大厂领导Java异步编程手册配套资料限时下载</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/8933/" title="Android 数据库增删改查" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/8c19e33000c84a52af0f83c55a4f3d37.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/8933/" title="Android 数据库增删改查">Android 数据库增删改查</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/49934/" title="PHPExcel导出excel" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/01bd199b062c4b09a754f19b7bfbf1b1.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/49934/" title="PHPExcel导出excel">PHPExcel导出excel</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/9061/" title="202031607327-杨辽辽实验一软件工程准备初步了解软件工程" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/9061/" title="202031607327-杨辽辽实验一软件工程准备初步了解软件工程">202031607327-杨辽辽实验一软件工程准备初步了解软件工程</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span></span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span></span></a></li></ul></div><div class="back-top"><i class="fas fa-caret-up"></i></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="fas fa-times"></i></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"10777","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"44f45d2df4","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>