社招前端react面试题整理

什么是上下文Context

Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。

  • 用法:在父组件上定义getChildContext方法,返回一个对象,然后它的子组件就可以通过this.context属性来获取
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
class Header extends Component{
    render() {
        return (
            
</div> ) } } class Title extends Component{ static contextTypes={ color:PropTypes.string } render() { return ( <div style={{color:this.context.color}}> Title </div> ) } } class Main extends Component{ render() { return ( <div> <Content> </Content> </div> ) } } class Content extends Component{ static contextTypes={ color: PropTypes.string, changeColor:PropTypes.func } render() { return ( <div style={{color:this.context.color}}> Content <button onClick={()=>this.context.changeColor('green')}>绿色</button> <button onClick={()=>this.context.changeColor('orange')}>橙色</button> </div> ) } } class Page extends Component{ constructor() { super(); this.state={color:'red'}; } static childContextTypes={ color: PropTypes.string, changeColor:PropTypes.func } getChildContext() { return { color: this.state.color, changeColor:(color)=>{ this.setState({color}) } } } render() { return ( <div> <Header/> <Main/> </div> ) } } ReactDOM.render(<Page/>,document.querySelector('#root'));</code></pre> <h3>React-Router 4的Switch有什么用?</h3> <p>Switch 通常被用来包裹 Route,用于渲染与路径匹配的第一个子 <code><Route></code> 或 <code><Redirect></code>,它里面不能放其他元素。</p> <p>假如不加 <code><Switch></code> :</p> <pre><code class="javascript">import { Route } from 'react-router-dom' <Route path="/" component={Home}></Route> <Route path="/login" component={Login}></Route> </code></pre> <p>Route 组件的 path 属性用于匹配路径,因为需要匹配 <code>/</code> 到 <code>Home</code>,匹配 <code>/login</code> 到 <code>Login</code>,所以需要两个 Route,但是不能这么写。这样写的话,当 URL 的 path 为 “/login” 时,<code><Route path="/" /></code>和<code><Route path="/login" /></code> 都会被匹配,因此页面会展示 Home 和 Login 两个组件。这时就需要借助 <code><Switch></code> 来做到只显示一个匹配组件:</p> <pre><code class="javascript">import { Switch, Route} from 'react-router-dom' <Switch> <Route path="/" component={Home}></Route> <Route path="/login" component={Login}></Route> </Switch> </code></pre> <p>此时,再访问 “/login” 路径时,却只显示了 Home 组件。这是就用到了exact属性,它的作用就是精确匹配路径,经常与<code><Switch></code> 联合使用。只有当 URL 和该 <code><Route></code> 的 path 属性完全一致的情况下才能匹配上:</p> <pre><code class="javascript">import { Switch, Route} from 'react-router-dom' <Switch> <Route exact path="/" component={Home}></Route> <Route exact path="/login" component={Login}></Route> </Switch></code></pre> <h3>React 中 keys 的作用是什么?</h3> <p>Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。</p> <p>在 React 中渲染集合时,向每个重复的元素添加关键字对于帮助React跟踪元素与数据之间的关联非常重要。key 应该是唯一ID,最好是 UUID 或收集项中的其他唯一字符串:</p> <pre><code class="javascript"><ul> {todos.map((todo) => <li key={todo.id}> {todo.text} </li> )}; </ul> </code></pre> <p>在集合中添加和删除项目时,不使用键或将索引用作键会导致奇怪的行为。</p> <h2>为什么虚拟dom会提高性能</h2> <blockquote> 虚拟<code>dom</code>相当于在<code>js</code>和真实<code>dom</code>中间加了一个缓存,利用<code>dom diff</code>算法避免了没有必要的<code>dom</code>操作,从而提高性能 </blockquote> <p><strong>具体实现步骤如下</strong></p> <ul> <li>用 <code>JavaScript</code> 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 <code>DOM</code> 树,插到文档当中</li> <li>当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异</li> <li>把2所记录的差异应用到步骤1所构建的真正的<code>DOM</code>树上,视图就更新</li> </ul> <p><strong>虚拟DOM一定会提高性能吗?</strong></p> <blockquote> 很多人认为虚拟DOM一定会提高性能,一定会更快,其实这个说法有点片面,因为虚拟DOM虽然会减少DOM操作,但也无法避免DOM操作 </blockquote> <ul> <li>它的优势是在于diff算法和批量处理策略,将所有的DOM操作搜集起来,一次性去改变真实的DOM,但在首次渲染上,虚拟DOM会多了一层计算,消耗一些性能,所以有可能会比html渲染的要慢</li> <li>注意,虚拟DOM实际上是给我们找了一条最短,最近的路径,并不是说比DOM操作的更快,而是路径最简单</li> </ul> <h3>当渲染一个列表时,何为 key?设置 key 的目的是什么</h3> <p>Keys 会有助于 React 识别哪些 <code>items</code> 改变了,被添加了或者被移除了。Keys 应该被赋予数组内的元素以赋予(DOM)元素一个稳定的标识,选择一个 key 的最佳方法是使用一个字符串,该字符串能惟一地标识一个列表项。很多时候你会使用数据中的 IDs 作为 keys,当你没有稳定的 IDs 用于被渲染的 <code>items</code> 时,可以使用项目索引作为渲染项的 key,但这种方式并不推荐,如果 <code>items</code> 可以重新排序,就会导致 <code>re-render</code> 变慢。</p> <h3>React Hooks在平时开发中需要注意的问题和原因</h3> <p>(1)<strong>不要在循环,条件或嵌套函数中调用Hook,必须始终在 React函数的顶层使用Hook</strong></p> <p>这是因为React需要利用调用顺序来正确更新相应的状态,以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook,就容易导致调用顺序的不一致性,从而产生难以预料到的后果。</p> <p><strong>(2)使用useState时候,使用push,pop,splice等直接更改数组对象的坑</strong></p> <p>使用push直接更改数组无法获取到新值,应该采用析构方式,但是在class里面不会有这个问题。代码示例:</p> <pre><code class="javascript">function Indicatorfilter() { let [num,setNums] = useState([0,1,2,3]) const test = () => { // 这里坑是直接采用push去更新num // setNums(num)是无法更新num的 // 必须使用num = [...num ,1] num.push(1) // num = [...num ,1] setNums(num) } return ( <div className='filter'> <div onClick={test}>测试</div> <div> {num.map((item,index) => ( <div key={index}>{item}</div> ))} </div> </div> ) } class Indicatorfilter extends React.Component<any,any>{ constructor(props:any){ super(props) this.state = { nums:[1,2,3] } this.test = this.test.bind(this) } test(){ // class采用同样的方式是没有问题的 this.state.nums.push(1) this.setState({ nums: this.state.nums }) } render(){ let {nums} = this.state return( <div> <div onClick={this.test}>测试</div> <div> {nums.map((item:any,index:number) => ( <div key={index}>{item}</div> ))} </div> </div> ) } } </code></pre> <p>(3)<strong>useState设置状态的时候,只有第一次生效,后期需要更新状态,必须通过useEffect</strong></p> <p>TableDeail是一个公共组件,在调用它的父组件里面,我们通过set改变columns的值,以为传递给TableDeail 的 columns是最新的值,所以tabColumn每次也是最新的值,但是实际tabColumn是最开始的值,不会随着columns的更新而更新:</p> <pre><code class="javascript">const TableDeail = ({ columns,}:TableData) => { const [tabColumn, setTabColumn] = useState(columns) } // 正确的做法是通过useEffect改变这个值 const TableDeail = ({ columns,}:TableData) => { const [tabColumn, setTabColumn] = useState(columns) useEffect(() =>{setTabColumn(columns)},[columns]) } </code></pre> <p><strong>(4)善用useCallback</strong></p> <p>父组件传递给子组件事件句柄时,如果我们没有任何参数变动可能会选用useMemo。但是每一次父组件渲染子组件即使没变化也会跟着渲染一次。</p> <p><strong>(5)不要滥用useContext</strong></p> <p>可以使用基于 useContext 封装的状态管理工具。</p> <p>参考 <a href="https://link.segmentfault.com/?enc=255NEBOLAwzXFbp0nxbvrw%3D%3D.nRKNsh7dx8FJFoNZQJryltLJS0RmQNgDCuPDX3LmKWu3X%2FRd9tNuIGSoDduhkvsE8nA75Ky4EuMP6l7l%2BzaeZg%3D%3D" rel="nofollow">前端进阶面试题详细解答</a></p> <h3>可以使用TypeScript写React应用吗?怎么操作?</h3> <p><strong>(1)如果还未创建 Create React App 项目</strong></p> <ul> <li>直接创建一个具有 typescript 的 Create React App 项目:</li> </ul> <pre><code class="javascript"> npx create-react-app demo --typescript </code></pre> <p><strong>(2)如果已经创建了 Create React App 项目,需要将 typescript 引入到已有项目中</strong></p> <ul> <li>通过命令将 typescript 引入项目:</li> </ul> <pre><code class="javascript">npm install --save typescript @types/node @types/react @types/react-dom @types/jest </code></pre> <ul> <li>将项目中任何 后缀名为 ‘.js’ 的 JavaScript 文件重命名为 TypeScript 文件即后缀名为 ‘.tsx’(例如 src/index.js 重命名为 src/index.tsx )</li> </ul> <h3>React setState 调用的原理</h3> <p>具体的执行过程如下(源码级解析):</p> <ul> <li>首先调用了<code>setState</code> 入口函数,入口函数在这里就是充当一个分发器的角色,根据入参的不同,将其分发到不同的功能函数中去;</li> </ul> <pre><code class="javascript">ReactComponent.prototype.setState = function (partialState, callback) { this.updater.enqueueSetState(this, partialState); if (callback) { this.updater.enqueueCallback(this, callback, 'setState'); } }; </code></pre> <ul> <li><code>enqueueSetState</code> 方法将新的 <code>state</code> 放进组件的状态队列里,并调用 <code>enqueueUpdate</code> 来处理将要更新的实例对象;</li> </ul> <pre><code class="javascript">enqueueSetState: function (publicInstance, partialState) { // 根据 this 拿到对应的组件实例 var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setState'); // 这个 queue 对应的就是一个组件实例的 state 数组 var queue = internalInstance._pendingStateQueue || (internalInstance._pendingStateQueue = []); queue.push(partialState); // enqueueUpdate 用来处理当前的组件实例 enqueueUpdate(internalInstance); } </code></pre> <ul> <li>在 <code>enqueueUpdate</code> 方法中引出了一个关键的对象——<code>batchingStrategy</code>,该对象所具备的<code>isBatchingUpdates</code> 属性直接决定了当下是要走更新流程,还是应该排队等待;如果轮到执行,就调用 <code>batchedUpdates</code> 方法来直接发起更新流程。由此可以推测,<code>batchingStrategy</code> 或许正是 React 内部专门用于管控批量更新的对象。</li> </ul> <pre><code class="javascript">function enqueueUpdate(component) { ensureInjected(); // 注意这一句是问题的关键,isBatchingUpdates标识着当前是否处于批量创建/更新组件的阶段 if (!batchingStrategy.isBatchingUpdates) { // 若当前没有处于批量创建/更新组件的阶段,则立即更新组件 batchingStrategy.batchedUpdates(enqueueUpdate, component); return; } // 否则,先把组件塞入 dirtyComponents 队列里,让它“再等等” dirtyComponents.push(component); if (component._updateBatchNumber == null) { component._updateBatchNumber = updateBatchNumber + 1; } } </code></pre> <p><strong>注意:</strong><code>batchingStrategy</code> 对象可以理解为“锁管理器”。这里的“锁”,是指 React 全局唯一的 <code>isBatchingUpdates</code> 变量,<code>isBatchingUpdates</code> 的初始值是 <code>false</code>,意味着“当前并未进行任何批量更新操作”。每当 React 调用 <code>batchedUpdate</code> 去执行更新动作时,会先把这个锁给“锁上”(置为 <code>true</code>),表明“现在正处于批量更新过程中”。当锁被“锁上”的时候,任何需要更新的组件都只能暂时进入 <code>dirtyComponents</code> 里排队等候下一次的批量更新,而不能随意“插队”。此处体现的“任务锁”的思想,是 React 面对大量状态仍然能够实现有序分批处理的基石。</p> <h3>在React中组件的this.state和setState有什么区别?</h3> <p>this.state通常是用来初始化state的,this.setState是用来修改state值的。如果初始化了state之后再使用this.state,之前的state会被覆盖掉,如果使用this.setState,只会替换掉相应的state值。所以,如果想要修改state的值,就需要使用setState,而不能直接修改state,直接修改state之后页面是不会更新的。</p> <h3>React中发起网络请求应该在哪个生命周期中进行?为什么?</h3> <p>对于异步请求,最好放在componentDidMount中去操作,对于同步的状态改变,可以放在componentWillMount中,一般用的比较少。</p> <p>如果认为在componentWillMount里发起请求能提早获得结果,这种想法其实是错误的,通常componentWillMount比componentDidMount早不了多少微秒,网络上任何一点延迟,这一点差异都可忽略不计。</p> <p><strong>react的生命周期:</strong> constructor() -> componentWillMount() -> render() -> componentDidMount()</p> <p>上面这些方法的调用是有次序的,由上而下依次调用。</p> <ul> <li>constructor被调用是在组件准备要挂载的最开始,此时组件尚未挂载到网页上。</li> <li>componentWillMount方法的调用在constructor之后,在render之前,在这方法里的代码调用setState方法不会触发重新render,所以它一般不会用来作加载数据之用。</li> <li>componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用setState方法,会触发重新渲染。所以,官方设计这个方法就是用来加载外部数据用的,或处理其他的副作用代码。与组件上的数据无关的加载,也可以在constructor里做,但constructor是做组件state初绐化工作,并不是做加载数据这工作的,constructor里也不能setState,还有加载的时间太长或者出错,页面就无法加载出来。所以有副作用的代码都会集中在componentDidMount方法里。</li> </ul> <p>总结:</p> <ul> <li>跟服务器端渲染(同构)有关系,如果在componentWillMount里面获取数据,fetch data会执行两次,一次在服务器端一次在客户端。在componentDidMount中可以解决这个问题,componentWillMount同样也会render两次。</li> <li>在componentWillMount中fetch data,数据一定在render后才能到达,如果忘记了设置初始状态,用户体验不好。</li> <li>react16.0以后,componentWillMount可能会被执行多次。</li> </ul> <h3>constructor 为什么不先渲染?</h3> <p>由ES6的继承规则得知,不管子类写不写constructor,在new实例的过程都会给补上constructor。</p> <p>所以:constructor钩子函数并不是不可缺少的,子组件可以在一些情况略去。比如不自己的state,从props中获取的情况</p> <h3>类组件和函数组件有何不同?</h3> <p><strong>解答</strong></p> <p>在 React 16.8版本(引入钩子)之前,使用基于类的组件来创建需要维护内部状态或利用生命周期方法的组件(即<code>componentDidMount</code>和<code>shouldComponentUpdate</code>)。基于类的组件是 ES6 类,它扩展了 React 的 Component 类,并且至少实现了<code>render()</code>方法。</p> <p>类组件:</p> <pre><code class="javascript">class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } </code></pre> <p>函数组件是无状态的(同样,小于 React 16.8版本),并返回要呈现的输出。它们渲染 UI 的首选只依赖于属性,因为它们比基于类的组件更简单、更具性能。</p> <p>函数组件:</p> <pre><code class="javascript">function Welcome(props) { return <h1>Hello, {props.name}</h1>; } </code></pre> <p>注意:在 React 16.8版本中引入钩子意味着这些区别不再适用(请参阅14和15题)。</p> <h3>setState 是同步异步?为什么?实现原理?</h3> <p><strong>1. setState是同步执行的</strong></p> <p>setState是同步执行的,但是state并不一定会同步更新</p> <p><strong>2. setState在React生命周期和合成事件中批量覆盖执行</strong></p> <p>在React的生命周期钩子和合成事件中,多次执行setState,会批量执行</p> <p>具体表现为,多次同步执行的setState,会进行合并,类似于Object.assign,相同的key,后面的会覆盖前面的</p> <p>当遇到多个setState调用时候,会提取单次传递setState的对象,把他们合并在一起形成一个新的 <br>单一对象,并用这个单一的对象去做setState的事情,就像Object.assign的对象合并,后一个 <br>key值会覆盖前面的key值</p> <p>经过React 处理的事件是不会同步更新 this.state的. 通过 addEventListener || setTimeout/setInterval 的方式处理的则会同步更新。 <br>为了合并setState,我们需要一个队列来保存每次setState的数据,然后在一段时间后执行合并操作和更新state,并清空这个队列,然后渲染组件。</p> <h3>React 高阶组件是什么,和普通组件有什么区别,适用什么场景</h3> <p>官方解释∶</p> <blockquote> 高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。 </blockquote> <p>高阶组件(HOC)就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件,它只是一种组件的设计模式,这种设计模式是由react自身的组合性质必然产生的。我们将它们称为纯组件,因为它们可以接受任何动态提供的子组件,但它们不会修改或复制其输入组件中的任何行为。</p> <pre><code class="javascript">// hoc的定义 function withSubscription(WrappedComponent, selectData) { return class extends React.Component { constructor(props) { super(props); this.state = { data: selectData(DataSource, props) }; } // 一些通用的逻辑处理 render() { // ... 并使用新数据渲染被包装的组件! return <WrappedComponent data={this.state.data} {...this.props} />; } }; // 使用 const BlogPostWithSubscription = withSubscription(BlogPost, (DataSource, props) => DataSource.getBlogPost(props.id)); </code></pre> <p><strong>1)HOC的优缺点</strong></p> <ul> <li>优点∶ 逻辑服用、不影响被包裹组件的内部逻辑。</li> <li>缺点∶hoc传递给被包裹组件的props容易和被包裹后的组件重名,进而被覆盖</li> </ul> <p><strong>2)适用场景</strong></p> <ul> <li>代码复用,逻辑抽象</li> <li>渲染劫持</li> <li>State 抽象和更改</li> <li>Props 更改</li> </ul> <p><strong>3)具体应用例子</strong></p> <ul> <li><strong>权限控制:</strong> 利用高阶组件的 <strong>条件渲染</strong> 特性可以对页面进行权限控制,权限控制一般分为两个维度:页面级别和 页面元素级别</li> </ul> <pre><code class="javascript">// HOC.js function withAdminAuth(WrappedComponent) { return class extends React.Component { state = { isAdmin: false, } async UNSAFE_componentWillMount() { const currentRole = await getCurrentUserRole(); this.setState({ isAdmin: currentRole === 'Admin', }); } render() { if (this.state.isAdmin) { return <WrappedComponent {...this.props} />; } else { return (<div>您没有权限查看该页面,请联系管理员!</div>); } } }; } // pages/page-a.js class PageA extends React.Component { constructor(props) { super(props); // something here... } UNSAFE_componentWillMount() { // fetching data } render() { // render page with data } } export default withAdminAuth(PageA); // pages/page-b.js class PageB extends React.Component { constructor(props) { super(props); // something here... } UNSAFE_componentWillMount() { // fetching data } render() { // render page with data } } export default withAdminAuth(PageB); </code></pre> <ul> <li><strong>组件渲染性能追踪:</strong> 借助父组件子组件生命周期规则捕获子组件的生命周期,可以方便的对某个组件的渲染时间进行记录∶</li> </ul> <pre><code class="javascript">class Home extends React.Component { render() { return (<h1>Hello World.</h1>); } } function withTiming(WrappedComponent) { return class extends WrappedComponent { constructor(props) { super(props); this.start = 0; this.end = 0; } UNSAFE_componentWillMount() { super.componentWillMount && super.componentWillMount(); this.start = Date.now(); } componentDidMount() { super.componentDidMount && super.componentDidMount(); this.end = Date.now(); console.log(`${WrappedComponent.name} 组件渲染时间为 ${this.end - this.start} ms`); } render() { return super.render(); } }; } export default withTiming(Home); </code></pre> <p>注意:withTiming 是利用 反向继承 实现的一个高阶组件,功能是计算被包裹组件(这里是 Home 组件)的渲染时间。</p> <ul> <li><strong>页面复用</strong></li> </ul> <pre><code class="javascript">const withFetching = fetching => WrappedComponent => { return class extends React.Component { state = { data: [], } async UNSAFE_componentWillMount() { const data = await fetching(); this.setState({ data, }); } render() { return <WrappedComponent data={this.state.data} {...this.props} />; } } } // pages/page-a.js export default withFetching(fetching('science-fiction'))(MovieList); // pages/page-b.js export default withFetching(fetching('action'))(MovieList); // pages/page-other.js export default withFetching(fetching('some-other-type'))(MovieList); </code></pre> <h3>React Hooks 和生命周期的关系?</h3> <p><strong>函数组件</strong> 的本质是函数,没有 state 的概念的,因此<strong>不存在生命周期</strong>一说,仅仅是一个 <strong>render 函数</strong>而已。<br>但是引入 <strong>Hooks</strong> 之后就变得不同了,它能让组件在不使用 class 的情况下拥有 state,所以就有了生命周期的概念,所谓的生命周期其实就是 <code>useState</code>、 <code>useEffect()</code> 和 <code>useLayoutEffect()</code> 。</p> <p>即:<strong>Hooks 组件(使用了Hooks的函数组件)有生命周期,而函数组件(未使用Hooks的函数组件)是没有生命周期的</strong>。</p> <p>下面是具体的 class 与 Hooks 的<strong>生命周期对应关系</strong>:</p> <ul> <li><code>constructor</code>:函数组件不需要构造函数,可以通过调用 <code>**useState 来初始化 state**</code>。如果计算的代价比较昂贵,也可以传一个函数给 <code>useState</code>。</li> </ul> <pre><code class="javascript">const [num, UpdateNum] = useState(0) </code></pre> <ul> <li><code>getDerivedStateFromProps</code>:一般情况下,我们不需要使用它,可以在<strong>渲染过程中更新 state</strong>,以达到实现 <code>getDerivedStateFromProps</code> 的目的。</li> </ul> <pre><code class="javascript">function ScrollView({row}) { let [isScrollingDown, setIsScrollingDown] = useState(false); let [prevRow, setPrevRow] = useState(null); if (row !== prevRow) { // Row 自上次渲染以来发生过改变。更新 isScrollingDown。 setIsScrollingDown(prevRow !== null && row > prevRow); setPrevRow(row); } return `Scrolling down: ${isScrollingDown}`; } </code></pre> <p>React 会立即退出第一次渲染并用更新后的 state 重新运行组件以避免耗费太多性能。</p> <ul> <li><code>shouldComponentUpdate</code>:可以用 <code>**React.memo**</code> 包裹一个组件来对它的 <code>props</code> 进行浅比较</li> </ul> <pre><code class="javascript">const Button = React.memo((props) => { // 具体的组件}); </code></pre> <p>注意:<code>**React.memo 等效于 **</code>`<strong>PureComponent</strong><code>,它只浅比较 props。这里也可以使用 </code>useMemo` 优化每一个节点。</p> <ul> <li><code>render</code>:这是函数组件体本身。</li> <li><code>componentDidMount</code>, <code>componentDidUpdate</code>: <code>useLayoutEffect</code> 与它们两的调用阶段是一样的。但是,我们推荐你<strong>一开始先用 useEffect</strong>,只有当它出问题的时候再尝试使用 <code>useLayoutEffect</code>。<code>useEffect</code> 可以表达所有这些的组合。</li> </ul> <pre><code class="javascript">// componentDidMount useEffect(()=>{ // 需要在 componentDidMount 执行的内容 }, []) useEffect(() => { // 在 componentDidMount,以及 count 更改时 componentDidUpdate 执行的内容 document.title = `You clicked ${count} times`; return () => { // 需要在 count 更改时 componentDidUpdate(先于 document.title = ... 执行,遵守先清理后更新) // 以及 componentWillUnmount 执行的内容 } // 当函数中 Cleanup 函数会按照在代码中定义的顺序先后执行,与函数本身的特性无关 }, [count]); // 仅在 count 更改时更新 </code></pre> <p><strong>请记得 React 会等待浏览器完成画面渲染之后才会延迟调用 ,因此会使得额外操作很方便</strong></p> <ul> <li><code>componentWillUnmount</code>:相当于 <code>useEffect</code> 里面返回的 <code>cleanup</code> 函数</li> </ul> <pre><code class="javascript">// componentDidMount/componentWillUnmount useEffect(()=>{ // 需要在 componentDidMount 执行的内容 return function cleanup() { // 需要在 componentWillUnmount 执行的内容 } }, []) </code></pre> <ul> <li><code>componentDidCatch</code> and <code>getDerivedStateFromError</code>:目前<strong>还没有</strong>这些方法的 Hook 等价写法,但很快会加上。</li> </ul> <table> <thead> <tr> <th><strong>class 组件</strong></th> <th><strong>Hooks 组件</strong></th> </tr> </thead> <tbody> <tr> <td>constructor</td> <td>useState</td> </tr> <tr> <td>getDerivedStateFromProps</td> <td>useState 里面 update 函数</td> </tr> <tr> <td>shouldComponentUpdate</td> <td>useMemo</td> </tr> <tr> <td>render</td> <td>函数本身</td> </tr> <tr> <td>componentDidMount</td> <td>useEffect</td> </tr> <tr> <td>componentDidUpdate</td> <td>useEffect</td> </tr> <tr> <td>componentWillUnmount</td> <td>useEffect 里面返回的函数</td> </tr> <tr> <td>componentDidCatch</td> <td>无</td> </tr> <tr> <td>getDerivedStateFromError</td> <td>无</td> </tr> </tbody> </table> <h3>React 的工作原理</h3> <p>React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时,React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变,第二步是调节(reconciliation),会用 diff 的结果来更新 DOM。</p> <h3>React中的props为什么是只读的?</h3> <p><code>this.props</code>是组件之间沟通的一个接口,原则上来讲,它只能从父组件流向子组件。React具有浓重的函数式编程的思想。</p> <p>提到函数式编程就要提一个概念:纯函数。它有几个特点:</p> <ul> <li>给定相同的输入,总是返回相同的输出。</li> <li>过程没有副作用。</li> <li>不依赖外部状态。</li> </ul> <p><code>this.props</code>就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入,页面显示的内容是一样的,并且不会产生副作用</p> <h3>React 事件机制</h3> <pre><code class="javascript"><div onClick={this.handleClick.bind(this)}>点我</div> </code></pre> <p>React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事件。</p> <p>除此之外,冒泡到document上的事件也不是原生的浏览器事件,而是由react自己实现的合成事件(SyntheticEvent)。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法,而不是调用event.stopProppagation()方法。 JSX 上写的事件并没有绑定在对应的真实 DOM 上,而是通过事件代理的方式,将所有的事件都统一绑定在了 <code>document</code> 上。这样的方式不仅减少了内存消耗,还能在组件挂载销毁时统一订阅和移除事件。</p> <p>另外冒泡到 <code>document</code> 上的事件也不是原生浏览器事件,而是 React 自己实现的合成事件(SyntheticEvent)。因此我们如果不想要事件冒泡的话,调用 <code>event.stopPropagation</code> 是无效的,而应该调用 <code>event.preventDefault</code>。</p> <p>实现合成事件的目的如下:</p> <ul> <li>合成事件首先抹平了浏览器之间的兼容问题,另外这是一个跨浏览器原生事件包装器,赋予了跨浏览器开发的能力;</li> <li>对于原生浏览器事件来说,浏览器会给监听器创建一个事件对象。如果你有很多的事件监听,那么就需要分配很多的事件对象,造成高额的内存分配问题。但是对于合成事件来说,有一个事件池专门来管理它们的创建和销毁,当事件需要被使用时,就会从池子中复用对象,事件回调结束后,就会销毁事件对象上的属性,从而便于下次复用事件对象。</li> </ul> <h3>hooks父子传值</h3> <pre><code class="javascript">父传子 在父组件中用useState声明数据 const [ data, setData ] = useState(false) 把数据传递给子组件 <Child data={data} /> 子组件接收 export default function (props) { const { data } = props console.log(data) } 子传父 子传父可以通过事件方法传值,和父传子有点类似。 在父组件中用useState声明数据 const [ data, setData ] = useState(false) 把更新数据的函数传递给子组件 <Child setData={setData} /> 子组件中触发函数更新数据,就会直接传递给父组件 export default function (props) { const { setData } = props setData(true) } 如果存在多个层级的数据传递,也可依照此方法依次传递 // 多层级用useContext const User = () => { // 直接获取,不用回调 const { user, setUser } = useContext(UserContext); return <Avatar user={user} setUser={setUser} />; };</code></pre> <h3>高阶组件存在的问题</h3> <ul> <li>静态方法丢失(必须将静态方法做拷贝)</li> <li><code>refs</code> 属性不能透传(如果你向一个由高阶组件创建的组件的元素添加<code>ref</code>引用,那么<code>ref</code>指向的是最外层容器组件实例的,而不是被包裹的<code>WrappedComponent</code>组件。)</li> <li>反向继承不能保证完整的子组件树被解析 <br>React 组件有两种形式,分别是 class 类型和 function 类型(无状态组件)。</li> </ul> <p>我们知道反向继承的渲染劫持可以控制 <code>WrappedComponent</code> 的渲染过程,也就是说这个过程中我们可以对 <code>elements tree</code>、 <code>state</code>、 <code>props</code> 或 <code>render()</code> 的结果做各种操作。</p> <p>但是如果渲染 <code>elements tree</code> 中包含了 function 类型的组件的话,这时候就不能操作组件的子组件了。</p> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1612263175359594496"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(react.js)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1830646621059248128.htm" title="react.js" target="_blank">react.js</a> <span class="text-muted">涔溪</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>一、create-react-app全局安装create-react-app$npminstall-gcreate-react-app创建一个项目$create-react-appyour-app注意命名方式CreatinganewReactappin/dir/your-app.Installingpackages.Thismighttakeacoupleofminutes.安装过程较慢,Inst</div> </li> <li><a href="/article/1828080032459878400.htm" title="React.js如何使用Bootstrap" target="_blank">React.js如何使用Bootstrap</a> <span class="text-muted">Vesper63</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在React.js项目中使用Bootstrap有多种方法,主要包括直接引入BootstrapCSS文件和使用ReactBootstrap库。下面将详细介绍这两种方法。方法一:直接引入BootstrapCSS文件这是最简单的方式,只需在项目中引入Bootstrap的CSS文件即可。安装Bootstrap:你可以通过npm或yarn安装Bootstrap:npminstallbootstrap或者:y</div> </li> <li><a href="/article/1759950762793857024.htm" title="react起源" target="_blank">react起源</a> <span class="text-muted">lemmo</span> <div>简介React(有时叫React.js或ReactJS),是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件("dataflowsdown")的模型,数据改变时对HTML文档的有效更新,和现代单页应用中组件之间干净的分离。它由Facebook、Instagra</div> </li> <li><a href="/article/1759892840671965184.htm" title="2024前端面试准备之uniapp篇" target="_blank">2024前端面试准备之uniapp篇</a> <span class="text-muted">前端fighter</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>全文链接!!!!!!!1.UniApp和其他跨平台框架(如ReactNative、Flutter)有什么区别?语言和技术栈:UniApp使用Vue.js作为开发语言和技术栈,而ReactNative使用React.js,Flutter使用Dart语言。开发者可以根据自己的技术背景和偏好选择合适的框架。性能和体验:UniApp的性能和用户体验相对较好,因为它使用原生渲染技术,可以实现更接近原生应用的</div> </li> <li><a href="/article/1759629324341833728.htm" title="快速创建react项目." target="_blank">快速创建react项目.</a> <span class="text-muted">River_tong</span> <div>react简介说起react,我相信大家都对它有一定的了解,react目前是前端界非常流行的一个框架了,react它产生了很多相关的技术,比如:我们常说的react.js,我们可以用react语法来编写一些网页版应用,reactnative这门技术使得我们可以用react语法来编写原生应用,reactVR可以借助react的语法来编写一些VR相关的应用或者说全景视图这样的应用。react开发环境搭</div> </li> <li><a href="/article/1759403284218589184.htm" title="Vue前端】vue使用笔记0基础到高手第2篇:Vue进阶知识点介绍(附代码,已分享)" target="_blank">Vue前端】vue使用笔记0基础到高手第2篇:Vue进阶知识点介绍(附代码,已分享)</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/vim%E5%89%8D%E7%AB%AF/1.htm">vim前端</a> <div>本系列文章md笔记(已分享)主要讨论vue相关知识。Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。Vue.js是一个构建数据驱动的web界面的渐进式框架,Vue.js的目标是通过尽可能简单的API实</div> </li> <li><a href="/article/1759401029595639808.htm" title="Vue 与 React 比较,十年恩怨情仇整理" target="_blank">Vue 与 React 比较,十年恩怨情仇整理</a> <span class="text-muted"></span> <div>过去的十年里,出现了许多令人兴奋的前端技术。其中,最为亮眼的当属Vue.js和React.js,他们一经出世就备受前端开发者的欢迎,当然,流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始,回顾这两位在开发者们眼中的明星框架,十年间都发生了哪些变化。本文不只是技术的对比分析,更是对那些年我们一起追过的框架的致敬。让我们从头再来一次,感受V</div> </li> <li><a href="/article/1757098127510224896.htm" title="什么是VUE?" target="_blank">什么是VUE?</a> <span class="text-muted">最爱喝龙井</span> <div>什么是Vue.jsVue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js是前端的主流框架之一,和Angular.js、React.js一起,并成为前端三大主流框架!Vue.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整</div> </li> <li><a href="/article/1756897967672934400.htm" title="常见的web前端开发框架:Bootstrap" target="_blank">常见的web前端开发框架:Bootstrap</a> <span class="text-muted">钟念</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势,开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时,随着技术的不断发展,新的框架和工具也会不断涌现,为Web前端开发带来更多的选择和可能性。下面将对Bootstrap框架进行简要介绍,包括它们的特点、使用方法和一些示例代码。Bootstrap基本概念:Bo</div> </li> <li><a href="/article/1756897968931225600.htm" title="常见的web前端开发框架:Vue.js" target="_blank">常见的web前端开发框架:Vue.js</a> <span class="text-muted">钟念</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势,开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时,随着技术的不断发展,新的框架和工具也会不断涌现,为Web前端开发带来更多的选择和可能性。下面将对Vue.js框架进行简要介绍,包括它们的特点、使用方法和一些示例代码。Vue.js基本概念:Vue.js是一</div> </li> <li><a href="/article/1756897969937858560.htm" title="常见的web前端开发框架:React.js" target="_blank">常见的web前端开发框架:React.js</a> <span class="text-muted">钟念</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势,开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时,随着技术的不断发展,新的框架和工具也会不断涌现,为Web前端开发带来更多的选择和可能性。下面将对React.js框架进行简要介绍,包括它们的特点、使用方法和一些示例代码。React.jsReact.js是</div> </li> <li><a href="/article/1756897837745979392.htm" title="常见的web前端开发框架:Angular.js" target="_blank">常见的web前端开发框架:Angular.js</a> <span class="text-muted">钟念</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势,开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时,随着技术的不断发展,新的框架和工具也会不断涌现,为Web前端开发带来更多的选择和可能性。下面将对Angular.js框架进行简要介绍,包括它们的特点、使用方法和一些示例代码。Angular.js基本概念:</div> </li> <li><a href="/article/1756617175155621888.htm" title="Vue 与 React 比较,十年恩怨情仇整理" target="_blank">Vue 与 React 比较,十年恩怨情仇整理</a> <span class="text-muted"></span> <div>过去的十年里,出现了许多令人兴奋的前端技术。其中,最为亮眼的当属Vue.js和React.js,他们一经出世就备受前端开发者的欢迎,当然,流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始,回顾这两位在开发者们眼中的明星框架,十年间都发生了哪些变化。本文不只是技术的对比分析,更是对那些年我们一起追过的框架的致敬。让我们从头再来一次,感受V</div> </li> <li><a href="/article/1755191676357328896.htm" title="新书速览 | React.js+Node.js+MongoDB企业级全栈开发实践" target="_blank">新书速览 | React.js+Node.js+MongoDB企业级全栈开发实践</a> <span class="text-muted">全栈开发圈</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>详解React.js全家桶及其结合Node.js、MongoDB进行全栈开发的方法实战企业级应用系统项目开发本书内容本书系统介绍Web应用全栈开发技术,通过一个真实的企业项目,讲解如何使用React全家桶以及Node.js、MongoDB进行全栈开发,帮助开发人员快速积累开发经验,全面掌握开发技巧。读完本书相当于真实参与一个完整的全栈项目开发。本书配套示例项目源代码。本书共分27章,内容包括开发环</div> </li> <li><a href="/article/1754735265894645760.htm" title="React 与 Angular:项目的最佳框架" target="_blank">React 与 Angular:项目的最佳框架</a> <span class="text-muted">千源万码</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>什么是React?React或React.js是一个基于JavaScript的前端库,可帮助创建用户界面(UI)。它以声明式编程风格描绘UI状态。通过React,程序员可以掌握应用程序在开发后将如何呈现给用户以及他们将如何与用户交互。尽管React以开发Web应用程序而闻名,但它也有助于构建移动应用程序和本机呈现的应用程序。Facebook、Instagram、Netflix和纽约时报等全球公司在</div> </li> <li><a href="/article/1754340238215364608.htm" title="web 技术栈有哪些?" target="_blank">web 技术栈有哪些?</a> <span class="text-muted">老马啸西风</span> <a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端技术栈:HTML(超文本标记语言):用于创建网页结构的标记语言,定义页面的内容和结构。CSS(层叠样式表):用于设计和排版网页的样式表语言,负责页面的外观和样式。JavaScript:一种脚本语言,用于在浏览器中实现动态交互和客户端逻辑。常用的前端框架和库如React、Vue、Angular等,可以加速开发。前端框架和库:React.js、Vue.js、Angular等,用于简化和加速前端开发</div> </li> <li><a href="/article/1754304108208078848.htm" title="DataBinding使用详解-Google官方的视图绑定" target="_blank">DataBinding使用详解-Google官方的视图绑定</a> <span class="text-muted">ZhangQiang-</span> <a class="tag" taget="_blank" href="/search/%5BAndroid%E8%BF%9B%E9%98%B6%5D/1.htm">[Android进阶]</a> <div>几年前,数据绑定在便已在前端界风生水起,Angular.js、React.js、vue.js等热门前端框架都具备这种能力。Android端的开源库butterknife/Anotation/dragger2等等也非常好用且广受支持;数据绑定简单来说,就是通过某种机制,把代码中的数据和xml(UI)绑定起来,双方都能对数据进行操作,并且在数据发生变化的时候,自动刷新数据。在2015年的谷歌IO大会上</div> </li> <li><a href="/article/1754135698736168960.htm" title="LLM应用开发与落地:使用gradio十分钟搭建聊天UI" target="_blank">LLM应用开发与落地:使用gradio十分钟搭建聊天UI</a> <span class="text-muted">前行的七哥</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>一、背景如果你是做LLM应用开发的,特别是做后端开发,你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中,毕竟react.js,next.js,css,html也不是每个人都那么熟练,对吧?即使你是做前端开发的,你也可以尝试一下Gradio,哪天有人给你提了一个调试界面的需求,原本要半天的工作现在只需要十分钟了,多余的时机用来学习或享受生活,多美(或</div> </li> <li><a href="/article/1753035361233158144.htm" title="通过 React 来构建界面" target="_blank">通过 React 来构建界面</a> <span class="text-muted">张培跃吧</span> <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1-通过React来构建界面第1步:下载所需要的二个库文件至本地,如果需要加载指定版本的react和react-dom,可以把18替换成所需加载的版本号。react.js:React中的核心库文件。//开发版https://unpkg.com/react@18/umd/react.development.js//生产版https://unpkg.com/react@18/umd/react.pro</div> </li> <li><a href="/article/1752156807041662976.htm" title="如何在 React 中使用 Sass" target="_blank">如何在 React 中使用 Sass</a> <span class="text-muted">网络研究院</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%A0%94%E7%A9%B6%E9%99%A2/1.htm">网络研究院</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a> <div>Sass(语法很棒的样式表)是CSS的扩展,具有使其更强大的附加功能。Sass最好的一点是它与CSS的兼容性,这意味着您可以在Web开发项目中使用React等JavaScript框架。然而,与普通CSS不同,您需要进行一些设置才能使用Sass。通过设置一个简单的React.js项目并将Sass与其集成来了解其工作原理。如何在React.js项目中使用Sass与其他CSS处理器一样,React本身并</div> </li> <li><a href="/article/1751983156120010752.htm" title="js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客,从入门到吃鸡" target="_blank">js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客,从入门到吃鸡</a> <span class="text-muted">weixin_39610774</span> <a class="tag" taget="_blank" href="/search/js%E8%8E%B7%E5%8F%96%E4%BB%8A%E5%A4%A9%E5%89%A9%E4%BD%99%E6%97%B6%E9%97%B4/1.htm">js获取今天剩余时间</a><a class="tag" taget="_blank" href="/search/%E7%94%A8/1.htm">用</a><a class="tag" taget="_blank" href="/search/js%E5%88%A4%E6%96%AD/1.htm">js判断</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E4%B8%AA%E6%95%B0%E6%98%AF%E5%90%A6%E6%98%AF%E7%B4%A0%E6%95%B0%28%E8%B4%A8%E6%95%B0%29/1.htm">一个数是否是素数(质数)</a> <div>React.js是现今前端最火的应用框架之一,而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上,现在所有的前端主流形式,从服务端渲染APP,静态站到桌面应用等,Next.js都能胜任。不论是国内还是国外,都有不少开发者和企业在使用Next.js开发网站,比如:腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网</div> </li> <li><a href="/article/1751982897977376768.htm" title="前端教程丨手把手教你用 Next.js 搭建个人博客,从入门到吃鸡" target="_blank">前端教程丨手把手教你用 Next.js 搭建个人博客,从入门到吃鸡</a> <span class="text-muted">蓝桥云课</span> <a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</a> <div>React.js是现今前端最火的应用框架之一,而**Next.js正是React.js领域最优秀的服务端渲染框架之一。**基本上,现在所有的前端主流形式,从服务端渲染APP,静态站到桌面应用等,Next.js都能胜任。不论是国内还是国外,都有不少开发者和企业在使用Next.js开发网站,比如:腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI</div> </li> <li><a href="/article/1751982513158373376.htm" title="【前端教程】手把手教你用 Next.js 搭建个人博客,从入门到吃鸡!" target="_blank">【前端教程】手把手教你用 Next.js 搭建个人博客,从入门到吃鸡!</a> <span class="text-muted">实验楼v</span> <div>React.js是现今前端最火的应用框架之一,而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上,现在所有的前端主流形式,从服务端渲染APP,静态站到桌面应用等,Next.js都能胜任。不论是国内还是国外,都有不少开发者和企业在使用Next.js开发网站,比如:腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网</div> </li> <li><a href="/article/1750115808266174464.htm" title="React-9:通过路由实现排序切换" target="_blank">React-9:通过路由实现排序切换</a> <span class="text-muted">kino2046</span> <div>queryString(查询字符串)通常我们把URL`?`后面的内容称为queryString,在React.js中,我们可以通过`this.props.location.search`来获取,它的值是字符串,格式为:?k1=v1&k2=v2,为了方便操作,我们把它转成对象形式URLSearchParams在原生JJavaScript中内置了一个URLSearchParams的类,我们通过它可以很</div> </li> <li><a href="/article/1749663567096856576.htm" title="构建高效外卖系统:技术实践与代码示例" target="_blank">构建高效外卖系统:技术实践与代码示例</a> <span class="text-muted">万岳科技系统开发</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>外卖系统在现代社会中扮演着重要的角色,为用户提供了便捷的用餐解决方案。在这篇文章中,我们将探讨构建高效外卖系统的技术实践,同时提供一些基础的代码示例,帮助开发者更好地理解和应用这些技术。1.技术栈选择构建外卖系统首先需要选择合适的技术栈。以下是一个简单的技术栈示例:前端:React.js后端:Node.js数据库:MongoDB实时通信:WebSocket云服务:AWS或Azure2.用户认证与授</div> </li> <li><a href="/article/1749324305847566336.htm" title="React.js快速入门教程" target="_blank">React.js快速入门教程</a> <span class="text-muted">heiyay</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>介绍React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序(SPA),可以轻松地创建交互性强、快速响应的用户界面。React.js的特点1.声明式设计−React采用声明范式,可以轻松描述应用。2.高效−React通过对DOM的模拟,最大限度地减少与DOM的交互。3.灵活−React可以与已知的库或框架很好地配合。4.JSX−JSX是J</div> </li> <li><a href="/article/1747414643418087424.htm" title="useRef钩子大法好!" target="_blank">useRef钩子大法好!</a> <span class="text-muted">今天也想MK代码</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在React.js中,useRef是一个钩子,允许你创建一个对元素或值的可变引用。与useState钩子不同,更新useRef不会触发组件的重新渲染。它通常用于直接访问和管理DOM元素,存储持久值,或处理不应触发重新渲染的值。useRef的基本语法如下:constrefContainer=useRef(initialValue);useRef的主要用途1.访问DOM元素useRef的一个最常见的用</div> </li> <li><a href="/article/1746103789431046144.htm" title="Vue.js 学习Day1" target="_blank">Vue.js 学习Day1</a> <span class="text-muted">cf6d95617c55</span> <div>Vue.js-Day1课程介绍前5天:都在学习Vue基本的语法和概念;打包工具Webpack,Gulp后5天:以项目驱动教学;什么是Vue.jsVue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js是前端的主流框架之一,和Angular.js、React.js</div> </li> <li><a href="/article/1745787485834723328.htm" title="【React.js 06】Redux基础知识" target="_blank">【React.js 06】Redux基础知识</a> <span class="text-muted">IUVO</span> <div>Redux是一个专注于状态管理的库,和React是解耦的,用Angular和Vue都可以使用Redux。其具有一个单一状态,单向数据流的特性。Redux概念redux有一个store,记录所有的state,state要改变的时候,就通知dispatch去执行action,reducer拿到state和action去生成新的state,store.subscribe根据新的state重新渲染出改变后</div> </li> <li><a href="/article/1744937354797268992.htm" title="前端八股文系列(七) React 面试专题" target="_blank">前端八股文系列(七) React 面试专题</a> <span class="text-muted">微莱羽墨</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>文章目录React面试专题React.js是MVVM框架吗?hooks用过吗?聊聊react中class组件和函数组件的区别React组件通信方式1)父组件向子组件通信2)子组件向父组件通信3)跨级组件通信4)非嵌套关系的组件通信setState既存在异步情况也存在同步情况生命周期说一下react-fiber1)背景2)实现原理Portals何时要使用异步组件?如和使用异步组件React事件绑定原</div> </li> <li><a href="/article/72.htm" title="Java开发中,spring mvc 的线程怎么调用?" target="_blank">Java开发中,spring mvc 的线程怎么调用?</a> <span class="text-muted">小麦麦子</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>今天逛知乎,看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题,觉得挺有意思的,那哥们儿问的也听仔细,下面的回答也很详尽,分享出来,希望遇对遇到类似问题的Java开发程序猿有所帮助。 问题:     在用spring mvc架构的网站上,设一线程在虚拟机启动时运行,线程里有一全局</div> </li> <li><a href="/article/199.htm" title="maven依赖范围" target="_blank">maven依赖范围</a> <span class="text-muted">bitcarter</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>1.test 测试的时候才会依赖,编译和打包不依赖,如junit不被打包 2.compile 只有编译和打包时才会依赖 3.provided 编译和测试的时候依赖,打包不依赖,如:tomcat的一些公用jar包 4.runtime 运行时依赖,编译不依赖 5.默认compile 依赖范围compile是支持传递的,test不支持传递 1.传递的意思是项目A,引用</div> </li> <li><a href="/article/326.htm" title="Jaxb org.xml.sax.saxparseexception : premature end of file" target="_blank">Jaxb org.xml.sax.saxparseexception : premature end of file</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/premature/1.htm">premature</a><a class="tag" taget="_blank" href="/search/JAXB/1.htm">JAXB</a> <div>如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误: org.xml.sax.saxparseexception : premature end of file 很有可能时你直接读取文件为inputstream,然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In</div> </li> <li><a href="/article/453.htm" title="CSS Specificity" target="_blank">CSS Specificity</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E6%9D%83%E9%87%8D/1.htm">权重</a><a class="tag" taget="_blank" href="/search/Specificity/1.htm">Specificity</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>  有时候对于页面元素设置了样式,可为什么页面的显示没有匹配上呢? because specificity CSS 的选择符是有权重的,当不同的选择符的样式设置有冲突时,浏览器会采用权重高的选择符设置的样式。     规则:   HTML标签的权重是1 Class 的权重是10 Id 的权重是100 </div> </li> <li><a href="/article/580.htm" title="java与servlet" target="_blank">java与servlet</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>servlet 搞java web开发的人一定不会陌生,而且大家还会时常用到它。 下面是java官方网站上对servlet的介绍: java官网对于servlet的解释 写道 Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha</div> </li> <li><a href="/article/707.htm" title="eclipse中安装maven插件" target="_blank">eclipse中安装maven插件</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>1.首先去官网下载 Maven: http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 下载完成之后将其解压, 我将解压后的文件夹:apache-maven-3.2.3, 并将它放在 D:\tools目录下, 即 maven 最终的路径是:D:\tools\apache-mave</div> </li> <li><a href="/article/834.htm" title="jpa@OneToOne关联关系" target="_blank">jpa@OneToOne关联关系</a> <span class="text-muted">布衣凌宇</span> <a class="tag" taget="_blank" href="/search/jpa/1.htm">jpa</a> <div>Nruser里的pruserid关联到Pruser的主键id,实现对一个表的增删改,另一个表的数据随之增删改。 Nruser实体类 //***************************************************************** @Entity @Table(name="nruser") @DynamicInsert @Dynam</div> </li> <li><a href="/article/961.htm" title="我的spring学习笔记11-Spring中关于声明式事务的配置" target="_blank">我的spring学习笔记11-Spring中关于声明式事务的配置</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE/1.htm">配置</a> <div>这两天学到事务管理这一块,结合到之前的terasoluna框架,觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容,对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种,我承认后两种的内容很好,很强大。但是实际的项目当中</div> </li> <li><a href="/article/1088.htm" title="java 动态代理简单实现" target="_blank">java 动态代理简单实现</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/handler/1.htm">handler</a><a class="tag" taget="_blank" href="/search/proxy/1.htm">proxy</a><a class="tag" taget="_blank" href="/search/dynamic/1.htm">dynamic</a><a class="tag" taget="_blank" href="/search/service/1.htm">service</a> <div>dynamicproxy.service.HelloService package dynamicproxy.service; public interface HelloService { public void sayHello(); }   dynamicproxy.service.impl.HelloServiceImpl package dynamicp</div> </li> <li><a href="/article/1215.htm" title="JDBC连接数据库" target="_blank">JDBC连接数据库</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JDBC%E7%BC%96%E7%A8%8B/1.htm">JDBC编程</a><a class="tag" taget="_blank" href="/search/JAVA%E6%93%8D%E4%BD%9Coracle%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">JAVA操作oracle数据库</a> <div>         如果我们要想连接oracle公司的数据库,就要首先下载oralce公司的驱动程序,将这个驱动程序的jar包导入到我们工程中;   JDBC链接数据库的代码和固定写法;     1,加载oracle数据库的驱动;     &nb</div> </li> <li><a href="/article/1342.htm" title="单例模式中的多线程分析" target="_blank">单例模式中的多线程分析</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>谈到单例模式,我们立马会想到饿汉式和懒汉式加载,所谓饿汉式就是在创建类时就创建好了实例,懒汉式在获取实例时才去创建实例,即延迟加载。 饿汉式: package com.bijian.study; public class Singleton { private Singleton() { } // 注意这是private 只供内部调用 private static</div> </li> <li><a href="/article/1469.htm" title="javascript读取和修改原型特别需要注意原型的读写不具有对等性" target="_blank">javascript读取和修改原型特别需要注意原型的读写不具有对等性</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/prototype/1.htm">prototype</a> <div>        对于从原型对象继承而来的成员,其读和写具有内在的不对等性。比如有一个对象A,假设它的原型对象是B,B的原型对象是null。如果我们需要读取A对象的name属性值,那么JS会优先在A中查找,如果找到了name属性那么就返回;如果A中没有name属性,那么就到原型B中查找name,如果找到了就返回;如果原型B中也没有</div> </li> <li><a href="/article/1596.htm" title="【持久化框架MyBatis3六】MyBatis3集成第三方DataSource" target="_blank">【持久化框架MyBatis3六】MyBatis3集成第三方DataSource</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/dataSource/1.htm">dataSource</a> <div>MyBatis内置了数据源的支持,如:   <environments default="development"> <environment id="development"> <transactionManager type="JDBC" /> <data</div> </li> <li><a href="/article/1723.htm" title="我程序中用到的urldecode和base64decode,MD5" target="_blank">我程序中用到的urldecode和base64decode,MD5</a> <span class="text-muted">bitcarter</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/MD5/1.htm">MD5</a><a class="tag" taget="_blank" href="/search/base64decode/1.htm">base64decode</a><a class="tag" taget="_blank" href="/search/urldecode/1.htm">urldecode</a> <div>这里是base64decode和urldecode,Md5在附件中。因为我是在后台所以需要解码: string Base64Decode(const char* Data,int DataByte,int& OutByte) { //解码表 const char DecodeTable[] = { 0, 0, 0, 0, 0, 0</div> </li> <li><a href="/article/1850.htm" title="腾讯资深运维专家周小军:QQ与微信架构的惊天秘密" target="_blank">腾讯资深运维专家周小军:QQ与微信架构的惊天秘密</a> <span class="text-muted">ronin47</span> <div>社交领域一直是互联网创业的大热门,从PC到移动端,从OICQ、MSN到QQ。到了移动互联网时代,社交领域应用开始彻底爆发,直奔黄金期。腾讯在过去几年里,社交平台更是火到爆,QQ和微信坐拥几亿的粉丝,QQ空间和朋友圈各种刷屏,写心得,晒照片,秀视频,那么谁来为企鹅保驾护航呢?支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢?本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心</div> </li> <li><a href="/article/1977.htm" title="java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个排好序的数组的一个旋转,输出旋转数组的最小元素" target="_blank">java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个排好序的数组的一个旋转,输出旋转数组的最小元素</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class MinOfShiftedArray { /** * Q69 旋转数组的最小元素 * 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个排好序的数组的一个旋转,输出旋转数组的最小元素。 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转,该数组的最小值为1。 */ publ</div> </li> <li><a href="/article/2104.htm" title="看博客,应该是有方向的" target="_blank">看博客,应该是有方向的</a> <span class="text-muted">Cb123456</span> <a class="tag" taget="_blank" href="/search/%E5%8F%8D%E7%9C%81/1.htm">反省</a><a class="tag" taget="_blank" href="/search/%E7%9C%8B%E5%8D%9A%E5%AE%A2/1.htm">看博客</a> <div>看博客,应该是有方向的:  我现在就复习以前的,在补补以前不会的,现在还不会的,同时完善完善项目,也看看别人的博客.  我刚突然想到的:  1.应该看计算机组成原理,数据结构,一些算法,还有关于android,java的。  2.对于我,也快大四了,看一些职业规划的,以及一些学习的经验,看看别人的工作总结的.    为什么要写</div> </li> <li><a href="/article/2231.htm" title="[开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖" target="_blank">[开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/1.htm">开源项目</a> <div>      为什么这样说呢?  因为科学和技术的发展有时候需要一个平缓和长期的积累过程,但是行政和商业体系本身充满各种不稳定性和不确定性,如果你希望长期从事某个科研项目,但是却又必须依赖于某种行政和商业体系,那其中的过程必定充满各种风险。。。       所以,为避免这种不确定性风险,我</div> </li> <li><a href="/article/2358.htm" title="一个 sql优化 ([精华] 一个查询优化的分析调整全过程!很值得一看 )" target="_blank">一个 sql优化 ([精华] 一个查询优化的分析调整全过程!很值得一看 )</a> <span class="text-muted">cwqcwqmax9</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 Web翻页优化实例 提交时间: 2004-6-18 15:37:49      回复    发消息  环境: Linux ve</div> </li> <li><a href="/article/2485.htm" title="Hibernat and Ibatis" target="_blank">Hibernat and Ibatis</a> <span class="text-muted">dashuaifu</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a> <div>Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架,当前版本是3.05。它出身于sf.net,现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架,当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言,iBATIS 是一种“Sql Mappi</div> </li> <li><a href="/article/2612.htm" title="备份MYSQL脚本" target="_blank">备份MYSQL脚本</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>#!/bin/sh # this shell to backup mysql #1413161683@qq.com (QQ:1413161683 DuChengJiu) _dbDir=/var/lib/mysql/ _today=`date +%w` _bakDir=/usr/backup/$_today [ ! -d $_bakDir ] && mkdir -p </div> </li> <li><a href="/article/2739.htm" title="iOS第三方开源库的吐槽和备忘" target="_blank">iOS第三方开源库的吐槽和备忘</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a> <div>转自 ibireme的博客   做iOS开发总会接触到一些第三方库,这里整理一下,做一些吐槽。   目前比较活跃的社区仍旧是Github,除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流,这里主要介绍一下Github里面流行的iOS库。   首先整理了一份 Github上排名靠</div> </li> <li><a href="/article/2866.htm" title="html wlwmanifest.xml" target="_blank">html wlwmanifest.xml</a> <span class="text-muted">eoems</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>所谓优化wp_head()就是把从wp_head中移除不需要元素,同时也可以加快速度。 步骤: 加入到function.php remove_action('wp_head', 'wp_generator'); //wp-generator移除wordpress的版本号,本身blog的版本号没什么意义,但是如果让恶意玩家看到,可能会用官网公布的漏洞攻击blog remov</div> </li> <li><a href="/article/2993.htm" title="浅谈Java定时器发展" target="_blank">浅谈Java定时器发展</a> <span class="text-muted">hacksin</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a> <div>java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor,从后者的表现来看,可以考虑完全替代Timer了。 Timer与ScheduleThreadPoolExecutor对比: 1.    Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列</div> </li> <li><a href="/article/3120.htm" title="移动端页面侧边导航滑入效果" target="_blank">移动端页面侧边导航滑入效果</a> <span class="text-muted">ini</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascirpt/1.htm">javascirpt</a> <div>效果体验:http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js,该版本的jQuery库是用于支持HTML5的浏览器上,不再兼容IE8以前的浏览器,现在移动端浏览器一般都支持HTML5,所以使用该jQuery没问题。HTML文件代码: <!DOCTYPE html> <h</div> </li> <li><a href="/article/3247.htm" title="AspectJ+Javasist记录日志" target="_blank">AspectJ+Javasist记录日志</a> <span class="text-muted">kane_xie</span> <a class="tag" taget="_blank" href="/search/aspectj/1.htm">aspectj</a><a class="tag" taget="_blank" href="/search/javasist/1.htm">javasist</a> <div>在项目中碰到这样一个需求,对一个服务类的每一个方法,在方法开始和结束的时候分别记录一条日志,内容包括方法名,参数名+参数值以及方法执行的时间。   @Override public String get(String key) { // long start = System.currentTimeMillis(); // System.out.println("Be</div> </li> <li><a href="/article/3374.htm" title="redis学习笔记" target="_blank">redis学习笔记</a> <span class="text-muted">MJC410621</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a> <div>1)nosql数据库主要由以下特点:非关系型的、分布式的、开源的、水平可扩展的。 1,处理超大量的数据 2,运行在便宜的PC服务器集群上, 3,击碎了性能瓶颈。 1)对数据高并发读写。 2)对海量数据的高效率存储和访问。 3)对数据的高扩展性和高可用性。 redis支持的类型: Sring 类型 set name lijie get name lijie set na</div> </li> <li><a href="/article/3501.htm" title="使用redis实现分布式锁" target="_blank">使用redis实现分布式锁</a> <span class="text-muted">qifeifei</span> <div>在多节点的系统中,如何实现分布式锁机制,其中用redis来实现是很好的方法之一,我们先来看一下jedis包中,有个类名BinaryJedis,它有个方法如下:   public Long setnx(final byte[] key, final byte[] value) { checkIsInMulti(); client.setnx(key, value); ret</div> </li> <li><a href="/article/3628.htm" title="BI并非万能,中层业务管理报表要另辟蹊径" target="_blank">BI并非万能,中层业务管理报表要另辟蹊径</a> <span class="text-muted">张老师的菜</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/BI/1.htm">BI</a><a class="tag" taget="_blank" href="/search/%E5%95%86%E4%B8%9A%E6%99%BA%E8%83%BD/1.htm">商业智能</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8C%96/1.htm">信息化</a> <div>       BI是商业智能的缩写,是可以帮助企业做出明智的业务经营决策的工具,其数据来源于各个业务系统,如ERP、CRM、SCM、进销存、HER、OA等。        BI系统不同于传统的管理信息系统,他号称是一个整体应用的解决方案,是融入管理思想的强大系统:有着系统整体的设计思想,支持对所有</div> </li> <li><a href="/article/3755.htm" title="安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题" target="_blank">安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题</a> <span class="text-muted">wudixiaotie</span> <a class="tag" taget="_blank" href="/search/function/1.htm">function</a> <div>1.在~/.bashrc最后加入 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  2.重新启动terminal输入:   rvm use ruby-2.2.1 --default  把当前安装的ruby版本设为默</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>