（收藏）react常用面试题的介绍

本篇文章给大家带来的内容是关于（收藏）react常用面试题的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

下面是一个常用的关于 React 的面试问题列表：

无论作为一个面试者，或者招聘官，下面这些问题都可以去参考

务必收藏

React 的工作原理

React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。

使用 React 有何优点

只需查看 render 函数就会很容易知道一个组件是如何被渲染的

JSX 的引入，使得组件的代码更加可读，也更容易看懂组件的布局，或者组件之间是如何互相引用的

支持服务端渲染，这可以改进 SEO 和性能

易于测试

React 只关注 View 层，所以可以和其它任何框架(如Backbone.js, Angular.js)一起使用

展示组件(Presentational component)和容器组件(Container component)之间有何不同

展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。

容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。

类组件(Class component)和函数式组件(Functional component)之间有何不同

类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态

当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

(组件的)状态(state)和属性(props)之间有何不同

State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。

指出(组件)生命周期方法的不同

componentWillMount -- 多用于根组件中的应用程序配置

componentDidMount -- 在这可以完成所有没有 DOM 就不能做的所有配置，并开始获取所有你需要的数据；如果需要设置事件监听，也可以在这完成

componentWillReceiveProps -- 这个周期函数作用于特定的 prop 改变导致的 state 转换

shouldComponentUpdate -- 如果你担心组件过度渲染，shouldComponentUpdate 是一个改善性能的地方，因为如果组件接收了新的 prop， 它可以阻止(组件)重新渲染。shouldComponentUpdate 应该返回一个布尔值来决定组件是否要重新渲染

componentWillUpdate -- 很少使用。它可以用于代替组件的 componentWillReceiveProps 和 shouldComponentUpdate(但不能访问之前的 props)

componentDidUpdate -- 常用于更新 DOM，响应 prop 或 state 的改变

componentWillUnmount -- 在这你可以取消网络请求，或者移除所有与组件相关的事件监听器

应该在 React 组件的何处发起 Ajax 请求

在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。

何为受控组件(controlled component)

