ルーティングから始まるreact-router 4.0ソースコードの深い理解

不言
リリース: 2018-09-18 14:35:51
オリジナル
2025 人が閲覧しました

この記事では、ルーティングから始まる React-router 4.0 のソース コードについて詳しく説明します。必要な方は参考にしていただければ幸いです。

react-router などのフロントエンドルーティングの原理はほぼ同じで、更新せずに別のページの表示に切り替えることができます。ルーティングの本質は、ページの URL が変更された場合、ページの表示結果は URL の変更に応じて変更される可能性がありますが、ページは更新されないことです。シングル ページ (SPA) アプリケーションは、フロントエンド ルーティングを通じて実装できます。この記事では、まずフロントエンド ルーティングの原理から始めて、フロントエンド ルーティングの原理の変更について詳しく紹介します。次に、react-router4.0 のソース コードから始めて、react-router4.0 がフロントエンド ルーティングを実装する方法を深く理解します。

  • ハッシュによるフロントエンド ルーティング

  • H5 履歴によるフロントエンド ルーティング

  • React - router4.0

  • React-router4.0 のソース コード分析の使用

1. Hash によるフロントエンド ルーティングの実装

1 、ハッシュの原則

初期のフロントエンド ルーティングはハッシュによって実装されました:

URL のハッシュ値を変更してもページは更新されません。

したがって、フロントエンド ルーティングはハッシュを通じて実装でき、それによってリフレッシュ不要の効果が実現します。ハッシュ属性は location オブジェクト内にあり、

window.location.hash='edit'
ログイン後にコピー
を使用して現在の URL のハッシュ値を変更できます。上記のハッシュ割り当てを実行すると、ページの URL が変わります。

割り当て前: http://localhost:3000

割り当て後: http://localhost:3000/#edit

# で終わるハッシュ値がさらにあります。ただし、割り当ての前後でページのハッシュ値が変化するため、ページの完全な URL は変更されますが、ページは更新されません。また、hashchange というハッシュの変化を監視できるイベントがあり、次の 2 つの方法でハッシュの変化を監視できます。

window.onhashchange=function(event){
   console.log(event);
}
window.addEventListener('hashchange',function(event){
   console.log(event);
})
ログイン後にコピー
ハッシュ値が変化すると、HashChangeEvent が出力されます。 HashChangeEvent の具体的な値は次のとおりです。

{isTrusted: true, oldURL: "http://localhost:3000/", newURL:   "http://localhost:3000/#teg", type: "hashchange".....}
ログイン後にコピー
リスニング イベントがあり、変更されたハッシュ ページが更新されない場合、リスニング イベントのコールバック関数でさまざまな UI 表示を表示および非表示にする機能を実行できます。したがって、フロントエンドルーティングを実装します。

さらに、現在のページのハッシュ値を変更するには、window.location.hash を使用する以外に、html の a タグを使用することもできます:

<a href="#edit">edit</a>
ログイン後にコピー
2 の欠点。 hash

ハッシュは互換性が高いため、初期のフロントエンドルーティングで広く使用されましたが、ハッシュの使用には多くの欠点もあります。

  • 検索エンジンはハッシュを含むページには不向きです

  • ハッシュを含むページでのユーザーの行動を追跡するのは困難です

2. 履歴によるフロントエンド ルーティングの実装

HTML5 の History インターフェイスである History オブジェクトは最下位インターフェイスであり、どのインターフェイスからも継承されません。 History インターフェースを使用すると、ブラウザーのセッション履歴を操作できます。

(1)History のプロパティとメソッド

History にはいくつかのプロパティとメソッドが用意されています。

履歴属性:

  • History.length: 現在のセッション ページを含む、セッション履歴に存在するレコードの数を返します。さらに、新しいタブを開いた場合、長さの値は 1

  • History.state:

保存されている場合、popState イベントメソッド、渡される属性オブジェクト (pushState メソッドと replaceState メソッドで詳しく説明します)

