您现在的位置是：首页 > 技术教程正文

React面试题最全

admin 阅读： 2024-03-27

后台-插件-广告管理-内容页头部广告（手机）

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 中，表单元素如、和<select>通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。</p> <p>而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如onChange)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。</p> <h3>10.<strong>如何 React.createElement ？</strong></h3> <ol><li>const element <span>=</span> (</li><li> </li><li> <span><</span>h<span>1</span> className<span>=</span><span>"greeting"</span><span>></span></li><li> </li><li> Hello, world!</li><li> </li><li> <span><</span><span>/</span>h<span>1</span><span>></span></li><li> </li><li>)</li></ol> <ol><li><span>const</span> <span>element</span> = React.<span>createElement</span>(</li><li> </li><li> <span>'h1'</span>,</li><li> </li><li> {<span>className</span>: <span>'greeting'</span>},</li><li> </li><li> <span>'Hello, world!'</span></li><li> </li><li>);</li></ol> <h3>11.什么是jsx？</h3> <p>在第一发布react时，还引入了一种新的js方言jsx，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一起了</p> <h3>12.为什么不直接更新state？</h3> <p>如果试图直接更新state，就不会重新渲染组件</p> <p>需要使用setState（）方法更新state，它对state对象进行更新，当state改变时，组件通过重新渲染来响应</p> <h3>13.<strong>React 组件生命周期有哪些不同阶段？</strong></h3> <ol><li><strong>Initialization</strong>：在这个阶段，组件准备设置初始化状态和默认属性。</li><li><strong>Mounting</strong>：react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括componentWillMount和componentDidMount生命周期方法。</li><li><strong>Updating</strong>：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。</li><li><strong>Unmounting</strong>：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 componentWillUnmount 生命周期方法。</li></ol><p>除以上四个常用生命周期外，还有一个错误处理的阶段：</p> <p><strong>Error Handling</strong>：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了 componentDidCatch 生命周期方法。</p> <h3>14.react生命周期方法有哪些？</h3> <ul><li>componentWillMount:在渲染之前执行，用于根组件中的 App 级配置。</li><li>componentDidMount：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。</li><li>componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染</li><li>shouldComponentUpdate：确定是否更新组件。默认情况下，它返回true。如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。</li><li>componentWillUpdate：在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。</li><li>componentDidUpdate：它主要用于更新DOM以响应props或state更改。</li><li>componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。</li></ul><h3>15.<strong>这三个点(...)在 React 干嘛用的？</strong></h3> <p> 扩展运算符或者叫展开操作符，对于创建具有现有对象的大多数属性的新对象非常方便，在更新state时经常这么用</p> <h3>16.<strong>使用 React Hooks 好处是啥？</strong></h3> <p><strong>Hooks</strong>是 React 16.8 中的新添加内容。它们允许在不编写类的情况下使用state和其他 React 特性。使用 Hooks，可以从组件中提取有状态逻辑，这样就可以独立地测试和重用它。Hooks 允许咱们在不改变组件层次结构的情况下重用有状态逻辑，这样在许多组件之间或与社区共享 Hooks 变得很容易</p> <p>hooks解决了什么问题？</p> <p> 函数组件中可以使用类组件中的特性问题</p> <h3><strong>17：React 中的 useState() 是什么？</strong></h3> <p>useState 是一个内置的 React Hook。useState(0) 返回一个元组，其中第一个参数count是计数器的当前状态，setCounter 提供更新计数器状态的方法。</p> <p>咱们可以在任何地方使用setCounter方法更新计数状态-在这种情况下，咱们在setCount函数内部使用它可以做更多的事情，使用 Hooks，能够使咱们的代码保持更多功能，还可以避免过多使用基于类的组件</p> <p>定义state的数据，参数是初始化的数据，返回值两个值1. 初始化值，2. 修改的方法</p> <p>useState中修改的方法异步</p> <ol><li contentScore="40"> <p>借助于useEffect 进行数据的监听</p> </li><li contentScore="67"> <p>可以自己定义Hooks的方法, 方法内部可以把逻辑返回</p> </li></ol><h3>18.<strong>React 中的StrictMode(严格模式)是什么？</strong></h3> <p>React 的StrictMode是一种辅助组件，可以帮助咱们编写更好的 react 组件，可以使用<StrictMode />包装一组组件，并且可以帮咱们以下检查：</p> <ul><li>验证内部组件是否遵循某些推荐做法，如果没有，会在控制台给出警告。</li><li>验证是否使用的已经废弃的方法，如果有，会在控制台给出警告。</li><li>通过识别潜在的风险预防一些副作用。</li></ul><h3>19.<strong>为什么类方法需要绑定到类实例？</strong></h3> <p>在js中，this值会根据当前上下文的变化，在React类组件方法中，开发人员通常希望this引用罪案的当前实例，因此有必要将这些方法绑定到实例</p> <h3>20.什么是prop drilling，如何避免？</h3> <p>在构建 React 应用程序时，在多层嵌套组件来使用另一个嵌套组件提供的数据。最简单的方法是将一个 prop 从每个组件一层层的传递下去，从源组件传递到深层嵌套组件，这叫做<strong>prop drilling</strong>。</p> <p>prop drilling的主要缺点是原本不需要数据的组件变得不必要地复杂，并且难以维护。</p> <p>为了避免prop drilling，一种常用的方法是使用<strong>React Context</strong>。通过定义提供数据的Provider组件，并允许嵌套的组件通过Consumer组件或useContext Hook 使用上下文数据</p> <h3>21.<strong>描述 Flux 与 MVC？</strong></h3> <p>传统的 MVC 模式在分离数据(Model)、UI(View和逻辑(Controller)方面工作得很好，但是 MVC 架构经常遇到两个主要问题:</p> <p><strong>数据流不够清晰</strong>:跨视图发生的级联更新常常会导致混乱的事件网络，难于调试。</p> <p><strong>缺乏数据完整性</strong>:模型数据可以在任何地方发生突变，从而在整个UI中产生不可预测的结果。</p> <p>使用 Flux 模式的复杂用户界面不再遭受级联更新，任何给定的React 组件都能够根据 store 提供的数据重建其状态。Flux 模式还通过限制对共享数据的直接访问来加强数据完整性</p> <h3>22.<strong>受控组件和非受控组件区别是啥？</strong></h3> <ul><li><strong>受控组件</strong>是 React 控制中的组件，并且是表单数据真实的唯一来源。</li><li>非受控组件是由 DOM 处理表单数据的地方，而不是在 React 组件中。</li></ul><p>尽管非受控组件通常更易于实现，因为只需使用refs即可从 DOM 中获取值，但通常建议优先选择受控制的组件，而不是非受控制的组件。</p> <p>这样做的主要原因是受控组件支持即时字段验证，允许有条件地禁用/启用按钮，强制输入格式</p> <h3>23. <strong>什么是 React Context?</strong></h3> <p>Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性</p> <h3>24.<strong>什么是 React Fiber?</strong></h3> <p><strong>Fiber</strong> 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。<strong>React Fiber</strong> 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。</p> <p>React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。</p> <h3>25.<strong>如何在 ReactJS 的 Props上应用验证？</strong></h3> <p>当应用程序在开发模式下运行时，React 将自动检查咱们在组件上设置的所有 props，以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的 props 用 isRequired定义的。</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><h3>26.<strong>在 React 中使用构造函数和 getInitialState 有什么区别？</strong></h3> <p>构造函数和getInitialState之间的区别就是ES6和ES5本身的区别。在使用ES6类时，应该在构造函数中初始化state，并在使用React.createClass时定义getInitialState方法。</p> <h3>27.<strong>Hooks会取代 render props 和高阶组件吗？</strong></h3> <p>render props和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。</p> <p>这两种模式仍然有一席之地(例如，一个虚拟的 scroller 组件可能有一个 renderItem prop，或者一个可视化的容器组件可能有它自己的 DOM 结构)。但在大多数情况下，Hooks 就足够了，可以帮助减少树中的嵌套</p> <h3>28.<strong>如何避免组件的重新渲染？</strong></h3> <p>React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法，在这些情况下非常有用：</p> <ul><li>React.memo():这可以防止不必要地重新渲染函数组件</li><li>PureComponent:这可以防止不必要地重新渲染类组件</li></ul><p>这两种方法都依赖于对传递给组件的props的浅比较，如果 props 没有改变，那么组件将不会重新渲染。虽然这两种工具都非常有用，但是浅比较会带来额外的性能损失，因此如果使用不当，这两种方法都会对性能产生负面影响。</p> <p>通过使用 <strong>React Profiler</strong>，可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能。</p> <h3>29.<strong>什么是纯函数？</strong></h3> <p>纯函数是不依赖并且不会在其作用域之外修改变量状态的函数。本质上，纯函数始终在给定相同参数的情况下返回相同结果。</p> <h3>30.<strong>当调用setState时，React render 是如何工作的</strong></h3> <ol><li>虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用setState()时，render会被再次调用，因为默认情况下shouldComponentUpdate总是返回true，所以默认情况下 React 是没有优化的。</li><li>原生 DOM 渲染:React 只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少——这是很棒的React特性，它优化了真实DOM的变化，使React变得更快。</li></ol><h3>31.<strong>如何避免在React重新绑定实例</strong>？</h3> <p>1.将事件处理程序定义为内联箭头函数</p> <ol><li><span><span>class</span> <span>SubmitButton</span> <span>extends</span> <span>React</span>.<span>Component</span> </span>{</li><li> </li><li> constructor(props) {</li><li> </li><li> <span>super</span>(props);</li><li> </li><li> <span>this</span>.state = {</li><li> </li><li> isFormSubmitted: <span>false</span></li><li> </li><li> };</li><li> </li><li> }</li><li> </li><li> </li><li> </li><li> render() {</li><li> </li><li> <span>return</span> (</li><li> </li><li> <button onClick={() => {</li><li> </li><li> <span>this</span>.setState({ isFormSubmitted: <span>true</span> });</li><li> </li><li> }}><span>Submit</span></button></li><li> </li><li> )</li><li> </li><li> }</li><li> </li><li>}</li></ol><span data-report-view='{"spm":"1001.2101.3001.7365"}'><img src="/d/file/p/20240327/bbf1c74866166ee91b1e2cbfcf8a84e1.png" alt="" title=""></span> <p>2.使用箭头函数来定义方法：</p> <ol><li><span><span>class</span> <span>SubmitButton</span> <span>extends</span> <span>React</span>.<span>Component</span> </span>{</li><li> </li><li> state = {</li><li> </li><li> isFormSubmitted: <span>false</span></li><li> </li><li> }</li><li> </li><li> </li><li> </li><li> handleSubmit = () => {</li><li> </li><li> <span>this</span>.setState({</li><li> </li><li> isFormSubmitted: <span>true</span></li><li> </li><li> });</li><li> </li><li> }</li><li> </li><li> </li><li> </li><li> render() {</li><li> </li><li> <span>return</span> (</li><li> </li><li> <button onClick={<span>this</span>.handleSubmit}><span>Submit</span></button></li><li> </li><li> )</li><li> </li><li> }</li><li> </li><li>}</li></ol><span data-report-view='{"spm":"1001.2101.3001.7365"}'><img src="/d/file/p/20240327/bbf1c74866166ee91b1e2cbfcf8a84e1.png" alt="" title=""></span> <p>3.使用带有 Hooks 的函数组件</p> <ol><li>const SubmitButton <span>=</span> () <span>=</span><span>></span> {</li><li> </li><li> const [isFormSubmitted, setIsFormSubmitted] <span>=</span> useState(<span>false</span>);</li><li> </li><li> </li><li> </li><li> <span>return</span> (</li><li> </li><li> <span><</span>button onClick<span>=</span>{() <span>=</span><span>></span> {</li><li> </li><li> setIsFormSubmitted(<span>true</span>);</li><li> </li><li> }}<span>></span>Submit<span><</span><span>/</span>button<span>></span></li><li> </li><li> )</li><li> </li><li>};</li></ol><span data-report-view='{"spm":"1001.2101.3001.7365"}'><img src="/d/file/p/20240327/bbf1c74866166ee91b1e2cbfcf8a84e1.png" alt="" title=""></span> <h3>32.<strong>区分Real DOM和Virtual DOM</strong>？</h3> <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> <h3> 33.<strong> 什么是React？</strong></h3> <ul><li>React 是 Facebook 在 2011 年开发的前端 JavaScript 库。</li><li>它遵循基于组件的方法，有助于构建可重用的UI组件。</li><li>它用于开发复杂和交互式的 Web 和移动 UI。</li><li>尽管它仅在 2015 年开源，但有一个很大的支持社区</li></ul><h3>34.<strong>React有什么特点</strong></h3> <p>React的主要功能如下：</p> <ol><li>它使用<strong>虚拟DOM </strong>而不是真正的DOM。</li><li>它可以进行<strong>服务器端渲染</strong>。</li><li>它遵循<strong>单向数据流</strong>或数据绑定。</li></ol><h3>35.<strong> 列出React的一些主要优点</strong></h3> <ol><li>它提高了应用的性能</li><li>可以方便地在客户端和服务器端使用</li><li>由于 JSX，代码的可读性很好</li><li>React 很容易与 Meteor，Angular 等其他框架集成</li><li>使用React，编写UI测试用例变得非常容易</li></ol><h3>36. <strong>React有哪些限制？</strong></h3> <ol><li>React 只是一个库，而不是一个完整的框架</li><li>它的库非常庞大，需要时间来理解</li><li>新手程序员可能很难理解</li><li>编码变得复杂，因为它使用内联模板和 JSX</li></ol><h3>37. <strong>为什么浏览器无法读取JSX？</strong></h3> <p> 浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器</p> <h3>38.<strong>与 ES5 相比，React 的 ES6 语法有何不同？</strong></h3> <p>1.require 与 import</p> <p>2.export 与 exports</p> <p>3.component 和 function</p> <p>4.props</p> <p>5.state</p> <h3>39.<strong> React与Angular有何不同？</strong></h3> <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> <h3>40. <strong>你怎样理解“在React中，一切都是组件”这句话</strong></h3> <p>组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。</p> <h3>41.<strong>怎样解释 React 中 render() 的目的</strong></h3> <p>每个React组件强制要求必须有一个 <strong>render()</strong>。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如、<group>、<p> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果</p> <h3>42.<strong>什么是 Props?</strong></h3> <p>Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据</p> <h3>43.<strong> React中的状态是什么？它是如何使用的？</strong></h3> <p>状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们</p> <h3>44.<strong>区分状态和 props</strong></h3> <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> <h3>45. <strong>如何更新组件的状态？</strong></h3> <p> 可以用 this.setState()更新组件的状态。</p> <h3>46.<strong> React 中的箭头函数是什么？怎么用？</strong></h3> <p> 箭头函数（<strong>=></strong>）是用于编写函数表达式的简短语法。这些函数允许正确绑定组件的上下文，因为在 ES6 中默认下不能使用自动绑定。使用高阶函数时，箭头函数非常有用</p> <h3>47.<strong> 区分有状态和无状态组件</strong></h3> <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> <h3> 48.<strong> React中的事件是什么？</strong></h3> <p>在 React 中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异，如：</p> <ol><li>用驼峰命名法对事件命名而不是仅使用小写字母。</li><li>事件作为函数而不是字符串传递。</li></ol><p>事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为，只能通过其事件处理程序访问</p> <h3>49.<strong>React中的合成事件是什么？</strong></h3> <p>合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。</p> <h3>50.<strong>React 中 key 的重要性是什么？</strong></h3> <p>key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能</p> <h3>51.<strong>什么是Redux</strong>?</h3> <p>Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为</p> <h3> 52.<strong>Redux遵循的三个原则是什么？</strong></h3> <ol><li><strong><em>单一事实来源：</em></strong>整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。</li><li><strong><em>状态是只读的：</em></strong>改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。</li><li><strong><em>使用纯函数进行更改：</em></strong>为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。</li></ol><h3>53. <strong>你对“单一事实来源”有什么理解？</strong></h3> <p> Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序</p> <h3>54.<strong>列出 Redux 的组件</strong></h3> <ol><li><strong>Action</strong> – 这是一个用来描述发生了什么事情的对象。</li><li><strong>Reducer</strong> – 这是一个确定状态将如何变化的地方。</li><li><strong>Store</strong> – 整个程序的状态/对象树保存在Store中。</li><li><strong>View</strong> – 只显示 Store 提供的数据。</li></ol><h3>55.<strong> 数据如何通过 Redux 流动？</strong></h3> <p><img alt="" src="/d/file/p/20240327/7a5b02e53e6a2ed004cef46c9b1f658d.png"></p> <h3>56. <strong>如何在 Redux 中定义 Action</strong></h3> <p>React 中的 Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 Redux 中，action 被名为 Action Creators 的函数所创建</p> <h3>57.<strong>解释 Reducer 的作用</strong></h3> <p>Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态</p> <h3>58.<strong>Store 在 Redux 中的意义是什么</strong></h3> <p>Store 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。</p> <h3>59.<strong>Redux 有哪些优点？</strong></h3> <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><h3>60.<strong>什么是React 路由</strong></h3> <p> React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。 React 路由有一个简单的API</p> <h3>61.<strong> 为什么React Router v4中使用 switch 关键字 </strong></h3> <p> 虽然 <strong><p> </strong>用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。使用时，<strong><switch></strong> 标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线</p> <h3>62. <strong> 为什么需要 React 中的路由？</strong></h3> <p>Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图</p> <h3>63.<strong>列出 React Router 的优点。</strong></h3> <ol><li>就像 React 基于组件一样，在 React Router v4 中，API 是 <em>'All About Components'</em>。可以将 Router 可视化为单个根组件（<strong><BrowserRouter></strong>），其中我们将特定的子路由（<strong><route></strong>）包起来。</li><li>无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在 <strong><BrowserRouter></strong> 组件中。</li><li>包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换</li></ol><h3>64.<strong>React Router与常规路由有何不同？</strong></h3> <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> <h3>65.常用的hooks</h3> <p> useState：定义state的数据，参数是初始化的数据，返回值两个值1. 初始化值，2. 修改的方法</p> <p>useEffect：副作用函数，顾名思义，副作用即只有使用过后才会产生副作用</p> <ol><li contentScore="125"> <p>当作生命周期来使用：第二个参数如果没写的话，页面一更新触发，compoentDidMount compoentDidUpdate</p> </li><li contentScore="73"> <p>第二个参数如果空数组的话，只执行一次，compoentDidMount</p> </li><li contentScore="78"> <p>数组中跟某些变量，当作监听器来使用，监听数据的变化，</p> </li><li contentScore="72"> <p>useEffect是一个副作用函数，组件更新完成后触发的函数</p> </li><li contentScore="79"> <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> <h3>66.react中ref的使用方式？</h3> <p>1.可以直接写一个字符串，不过它只适用于类组件</p> <p>2.createRef和useRef来定义ref变量，ref.current获取数据</p> <p>3.可以使用箭头函数的方式，提前定义一个变量，箭头函数的形参就是当前对象 </p> <ol><li>const App <span>=</span> ()<span>=</span><span>></span>{</li><li> let h <span>=</span> useRef();</li><li> </li><li> let inp <span>=</span> <span>null</span>;<span>/</span><span>/</span>定义一个空变量</li><li> </li><li> const setVal <span>=</span> ()<span>=</span><span>></span>{</li><li> console.log(inp.<span>value</span>);</li><li> }</li><li> <span>return</span> (</li><li> <span><</span>div<span>></span></li><li> <span><</span>h<span>3</span> <span>ref</span><span>=</span>{h}<span>></span>ceshi<span><</span><span>/</span>h<span>3</span><span>></span></li><li> <span><</span>button onClick<span>=</span>{()<span>=</span><span>></span>console.log(h.current)}<span>></span>获取<span><</span><span>/</span>button<span>></span></li><li> </li><li> <span><</span>hr <span>/</span><span>></span></li><li> <span><</span><span>input</span> placeholder<span>=</span><span>"输入内容"</span> <span>ref</span><span>=</span>{(el)<span>=</span><span>></span>{ inp <span>=</span> el; }} onChange<span>=</span>{setVal}<span>/</span><span>></span></li><li> <span><</span><span>/</span>div<span>></span></li><li> )</li><li>}</li></ol><span data-report-view='{"spm":"1001.2101.3001.7365"}'><img src="/d/file/p/20240327/bbf1c74866166ee91b1e2cbfcf8a84e1.png" alt="" title=""></span> <p>ref属性不能直接绑定到函数子组件的，函数组件没有this对象，无法获取函数子组件的对象内容，最后函数组件forwardRef高阶组件组件，可以把ref属性通过参数的参数传递到函数子组件的内部，对ref属性进行转发的操作</p> </div> <div class="pagebar"> </div> <div class="tags_share"> <div class="artice_tags"> <span>标签:</span> </div> </div> <div class="avow"> <div class="avowtitle">声明</div>  <p>1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。</p> <p>在线投稿：<a href='https://www.pyhost.cn/e/DoInfo/AddInfo.php?classid=2&mid=1&ecmscheck=1' target='_blank'>投稿</a> 站长QQ：1888636</p>  </div> <div class="pcd_ad"><script src="/skin/js/thea7.js"></script></div> <div class="mbd_ad"><table width="100%" height="90" style="background-color:#ccc;"> <tr align="center"> <td style="text-align: center;color: #666;">后台-插件-广告管理-内容页尾部广告（手机）</td> </tr> </table></div> <div class="related"> <div class="md_tit"> <span>相关文章</span> </div> <ul> <li><a href="/tutorial/5402.html" title="08 | Swoole与Go系列教程之Channel通道的应用"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="08 | Swoole与Go系列教程之Channel通道的应用"></div> <p>08 | Swoole与Go系列教程之Channel通道的应用</p> </a> </li> <li><a href="/tutorial/5403.html" title="thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能"></div> <p>thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能</p> </a> </li> <li><a href="/tutorial/5397.html" title="[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告"></div> <p>[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告</p> </a> </li> <li><a href="/tutorial/5396.html" title="Typecho：简约而强大的开源PHP博客平台"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="Typecho：简约而强大的开源PHP博客平台"></div> <p>Typecho：简约而强大的开源PHP博客平台</p> </a> </li> <li><a href="/tutorial/5387.html" title="昔日辉煌不再，PHP老矣，尚能饭否？"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="昔日辉煌不再，PHP老矣，尚能饭否？"></div> <p>昔日辉煌不再，PHP老矣，尚能饭否？</p> </a> </li> <li><a href="/tutorial/5384.html" title="PHP APCu缓存使用与避坑"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="PHP APCu缓存使用与避坑"></div> <p>PHP APCu缓存使用与避坑</p> </a> </li> <li><a href="/tutorial/5381.html" title="谁说PHP不能异步和并行运行？"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="谁说PHP不能异步和并行运行？"></div> <p>谁说PHP不能异步和并行运行？</p> </a> </li> <li><a href="/tutorial/5377.html" title="一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展"></div> <p>一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展</p> </a> </li> </ul> </div> </div> </div> <div class="main_right" id="main_right"> <div class="widget widget_gzwmdiy"> <div class="md_tit"><span>关注我们</span></div> <div class="widget_gz_body"> <p>扫一扫关注我们，了解最新精彩内容</p> <div class="qr_img"> <img src="/d/file/p/20231220/8ad98652841054fbbc542cb0219b1219.png" alt=""> </div> </div> </div> <div class="widget widget_searchpanel"> <div class="md_tit"><span>搜索</span></div> <div class="widget_div"> <form onsubmit="return checkSearchForm()" method="post" name="searchform" action="/e/search/index.php" > <input type="text" name="keyboard" placeholder="输入关键词"/> <button type="submit" class="submit" value="搜索"><i class="fa fa-search"></i></button> <input type="hidden" value="title" name="show"> <input type="hidden" value="1" name="tempid"> <input type="hidden" value="news" name="tbname"> <input name="mid" value="1" type="hidden"> <input name="dopost" value="search" type="hidden"> </form> </div> </div> <div class="widget widget_cead"> <script src="/skin/js/thea3.js"></script> </div> <div class="widget widget_paihang"> <div class="md_tit"><span>排行榜</span></div> <script>$( function () {$( '.paihang' ).tabslet();} );</script> <div class="paihang"> <ul class="tit"> <li><a href="#hot_1">热门文章</a></li> <li><a href="#hot_2">随机文章</a></li> </ul> <div id="hot_1" class="ph_list"> <ul> <li><a href="/tutorial/1009.html" target="_blank">好奇喵 | Tor浏览器——如何拥有一颗洋葱并使用</a></li> <li><a href="/tutorial/2921.html" target="_blank">Ubuntu 20.04 RTX 4090显卡深度学习环境配置（Nvidia显卡驱动、CUDA11.6.0、cuDNN8.5）</a></li> <li><a href="/tutorial/1594.html" target="_blank">VPN的介绍及自建点对点的OpenVPN和使用方法：保姆级详细教程，(windou客户端版)后附脚本</a></li> <li><a href="/tutorial/126.html" target="_blank">phpy ：PHP 与 Python 互调用库，为 PHP 引入 Python 生态，PHP 也可以写 AI 了</a></li> <li><a href="/tutorial/120.html" target="_blank">Linux内核开启BBRv3加速让VPS更低延迟提升性能</a></li> <li><a href="/tutorial/1819.html" target="_blank">【R语言】——基因GO/KEGG富集分析!超级简单的保姆级教程！</a></li> <li><a href="/tutorial/2192.html" target="_blank">Python 可视化 web 神器：streamlit、Gradio、dash、nicegui；低代码 Python Web 框架：PyWebIO</a></li> <li><a href="/tutorial/164.html" target="_blank">如何快速定位当前数据库消耗 CPU 最高的sql 语句？</a></li> <li><a href="/tutorial/4398.html" target="_blank">Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结</a></li> </ul> </div> <div id="hot_2" class="ph_list"> <ul> <li><a href="/tutorial/3141.html" target="_blank">pydantic 库（Python 数据接口定义）基本使用指南</a></li> <li><a href="/tutorial/942.html" target="_blank">OpenMediaVault 6.x 配置网络的过程以及遇到的问题</a></li> <li><a href="/tutorial/4103.html" target="_blank">【小沐学C#】WPF中嵌入web网页控件（WebBrowser、WebView2、CefSharp）</a></li> <li><a href="/tutorial/1005.html" target="_blank">ssm/java/node/python/php汽车售后服务及通信数据管理平台APP【2024年毕设】</a></li> <li><a href="/tutorial/1373.html" target="_blank">Android+uniapp公益捐赠拍卖系统微信小程序springboot/php/django/nodejs</a></li> <li><a href="/tutorial/4718.html" target="_blank">前端使用firebase配置第三方登录介绍（谷歌登录，facebook登录等）</a></li> <li><a href="/tutorial/1261.html" target="_blank">java/php/node.js/python某高校学生成绩信息管理系统【2024年毕设】</a></li> <li><a href="/tutorial/3612.html" target="_blank">2023 最新版IntelliJ IDEA 2023.1创建Java Web 项目详细步骤（图文详解）</a></li> <li><a href="/tutorial/1693.html" target="_blank">虚拟机中Linux系统配置静态IP （详细步骤）</a></li> </ul> </div> </div> </div> <div class="widget widget_cead"> <script src="/skin/js/thea4.js"></script> </div> <div class="widget widget_previous"> <div class="md_tit"><span>最近发表</span></div> <ul> <li><a title="08 | Swoole与Go系列教程之Channel通道的应用" href="/tutorial/5402.html">08 | Swoole与Go系列教程之Channel通道的应用</a></li> <li><a title="thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能" href="/tutorial/5403.html">thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能</a></li> <li><a title="[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告" href="/tutorial/5397.html">[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告</a></li> <li><a title="Typecho：简约而强大的开源PHP博客平台" href="/tutorial/5396.html">Typecho：简约而强大的开源PHP博客平台</a></li> <li><a title="昔日辉煌不再，PHP老矣，尚能饭否？" href="/tutorial/5387.html">昔日辉煌不再，PHP老矣，尚能饭否？</a></li> <li><a title="PHP APCu缓存使用与避坑" href="/tutorial/5384.html">PHP APCu缓存使用与避坑</a></li> <li><a title="谁说PHP不能异步和并行运行？" href="/tutorial/5381.html">谁说PHP不能异步和并行运行？</a></li> <li><a title="一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展" href="/tutorial/5377.html">一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展</a></li> <li><a title="Typecho博客搭建教程" href="/tutorial/5374.html">Typecho博客搭建教程</a></li> </ul> </div> <div class="widget widget_cead"> <script src="/skin/js/thea5.js"></script> </div> <div class="widget widget_tags"> <div class="md_tit"><span>标签列表</span></div> <ul> <li><a target="_blank" href="/tags-优惠促销-0.html">优惠促销</a></li> <li><a target="_blank" href="/tags-香港VPS-0.html">香港VPS</a></li> <li><a target="_blank" href="/tags-美国VPS-0.html">美国VPS</a></li> <li><a target="_blank" href="/tags-洛杉矶-0.html">洛杉矶</a></li> <li><a target="_blank" href="/tags-洛杉矶VPS-0.html">洛杉矶VPS</a></li> <li><a target="_blank" href="/tags-新加坡vps-0.html">新加坡vps</a></li> <li><a target="_blank" href="/tags-优惠码-0.html">优惠码</a></li> <li><a target="_blank" href="/tags-服务器-0.html">服务器</a></li> <li><a target="_blank" href="/tags-美国CN2VPS-0.html">美国CN2VPS</a></li> <li><a target="_blank" href="/tags-便宜美国vps-0.html">便宜美国vps</a></li> <li><a target="_blank" href="/tags-美国vps推荐-0.html">美国vps推荐</a></li> <li><a target="_blank" href="/tags-日本vps-0.html">日本vps</a></li> <li><a target="_blank" href="/tags-美国便宜VPS-0.html">美国便宜VPS</a></li> <li><a target="_blank" href="/tags-独立服务器-0.html">独立服务器</a></li> <li><a target="_blank" href="/tags-VPS-0.html">VPS</a></li> <li><a target="_blank" href="/tags-香港vps推荐-0.html">香港vps推荐</a></li> <li><a target="_blank" href="/tags-美国vpscn2-0.html">美国vpscn2</a></li> <li><a target="_blank" href="/tags-香港cn2vps-0.html">香港cn2vps</a></li> <li><a target="_blank" href="/tags-美国cmin2vps-0.html">美国cmin2vps</a></li> <li><a target="_blank" href="/tags-美国as9929vps-0.html">美国as9929vps</a></li> </ul> </div> </div> </div>  </div> </div> <div id="footer"> <div class="footer container"> <div class="fr"><a href="/contact/" target="_blank">申请友情链接</a></div> <div class="fl"> <p>Copyright (c) 2023 主机评测 All rights reserved. <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">浙ICP备2022012306号-1</a> </p> </div> </div> </div> <div class="m_search"><i class="fa fa-search"></i></div> <div class="m_search_box"> <span><i class="fa fa-remove"></i></span> <form onsubmit="return checkSearchForm()" method="post" name="searchform" action="/e/search/index.php" > <input type="text" name="keyboard" placeholder="输入关键词"/> <button type="submit" class="submit" value="搜索"><i class="fa fa-search"></i></button> <input type="hidden" name="show" value="title,newstext"> <input type="hidden" name="tempid" value="1"> <input type="hidden" value="news" name="tbname"> <input name="mid" value="1" type="hidden"> <input name="dopost" value="search" type="hidden"> </form> </div> <div id="goTop" class="goTop"><i class="fa fa-angle-up"></i></div> <script src="/skin/js/common.min.js" type="text/javascript"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f87360bc08657de9dda1d3005636bdbe"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>