在 HTML 中，类似 , 和 <select> 这样的表单元素会维护自身的状态，并基于用户的输入来更新。当用户提交表单时，前面提到的元素的值将随表单一起被发送。但在 React 中会有些不同，包含表单元素的组件将会在 state 中追踪输入的值，并且每次调用回调函数时，如 onChange 会更新 state，重新渲染组件。一个输入表单元素，它的值通过 React 的这种方式来控制，这样的元素就被称为"受控元素"。</p> <h4 id="在-React-中-refs-的作用是什么">在 React 中，refs 的作用是什么</h4> <p>Refs 可以用于获取一个 DOM 节点或者 React 组件的引用。何时使用 refs 的好的示例有管理焦点/文本选择，触发命令动画，或者和第三方 DOM 库集成。你应该避免使用 String 类型的 Refs 和内联的 ref 回调。Refs 回调是 React 所推荐的。</p> <h4 id="何为高阶组件-higher-order-component">何为高阶组件(higher order component)</h4> <p>高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。</p> <p>练习</p> <p>写一个反转其输入的 HOC</p> <p>写一个从 API 提供数据给传入的组件的 HOC</p> <p>写一个实现 shouldComponentUpdate 来避免 reconciliation 的 HOC</p> <p>写一个通过 React.Children.toArray 对传入组件的子组件进行排序的 HOC</p> <h4 id="使用箭头函数-arrow-functions-的优点是什么">使用箭头函数(arrow functions)的优点是什么</h4> <div> <p>作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 this 值(在构造函数中是新对象；在严格模式下，函数调用中的 this 是未定义的；如果函数被称为“对象方法”，则为基础对象等)，但箭头函数不会，它会使用封闭执行上下文的 this 值。</p> <p>简单：箭头函数易于阅读和书写</p> <p>清晰：当一切都是一个箭头函数，任何常规函数都可以立即用于定义作用域。开发者总是可以查找 next-higher 函数语句，以查看 this 的值</p> </div> <h4 id="为什么建议传递给-setState-的参数是一个-callback-而不是一个对象">为什么建议传递给 setState 的参数是一个 callback 而不是一个对象</h4> <p>因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。</p> <h4 id="除了在构造函数中绑定-code-this-code-还有其它方式吗">除了在构造函数中绑定 <code>this</code>，还有其它方式吗</h4> <p>你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。</p> <h4 id="怎么阻止组件的渲染">怎么阻止组件的渲染</h4> <p>在组件的 render 方法中返回 null 并不会影响触发组件的生命周期方法</p> <h4 id="当渲染一个列表时-何为-key-设置-key-的目的是什么">当渲染一个列表时，何为 key？设置 key 的目的是什么</h4> <p>Keys 会有助于 React 识别哪些 items 改变了，被添加了或者被移除了。Keys 应该被赋予数组内的元素以赋予(DOM)元素一个稳定的标识，选择一个 key 的最佳方法是使用一个字符串，该字符串能惟一地标识一个列表项。很多时候你会使用数据中的 IDs 作为 keys，当你没有稳定的 IDs 用于被渲染的 items 时，可以使用项目索引作为渲染项的 key，但这种方式并不推荐，如果 items 可以重新排序，就会导致 re-render 变慢。</p> <h4 id="在构造函数中-调用-super-props-的目的是什么">(在构造函数中)调用 super(props) 的目的是什么</h4> <p>在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。</p> <h4 id="何为-JSX">何为 JSX</h4> <p>JSX 是 JavaScript 语法的一种语法扩展，并拥有 JavaScript 的全部功能。JSX 生产 React "元素"，你可以将任何的 JavaScript 表达式封装在花括号里，然后将其嵌入到 JSX 中。在编译完成之后，JSX 表达式就变成了常规的 JavaScript 对象，这意味着你可以在 if 语句和 for 循环内部使用 JSX，将它赋值给变量，接受它作为参数，并从函数中返回它。</p> <h4 id="怎么用-React-createElement-重写下面的代码">怎么用 React.createElement 重写下面的代码</h4> <p>Question：</p> <pre class="brush:php;toolbar:false">const element = (   <h1 className="greeting">     Hello, rdhub.cn!   </h1> );</pre> <p>Answer：</p> <pre class="brush:php;toolbar:false">const element = React.createElement(   'h1',   {className: 'greeting'},   'Hello, rdhub.cn!' );</pre> <h4>何为 <code>Children</code> </h4> <p>在JSX表达式中，一个开始标签(比如<a>)和一个关闭标签(比如</a>)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。</p> <p>这个属性有许多可用的方法，包括 React.Children.map，React.Children.forEach， React.Children.count， React.Children.only，React.Children.toArray。</p> <h4 id="在-React-中-何为-state">在 React 中，何为 state</h4> <p>State 和 props 类似，但它是私有的，并且完全由组件自身控制。State 本质上是一个持有数据，并决定组件如何渲染的对象。</p> <h4 id="什么原因会促使你脱离-create-react-app-的依赖">什么原因会促使你脱离 create-react-app 的依赖</h4> <p>当你想去配置 webpack 或 babel presets。</p> <h4 id="何为-redux">何为 redux</h4> <p>Redux 的基本思想是整个应用的 state 保持在一个单一的 store 中。store 就是一个简单的 javascript 对象，而改变应用 state 的唯一方式是在应用中触发 actions，然后为这些 actions 编写 reducers 来修改 state。整个 state 转化是在 reducers 中完成，并且不应该有任何副作用。</p> <h4 id="在-Redux-中-何为-store">在 Redux 中，何为 store</h4> <p>Store 是一个 javascript 对象，它保存了整个应用的 state。与此同时，Store 也承担以下职责：</p> <p>允许通过 getState() 访问 state</p> <p>运行通过 dispatch(action) 改变 state</p> <p>通过 subscribe(listener) 注册 listeners</p> <p>通过 subscribe(listener) 返回的函数处理 listeners 的注销</p> <h4 id="何为-action">何为 action</h4> <p>Actions 是一个纯 javascript 对象，它们必须有一个 type 属性表明正在执行的 action 的类型。实质上，action 是将数据从应用程序发送到 store 的有效载荷。</p> <h4 id="何为-reducer">何为 reducer</h4> <p>一个 reducer 是一个纯函数，该函数以先前的 state 和一个 action 作为参数，并返回下一个 state。</p> <h4 id="Redux-Thunk-的作用是什么">Redux Thunk 的作用是什么</h4> <p>Redux thunk 是一个允许你编写返回一个函数而不是一个 action 的 actions creators 的中间件。如果满足某个条件，thunk 则可以用来延迟 action 的派发(dispatch)，这可以处理异步 action 的派发(dispatch)。</p> <h4 id="何为纯函数-pure-function">何为纯函数(pure function)</h4> <p>一个纯函数是一个不依赖于且不改变其作用域之外的变量状态的函数，这也意味着一个纯函数对于同样的参数总是返回同样的结果。</p> <p class="comments-box-content"></p><p>以上是（收藏）react常用面试题的介绍的详细内容。更多信息请关注PHP中文网其他相关文章！</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">声明</div><div>本文转载于：segmentfault思否。如有侵权，请联系admin@php.cn删除</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">相关文章<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="" title="React父组件怎么调用子组件的方法" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63aacf4b62050134.jpg" alt="React父组件怎么调用子组件的方法" src="/static/imghw/default1.png" /></a><a href="" title="React父组件怎么调用子组件的方法" class="phphistorical_Version2_mids_title">React父组件怎么调用子组件的方法</a><span class="Articlelist_txts_time">Dec 27, 2022 pm 07:01 PM</span><p class="Articlelist_txts_p">调用方法：1、类组件中的调用可以利用React.createRef()、ref的函数式声明或props自定义onRef属性来实现；2、函数组件、Hook组件中的调用可以利用useImperativeHandle或forwardRef抛出子组件ref来实现。</p></div><div class="phphistorical_Version2_mids"><a href="" title="怎么调试React源码？多种工具下的调试方法介绍" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/202303/31/2023033118531636061.jpg" alt="怎么调试React源码？多种工具下的调试方法介绍" src="/static/imghw/default1.png" /></a><a href="" title="怎么调试React源码？多种工具下的调试方法介绍" class="phphistorical_Version2_mids_title">怎么调试React源码？多种工具下的调试方法介绍</a><span class="Articlelist_txts_time">Mar 31, 2023 pm 06:54 PM</span><p class="Articlelist_txts_p">怎么调试React源码？下面本篇文章带大家聊聊多种工具下的调试React源码的方法，介绍一下在贡献者、create-react-app、vite项目中如何debugger React的真实源码，希望对大家有所帮助！</p></div><div class="phphistorical_Version2_mids"><a href="" title="深入理解React的自定义Hook" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/644111dd49e1c260.jpg" alt="深入理解React的自定义Hook" src="/static/imghw/default1.png" /></a><a href="" title="深入理解React的自定义Hook" class="phphistorical_Version2_mids_title">深入理解React的自定义Hook</a><span class="Articlelist_txts_time">Apr 20, 2023 pm 06:22 PM</span><p class="Articlelist_txts_p">React 自定义 Hook 是一种将组件逻辑封装在可重用函数中的方式，它们提供了一种在不编写类的情况下复用状态逻辑的方式。本文将详细介绍如何自定义封装 hook。</p></div><div class="phphistorical_Version2_mids"><a href="" title="React为什么不将Vite作为构建应用的首选" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63dce459ae0cc658.jpg" alt="React为什么不将Vite作为构建应用的首选" src="/static/imghw/default1.png" /></a><a href="" title="React为什么不将Vite作为构建应用的首选" class="phphistorical_Version2_mids_title">React为什么不将Vite作为构建应用的首选</a><span class="Articlelist_txts_time">Feb 03, 2023 pm 06:41 PM</span><p class="Articlelist_txts_p">React为什么不将Vite作为构建应用的首选？下面本篇文章就来带大家聊聊React不将Vite作为默认推荐的原因，希望对大家有所帮助！</p></div><div class="phphistorical_Version2_mids"><a href="" title="7 个很棒且实用的React 组件库（压箱底分享）" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/6364fe2a176ea129.jpg" alt="7 个很棒且实用的React 组件库（压箱底分享）" src="/static/imghw/default1.png" /></a><a href="" title="7 个很棒且实用的React 组件库（压箱底分享）" class="phphistorical_Version2_mids_title">7 个很棒且实用的React 组件库（压箱底分享）</a><span class="Articlelist_txts_time">Nov 04, 2022 pm 08:00 PM</span><p class="Articlelist_txts_p">本篇文章给大家整理分享7 个很棒且实用的React 组件库，日常开发中经常会用到的，快来收藏试试吧！</p></div><div class="phphistorical_Version2_mids"><a href="" title="react怎么设置div高度" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/202301/06/2023010610162061324.jpg" alt="react怎么设置div高度" src="/static/imghw/default1.png" /></a><a href="" title="react怎么设置div高度" class="phphistorical_Version2_mids_title">react怎么设置div高度</a><span class="Articlelist_txts_time">Jan 06, 2023 am 10:19 AM</span><p class="Articlelist_txts_p">react设置div高度的方法：1、通过css方式实现div高度；2、在state中声明一个对象C，并在该对象中存放更换按钮的样式，然后获取A并重新设置C中的“marginTop”即可。</p></div><div class="phphistorical_Version2_mids"><a href="" title="【翻译】使用自定义hooks对React组件进行重构" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/63c690a1b11d0794.jpg" alt="【翻译】使用自定义hooks对React组件进行重构" src="/static/imghw/default1.png" /></a><a href="" title="【翻译】使用自定义hooks对React组件进行重构" class="phphistorical_Version2_mids_title">【翻译】使用自定义hooks对React组件进行重构</a><span class="Articlelist_txts_time">Jan 17, 2023 pm 08:13 PM</span><p class="Articlelist_txts_p">我时常会听到人们谈起React函数组件，提到函数组件会不可避免的变得体积更大，逻辑更复杂。毕竟，我们把组件写在了“一个函数”里，因此你不得不接受组件会膨胀导致这个函数会不断膨胀。</p></div><div class="phphistorical_Version2_mids"><a href="" title="聊聊Vuex与Pinia在设计与实现上的区别" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/639069734180d774.jpg" alt="聊聊Vuex与Pinia在设计与实现上的区别" src="/static/imghw/default1.png" /></a><a href="" title="聊聊Vuex与Pinia在设计与实现上的区别" class="phphistorical_Version2_mids_title">聊聊Vuex与Pinia在设计与实现上的区别</a><span class="Articlelist_txts_time">Dec 07, 2022 pm 06:24 PM</span><p class="Articlelist_txts_p">在进行前端项目开发时，状态管理始终是一个绕不开的话题，Vue 与 React 框架本身提供了一部分能力去解决这个问题。但是在开发大型应用时往往有其他考虑，比如需要更规范更完善的操作日志、集成在开发者工具中的时间旅行能力、服务端渲染等。本文以 Vue 框架为例，介绍 Vuex 与 Pinia 这两种状态管理工具在设计与实现上的区别。</p></div></div><a href="https://m.php.cn/zh/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>热AI工具</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>人工智能驱动的应用程序，用于创建逼真的裸体照片</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>用于从照片中去除衣服的在线人工智能工具。</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>免费脱衣服图片</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI脱衣机</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/ai-hentai-generator" title="AI Hentai Generator"class="phpmain_tab2_mids_title"><h3>AI Hentai Generator</h3></a><p>免费生成ai无尽的。</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/ai">显示更多</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>热门文章</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796780570.html" title="R.E.P.O.能量晶体解释及其做什么（黄色晶体）" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.能量晶体解释及其做什么（黄色晶体）</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 周前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796773439.html" title="仓库：如何复兴队友" class="phpgenera_Details_mainR4_bottom_title">仓库：如何复兴队友</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 周前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796774171.html" title="Hello Kitty Island冒险：如何获得巨型种子" class="phpgenera_Details_mainR4_bottom_title">Hello Kitty Island冒险：如何获得巨型种子</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796775427.html" title="击败分裂小说需要多长时间？" class="phpgenera_Details_mainR4_bottom_title">击败分裂小说需要多长时间？</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796775336.html" title="R.E.P.O.保存文件位置：在哪里以及如何保护它？" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.保存文件位置：在哪里以及如何保护它？</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/article.html">显示更多</a></div></div></div><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>热工具</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"><h3>Dreamweaver CS6</h3></a><p>视觉化网页开发工具</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/121" title="禅工作室 13.0.1" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg" src="/static/imghw/default1.png" alt="禅工作室 13.0.1" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/121" title="禅工作室 13.0.1" class="phpmain_tab2_mids_title"><h3>禅工作室 13.0.1</h3></a><p>功能强大的PHP集成开发环境</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/1545" title="适用于 Eclipse 的 SAP NetWeaver 服务器适配器" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/007/169165990824460.png" src="/static/imghw/default1.png" alt="适用于 Eclipse 的 SAP NetWeaver 服务器适配器" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/1545" title="适用于 Eclipse 的 SAP NetWeaver 服务器适配器" class="phpmain_tab2_mids_title"><h3>适用于 Eclipse 的 SAP NetWeaver 服务器适配器</h3></a><p>将Eclipse与SAP NetWeaver应用服务器集成。</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/1557" title="mPDF" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/003/169206948656118.png" src="/static/imghw/default1.png" alt="mPDF" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/1557" title="mPDF" class="phpmain_tab2_mids_title"><h3>mPDF</h3></a><p>mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/660" title="Atom编辑器mac版下载" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ed8cfa94c1a582.jpg" src="/static/imghw/default1.png" alt="Atom编辑器mac版下载" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/660" title="Atom编辑器mac版下载" class="phpmain_tab2_mids_title"><h3>Atom编辑器mac版下载</h3></a><p>最流行的的开源编辑器</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/ai">显示更多</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>热门话题</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/gmailyxdlrkzn" title="gmail邮箱登陆入口在哪里" class="phpgenera_Details_mainR4_bottom_title">gmail邮箱登陆入口在哪里</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7318</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>9</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">Java教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1625</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>14</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1349</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>46</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1261</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>25</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1209</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>29</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/faq/zt">显示更多</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益在线PHP培训，帮助PHP学习者快速成长！</p></div><div class="footermid"><a href="https://m.php.cn/zh/about/us.html">关于我们</a><a href="https://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="https://m.php.cn/zh/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); // 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 绑定事件监听器 function bindEventListeners() { const toggleDisplay = (className, show, eventId) => { document.getElementById(eventId).addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); // 控制 m_menu 的显示和隐藏 toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); // 控制 m_menu_lang 的显示和隐藏 toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); } // 在页面加载完成后绑定事件监听器 window.onload = bindEventListeners; layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); // 获取关闭按钮 const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); // 获取容器元素 const container = document.querySelector(".phpgenera_Details_mainR1"); // 添加点击事件监听器 closeButton.addEventListener("click", (event) => { event.preventDefault(); // 阻止默认的<a>点击行为 container.style.display = "none"; // 隐藏容器 }); document.addEventListener("DOMContentLoaded", () => { // 动态获取所有滚动链接及隐藏目标元素 const links = [{ linkId: "fixed_tab_a1", targetId: "article_main_title1", hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID }, { linkId: "fixed_tab_a2", targetId: "article_main_title2", hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID }, { linkId: "fixed_tab_a3", targetId: "article_main_title3", hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID }, { linkId: "fixed_tab_a4", targetId: "article_main_title4", hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID }, ]; links.forEach(({ linkId, targetId, hideElementId }) => { const linkElement = document.getElementById(linkId); const targetElement = document.getElementById(targetId); const hideElement = document.getElementById(hideElementId); if (linkElement && targetElement) { linkElement.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认行为 // 隐藏指定元素 if (hideElement) { hideElement.style.display = "none"; // 也可以用其他方法隐藏，如 `visibility: hidden` } // 平滑滚动到目标元素 targetElement.scrollIntoView({ behavior: "smooth" }); }); } else { console.warn( `Link, target, or hide element not found: ${linkId}, ${targetId}, ${hideElementId}` ); } }); }); // 初始化菜单交互功能 document.addEventListener('DOMContentLoaded', function () { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function (event) { // 防止子菜单点击触发父级事件 if (event.target.closest('.m_menusnames')) { return; } // 切换菜单状态 this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); // 获取子菜单容器 const subMenuContainer = this.querySelector('.m_menusnames'); // 切换子菜单显示状态 if (subMenuContainer) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; this.querySelector('.layui-icon').classList.remove( 'layui-icon-down'); this.querySelector('.layui-icon').classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; this.querySelector('.layui-icon').classList.remove('layui-icon-up'); this.querySelector('.layui-icon').classList.add('layui-icon-down'); } } }); }); }); </script></body></html>