History メソッド:

  • History.back() : ブラウジングに戻る ブラウザ セッション履歴の前のページには、ブラウザの戻るボタンと同じ機能があります。

  • History.forward(): ブラウザ セッション履歴の次のページを指します。ブラウザの「戻る」ボタンと同じです。「進む」ボタンも同じです。

  • History.go(): ブラウザのセッション履歴の指定したレコードページにジャンプできます。

  • History.pushState(): PushState は、指定されたデータをブラウザーのセッション履歴スタックにプッシュできます。このメソッドは、オブジェクト、タイトル、および URL の文字列の 3 つのパラメーターを受け取ります。 PushState の後、現在のページの URL は変更されますが、更新は伴いません。

  • History.replaceState():replaceState は、現在のセッション ページの URL を次の URL に置き換えます。 replaceState の後、現在のページの URL も変更されますが、ページは更新されません。

上記のメソッドでは、pushState と repalce は同じ点を持っています。

どちらも現在のページに表示される URL を変更しますが、ページは更新されません。

違い:

pushState はブラウザのセッション履歴スタックにプッシュされ、これにより History.length が 1 増加しますが、replaceState は Replace です。現在のセッション履歴なので、 History.length.

(2) ブラウザの BOM オブジェクト モデル内の BOM オブジェクト履歴

history は、完全に増加しません。 History インターフェイスを継承しているため、History のすべてのプロパティとメソッドが含まれています。

ここでは主に、history.length プロパティと、history.pushState およびhistory.replaceState メソッドについて説明します。

  • history.pushState(stateObj,title,url) またはhistory.replaceState(stateObj,title,url)

pushState および replaceState は 3 を受け入れますパラメーター、つまり状態オブジェクト、タイトル title、および変更された URL。

window.history.pushState({foo:'bar'}, "page 2", "bar.html");

此时,当前的url变为:

执行上述方法前:http://localhost:3000
执行上述方法后:http://localhost:3000/bar.html

如果我们输出window.history.state:

console.log(window.history.state);
// {foo:'bar'}

window.history.state就是我们pushState的第一个对象参数。

  • history.replaceState()方法不会改变hitroy的长度

    console.log(window.history.length);
    window.history.replaceState({foo:'bar'}, "page 2", "bar.html");
    console.log(window.history.length);

上述前后两次输出的window.history.length是相等的。

此外。

每次触发history.back()或者浏览器的后退按钮等,会触发一个popstate事件,这个事件在后退或者前进的时候发生:

window.onpopstate=function(event){

}
ログイン後にコピー

注意:
history.pushState和history.replaceState方法并不会触发popstate事件。

如果用history做为路由的基础,那么需要用到的是history.pushState和history.replaceState,在不刷新的情况下可以改变url的地址,且如果页面发生回退back或者forward时,会触发popstate事件。

hisory为依据来实现路由的优点:

  • 对搜索引擎友好

  • 方便统计用户行为

缺点:

  • 兼容性不如hash

  • 需要后端做相应的配置,否则直接访问子页面会出现404错误

三、React-router4.0的使用

了解了前端路由实现的原理之后,下面来介绍一下React-router4.0。在React-router4.0的代码库中,根据使用场景包含了以下几个独立的包:

  • react-router : react-router4.0的核心代码

  • react-router-dom : 构建网页应用,存在DOM对象场景下的核心包

  • react-router-native : 适用于构建react-native应用

  • react-router-config : 配置静态路由

  • react-router-redux : 结合redux来配置路由,已废弃,不推荐使用。

在react-router4.0中,遵循Just Component的设计理念:

所提供的API都是以组件的形式给出。

比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。

1、React-router-dom常用的组件API

下面我们以React-router4.0中的React-router-dom包来介绍常用的BrowserRouter、HashRouter、Link和Router等。

(1)  

组件包裹整个App系统后,就是通过html5的history来实现无刷新条件下的前端路由。

组件具有以下几个属性:

  • basename: string  这个属性,是为当前的url再增加名为basename的值的子目录。

     <BrowserRouter basename="test"/>
    ログイン後にコピー

如果设置了basename属性,那么此时的:

http://localhost:3000 和 http://localhost:3000/test  表示的是同一个地址,渲染的内容相同。

  • getUserConfirmation: func 这个属性,用于确认导航的功能。默认使用window.confirm

  • forceRefresh: bool 默认为false,表示改变路由的时候页面不会重新刷新,如果当前浏览器不支持history,那么当forceRefresh设置为true的时候,此时每次去改变url都会重新刷新整个页面。

  • keyLength: number 表示location的key属性的长度,在react-router中每个url下都有为一个location与其对应,并且每一个url的location的key值都不相同,这个属性一般都使用默认值,设置的意义不大。

  • children: node children的属性必须是一个ReactNode节点,表示唯一渲染一个元素。

对应的是,使用url中的hash属性来保证不重新刷新的情况下同时渲染页面。

(2)  

组件十分重要, 做的事情就是匹配相应的location中的地址,匹配成功后渲染对应的组件。下面我们来看中的属性。

首先来看如何执行匹配,决定地址匹配的属性:

  • path:当location中的url改变后,会与Route中的path属性做匹配,path决定了与路由或者url相关的渲染效果。

  • exact: 如果有exact,只有url地址完全与path相同,才会匹配。如果没有exact属性,url的地址不完全相同,也会匹配。

举例来说,当exact不设置时:

<Route  path=&#39;/home&#39; component={Home}/> 
<Route  path=&#39;/home/first&#39; component={First}/>
ログイン後にコピー

此时url地址为:http://localhost:3000/home/first  的时候,不仅仅会匹配到 path='/home/first'时的组件First,同时还会匹配到path='home'时候的Router。

如果设置了exact:

 <Route  path=&#39;/home&#39; component={Home}/>
ログイン後にコピー

只有http://localhost:3000/home/first 不会匹配Home组件,只有url地址完全与path相同,只有http://localhost:3000/home才能匹配Home组件成功。

  • strict :与exact不同,strict属性仅仅是对exact属性的一个补充,设置了strict属性后,严格限制了但斜线“/”。

举例来说,当不设置strict的时候:

 <Route  path=&#39;/home/&#39; component={Home}/>
ログイン後にコピー

此时http://localhost:3000/home 和 http://localhost:3000/home/
都能匹配到组件Home。匹配对于斜线“/”比较宽松。如果设置了strict属性:

<Route  path=&#39;/home/&#39; component={Home}/>
ログイン後にコピー

那么此时严格匹配斜线是否存在,http://localhost:3000/home 将无法匹配到Home组件。

当Route组件与某一url匹配成功后,就会继续去渲染。那么什么属性决定去渲染哪个组件或者样式呢,Route的component、render、children决定渲染的内容。

  • component:该属性接受一个React组件,当url匹配成功,就会渲染该组件

  • render:func 该属性接受一个返回React Element的函数,当url匹配成功,渲染覆该返回的元素

  • children:与render相似,接受一个返回React Element的函数,但是不同点是,无论url与当前的Route的path匹配与否,children的内容始终会被渲染出来。

并且这3个属性所接受的方法或者组件,都会有location,match和history这3个参数。如果组件,那么组件的props中会存在从Link传递过来的location,match以及history。

(3)

定义了匹配规则和渲染规则,而 决定的是如何在页面内改变url,从而与相应的匹配。类似于html中的a标签,此外在改变url的时候,可以将一些属性传递给匹配成功的Route,供相应的组件渲染的时候使用。

  • to: string

to属性的值可以为一个字符串,跟html中的a标签的href一样,即使to属性的值是一个字符串,点击Link标签跳转从而匹配相应path的Route,也会将history,location,match这3个对象传递给Route所对应的组件的props中。

举例来说:

<Link to=&#39;/home&#39;>Home</Link>
ログイン後にコピー

如上所示,当to接受一个string,跳转到url为'/home'所匹配的Route,并渲染其关联的组件内接受3个对象history,location,match。
这3个对象会在下一小节会详细介绍。

  • to: object

to属性的值也可以是一个对象,该对象可以包含一下几个属性:pathname、seacth、hash和state,其中前3个参数与如何改变url有关,最后一个state参数是给相应的改变url时,传递一个对象参数。

