原创 路由文件及其使用
1、新建路由文件,根據路由的不同作用,劃分成不同模塊 export const mainRoutes=[ { path:'/x', component:X, exact:true 如果
2020-06-30 10:25:19
原创 css動畫 3d旋轉相冊
思路: 重疊四個圖片,然後設置行變點在中心的z軸往後的方向上,分別設置其他圖片 繞y軸的旋轉角度,設置父容器的行變中心點和圖片一樣並設置透視和3d屬性。 若要俯瞰繞中心點旋轉:設置父元素繞x軸旋轉一定角度後,hover放
2020-06-30 10:25:19
原创 redux redux-saga實現異步方法
1、安裝 cnpm install redux-saga --save 2、引入,在創建store的文件中引入 import {createStore,applyMiddleware} from 'redux'; imp
2020-06-30 10:25:19
原创 ReactHook ReducerHook
1、創建action-type.js文件 用途: 用來放置action的type屬性的常量 export const XX='XX' 2、創建actions.js (1)引入action-type.js
2020-06-30 10:25:19
原创 ReactHook EffectHook
副作用操作,使得函數組件能夠進行生命週期的操作 可以看作是以下生命週期函數的結合: componentDidMount，componentDidUpdate 和 componentWillUnmount 會在每次組件掛載時
2020-06-30 10:25:19
原创 react react-transition-group動畫插件
設置一組動畫 內部只能有一個容器包裹！！！ 1、安裝 cnpm install react-transition-group --save 2、引入 import { CSSTransition } fro
2020-06-30 10:25:19
原创 css動畫 提交按鈕省略號加載動畫
做法: 給按鈕的文字添加僞類,然後利用陰影是移動和原本元素大小相同的原理 在動畫中依次添加多個水平方向移動的陰影 代碼示例: <!DOCTYPE html> <html> <head> <meta charset="u
2020-06-30 10:25:19
1
原创 css 響應式佈局-不同媒體設備樣式
在style上添加屬性 media='screen' 屏幕設備上有效 media='print' 打印機上有效 media='print,screen' media='all' 所有設備 若是外部css文件 在li
2020-06-30 10:25:19
原创 ReactHook ImperativeHandleHook以及React.forwardRef
React.forwardRef 使得父組件能夠操作子組件的ref 1、子組件 const 子組件 = React.forwardRef((props, ref) => { return( <div>
2020-06-30 10:25:19
原创 css動畫 3d立體透明篩子
做法: 6個div重疊,設置旋轉中心點爲z軸上某一點,按水平四個面,分別按中心點 旋轉90度、180度、270度等,上下兩個面，分別將旋轉點設置在div的上邊線和下邊線,再分別繞x軸旋轉對應的90度 代碼示例: <!DOCT
2020-06-30 10:25:19
原创 ReactHook 自定義Hook
自定義Hook本質上就是自定義函數,內部搭配Hook的StateHook等內置方法 但是注意,自定義Hook必須要以use開頭,React將自動檢測是否符合Hook規則 代碼示例: import React,{useState
2020-06-30 10:25:19
原创 ReactHook ContextHook
和context作用相同,可以解決多層組件傳遞參數 1、引入 import React, {Component,useContext } from 'react'; 2、定義Context const xx=React.c
2020-06-30 10:25:19
原创 ReactHook StateHook
Hook使得函數組件能使用state以及類組件其他特性 1、引入 import React, { Component,useState } from 'react'; 2、定義狀態 const [x, xx] = useS
2020-06-30 10:25:19
原创 ReactHook MemoHook
類似Vue的計算屬性,當依賴項中的useState的數據改變,重新渲染函數時, 會重新調用函數,返回新的值,否則會一直使用緩存的舊值 1、引入 import React, {Component,useContext } fro
2020-06-30 10:25:19