举例来说:

 <Link to={{pathname:&#39;/home&#39;,search:&#39;?sort=name&#39;,hash:&#39;#edit&#39;,state:{a:1}}}>Home</Link>
ログイン後にコピー

在上个例子中,to为一个对象,点击Link标签跳转后,改变后的url为:'/home?sort=name#edit'。 但是在与相应的Route匹配时,只匹配path为'/home'的组件,'/home?sort=name#edit'。在'/home'后所带的参数不作为匹配标准,仅仅是做为参数传递到所匹配到的组件中,此外,state={a:1}也同样做为参数传递到新渲染的组件中。

(4) React-router中传递给组件props的history对象

介绍了 之后,使用这3个组件API就可以构建一个简单的React-router应用。这里我们之前说,每当点击Link标签跳转或者在js中使用React-router的方法跳转,从当前渲染的组件,进入新组件。在新组件被渲染的时候,会接受一个从旧组件传递过来的参数。

我们前面提到,Route匹配到相应的改变后的url,会渲染新组件,该新组件中的props中有history、location、match3个对象属性,其中hisotry对象属性最为关键。

同样以下面的例子来说明:

<Link to={{pathname:&#39;/home&#39;,search:&#39;?sort=name&#39;,hash:&#39;#edit&#39;,state:{a:1}}}>Home</Link>

<Route exact path=&#39;/home&#39; component={Home}/>
ログイン後にコピー

我们使用了,该组件利用了window.history对象,当点击Link标签跳转后,会渲染新的组件Home,我们可以在Home组件中输出props中的history:

// props中的history
action: "PUSH"
block: ƒ block()
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 12
listen: ƒ listen(listener)
location: {pathname: "/home", search: "?sort=name", hash: "#edit", state: {…}, key: "uxs9r5"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)
ログイン後にコピー

从上面的属性明细中:

  • push:f  这个方法用于在js中改变url,之前在Link组件中可以类似于HTML标签的形式改变url。push方法映射于window.history中的pushState方法。

  • replace: f 这个方法也是用于在js中改变url,replace方法映射于window.history中的replaceState方法。

  • block:f 这个方法也很有用,比如当用户离开当前页面的时候,给用户一个文字提示,就可以采用history.block("你确定要离开当前页吗?")这样的提示。

  • go / goBack / goForward

在组件props中history的go、goBack、goForward方法,分别window.history.go、window.history.back、window.history.forward对应。

  • action: "PUSH" || "POP"

action这个属性左右很大,如果是通过Link标签或者在js中通过this.props.push方法来改变当前的url,那么在新组件中的action就是"PUSH",否则就是"POP".

action属性很有用,比如我们在做翻页动画的时候,前进的动画是SlideIn,后退的动画是SlideOut,我们可以根据组件中的action来判断采用何种动画:

function newComponent (props)=>{
   return (
     <ReactCSSTransitionGroup
          transitionAppear={true}
          transitionAppearTimeout={600}
          transitionEnterTimeout={600}
          transitionLeaveTimeout={200}
          transitionName={props.history.action===&#39;PUSH&#39;?&#39;SlideIn&#39;:&#39;SlideOut&#39;}
         >
           <Component {...props}/>
    </ReactCSSTransitionGroup>
   )
}
ログイン後にコピー
  • location:object

在新组件的location属性中,就记录了从就组件中传递过来的参数,从上面的例子中,我们看到此时的location的值为:

    hash: "#edit"
    key: "uxs9r5"
    pathname: "/home"
    search: "?sort=name"
    state: {a:1}
ログイン後にコピー

除了key这个用作唯一表示外,其他的属性都是我们从上一个Link标签中传递过来的参数。

四、React-router4.0源码分析

在第三节中我们介绍了React-router的大致使用方法,读一读React-router4.0的源码。

这里我们主要分析一下React-router4.0中是如何根据window.history来实现前端路由的,因此设计到的组件为BrowserRouter、Router、Route和Link

1、React-router中的history

从上一节的介绍中我们知道,点击Link标签传递给新渲染的组件的props中有一个history对象,这个对象的内容很丰富,比如:action、goBack、go、location、push和replace方法等。

React-router构建了一个History类,用于在window.history的基础上,构建属性更为丰富的实例。该History类实例化后具有action、goBack、location等等方法。

React-router中将这个新的History类的构建方法,独立成一个node包,包名为history。

npm install history -s
ログイン後にコピー

可以通过上述方法来引入,我们来看看这个History类的实现。

const createBrowserHistory = (props = {}) => {
    const globalHistory = window.history;
    ......
    //默认props中属性的值
    const {
      forceRefresh = false,
      getUserConfirmation = getConfirmation,
      keyLength = 6,
      basename = '',
    } = props;
    const history = {
        length: globalHistory.length,
        action: "POP",
        location: initialLocation,
        createHref,
        push,
        replace,
        go,
        goBack,
        goForward,
        block,
        listen
    };                                         ---- (1)
    const basename = props.basename;   
    const canUseHistory = supportsHistory();   ----(2)
            
    const createKey = () =>Math.random().toString(36).substr(2, keyLength);    ----(3)
    
    const transitionManager = createTransitionManager();  ----(4)
    const setState = nextState => {
        Object.assign(history, nextState);
    
        history.length = globalHistory.length;
    
        transitionManager.notifyListeners(history.location, history.action);
    };                                      ----(5)
    
    const handlePopState = event => {
        handlePop(getDOMLocation(event.state));
    };
    const handlePop = location => {
    if (forceNextPop) {
      forceNextPop = false;
      setState();
    } else {
      const action = "POP";
      
      transitionManager.confirmTransitionTo(
            location,
            action,
            getUserConfirmation,
            ok => {
              if (ok) {
                setState({ action, location });
              } else {
                revertPop(location);
              }
            }
          );
        }
    };                                    ------(6)
    const initialLocation = getDOMLocation(getHistoryState());
    let allKeys = [initialLocation.key]; ------(7)
    
  
    // 与pop相对应,类似的push和replace方法
    const push ... replace ...            ------(8)
    
    return history                        ------ (9)
    
}
ログイン後にコピー
  • (1) 中指明了新的构建方法History所返回的history对象中所具有的属性。

  • (2)中的supportsHistory的方法判断当前的浏览器对于window.history的兼容性,具体方法如下:

    export const supportsHistory = () => {
      const ua = window.navigator.userAgent;
    
      if (
        (ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) &&
        ua.indexOf("Mobile Safari") !== -1 &&
        ua.indexOf("Chrome") === -1 &&
        ua.indexOf("Windows Phone") === -1
      )
        return false;
    
      return window.history && "pushState" in window.history;
    };
ログイン後にコピー

从上述判别式我们可以看出,window.history在chrome、mobile safari和windows phone下是绝对支持的,但不支持安卓2.x以及安卓4.0

  • (3)中用于创建与history中每一个url记录相关联的指定位数的唯一标识key, 默认的keyLength为6位

  • (4)中 createTransitionManager方法,返回一个集成对象,对象中包含了关于history地址或者对象改变时候的监听函数等,具体代码如下:

         const createTransitionManager = () => {
             const setPrompt = nextPrompt => {
               
             };
       
             const confirmTransitionTo = (
               location,
               action,
               getUserConfirmation,
               callback
             ) => {
                if (typeof getUserConfirmation === "function") {
                     getUserConfirmation(result, callback);
                   } else {
                     callback(true);
                   }
                 } 
             };
             
             
             let listeners = [];
             const appendListener = fn => {
               let isActive = true;
           
               const listener = (...args) => {
                 if (isActive) fn(...args);
               };
           
               listeners.push(listener);
           
               return () => {
                 isActive = false;
                 listeners = listeners.filter(item => item !== listener);
               };
             };
           
             const notifyListeners = (...args) => {
               listeners.forEach(listener => listener(...args));
             };
           
             return {
               setPrompt,
               confirmTransitionTo,
               appendListener,
               notifyListeners
             };
    ログイン後にコピー

};

setPrompt函数,用于设置url跳转时弹出的文字提示,confirmTransaction函数,会将当前生成新的history对象中的location,action,callback等参数,作用就是在回调的callback方法中,根据要求,改变传入的location和action对象。

接着我们看到有一个listeners数组,保存了一系列与url相关的监听事件数组,通过接下来的appendListener方法,可以往这个数组中增加事件,通过notifyListeners方法可以遍历执行listeners数组中的所有事件。

  • (5) setState方法,发生在history的url或者history的action发生改变的时候,此方法会更新history对象中的属性,同时会触发notifyListeners方法,传入当前的history.location和history.action。遍历并执行所有监听url改变的事件数组listeners。

  • (6)这个getDOMLocation方法就是根据当前在window.state中的值,生成新history的location属性对象,allKeys这是始终保持了在url改变时候的历史url相关联的key,保存在全局,allKeys在执行生“POP”或者“PUSH”、“Repalce”等会改变url的方法时,会保持一个实时的更新。

  • (7) handlePop方法,用于处理“POP”事件,我们知道在window.history中点击后退等会触发“POP”事件,这里也是一样,执行action为“POP”,当后退的时候就会触发该函数。

  • (8)中包含了与pop方法类似的,push和replace方法,push方法同样做的事情就是执行action为“PUSH”(“REPLACE”),该变allKeys数组中的值,唯一不同的是actio为“PUSH”的方法push是往allKeys数组中添加,而action为“REPLACE”的方法replace则是替换掉当前的元素。

  • (9)返回这个新生成的history对象。

2、React-router中Link组件

其实最难弄懂的是React-router中如何重新构建了一个history工厂函数,在第一小节中我们已经详细的介绍了history生成函数createBrowserHistory的源码,接着来看Link组件就很容易了。

首先Link组件类似于HTML中的a标签,目的也很简单,就是去主动触发改变url的方法,主动改变url的方法,从上述的history的介绍中可知为push和replace方法,因此Link组件的源码为:

class Link extends React.Component {

    
   handleClick = event => {
   ...

     const { history } = this.context.router;
     const { replace, to } = this.props;
     if (replace) {
       history.replace(replace);
     } else {
      history.push(to);
     }
   }
  };
  render(){
    const { replace, to, innerRef, ...props } = this.props;
     <a {...props} onClick={this.handleClick}/>
  }
}
ログイン後にコピー

上述代码很简单,从React的context API全局对象中拿到history,然后如果传递给Link组件的属性中有replace为true,则执行history.replace(to),to 是一个包含pathname的对象,如果传递给Link组件的replace属性为false,则执行history.push(to)方法。

3、React-router中Route组件

Route组件也很简单,其props中接受一个最主要的属性path,Route做的事情只有一件:

当url改变的时候,将path属性与改变后的url做对比,如果匹配成功,则渲染该组件的componet或者children属性所赋值的那个组件。

具体源码如下:

class Route extends React.Component {


  ....
  constructor(){
  
  
  }
  render() {
    const { match } = this.state;
    const { children, component, render } = this.props;
    const { history, route, staticContext } = this.context.router;
    const location = this.props.location || route.location;
    const props = { match, location, history, staticContext };

    if (component) return match ? React.createElement(component, props) : null;

    if (render) return match ? render(props) : null;

    if (typeof children === "function") return children(props);

    if (children && !isEmptyChildren(children))
      return React.Children.only(children);

    return null;
  }

}
ログイン後にコピー

state中的match就是是否匹配的标记,如果匹配当前的Route的path,那么根据优先级顺序component属性、render属性和children属性来渲染其所指向的React组件。

4、React-router中Router组件

Router组件中,是BrowserRouter、HashRouter等组件的底层组件。该组件中,定义了包含匹配规则match函数,以及使用了新history中的listener方法,来监听url的改变,从而,当url改变时,更改Router下不同path组件的isMatch结果。

class Router extends React.Component {
    componentWillMount() {
        const { children, history } = this.props
        
        //调用history.listen监听方法,该方法的返回函数是一个移除监听的函数
        
        this.unlisten = history.listen(() => {
          this.setState({
            match: this.computeMatch(history.location.pathname)
          });
        });
    }
    componentWillUnmount() {
      this.unlisten();
    }
    render() {
    
    }
}
ログイン後にコピー

上述首先在组件创建前调用了listener监听方法,来监听url的改变,实时的更新isMatch的结果。

5、总结

本文从前端路由的原理出发,先后介绍了两种前端路由常用的方法,接着介绍了React-router的基本组件API以及用法,详细介绍了React-router的组件中新构建的history对象,最后结合React-router的API阅读了一下React-router的源码。

以上がルーティングから始まるreact-router 4.0ソースコードの深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート